source: Klonkt/src/assets/js/ward-theme.js@ 3866994

/**
 * De themakleur (SkyPalette): één gekozen kleur die de hele ward kleurt.
 *
 * De acht presets en de luminantie-regel komen LETTERLIJK uit Shaer (iOS is de
 * bron): dezelfde kleuren, en dezelfde beslissing welke tekst erop leesbaar is
 * (donker op licht, wit op de rest). Een handgehouden lijstje zou uit de pas
 * gaan lopen; luminantie beslist.
 *
 * Opgeslagen in localStorage, per apparaat, net als in de app.
 */
'use strict';

export const PRESETS = [
  0x5A32E6, // paars, de vertrouwde
  0x1E6AE1, // oceaan
  0x0E9B8A, // zeegroen
  0x2E7D32, // bos
  0xF59E0B, // zon
  0xFF6B4A, // koraal
  0xE255A1, // roze
  0x1F2937, // nacht
];
const FALLBACK = 0x5A32E6;
const KEY = 'ward.skyColor';

const hex = (rgb) => '#' + rgb.toString(16).padStart(6, '0');

/** Wit of donker, wat leesbaar is op deze kleur. Zelfde som als in de app. */
export function onSky(rgb) {
  const r = ((rgb >> 16) & 0xff) / 255;
  const g = ((rgb >> 8) & 0xff) / 255;
  const b = (rgb & 0xff) / 255;
  const lum = 0.2126 * r + 0.7152 * g + 0.0722 * b;
  return lum > 0.5 ? '#1f2430' : '#ffffff';
}

/** De opgeslagen kleur, of de vertrouwde paarse als er nog niets gekozen is. */
export function loadColor() {
  const v = parseInt(localStorage.getItem(KEY) || '', 10);
  return Number.isFinite(v) && v >= 0 && v <= 0xffffff ? v : FALLBACK;
}

/**
 * De kleur toepassen: het accent dat de knoppen, de bubbels en de (+) dragen,
 * plus een zachte tint over de LICHTE achtergrond zodat de hele hemel de
 * gekozen kleur ademt. De tekst-op-accent volgt de luminantie.
 */
export function applyColor(rgb) {
  const root = document.documentElement.style;
  root.setProperty('--accent', hex(rgb));
  root.setProperty('--on-accent', onSky(rgb));
  // De achtergrond is LICHT (Robins wens 12-8) maar krijgt een vleugje van de
  // kleur: een verticale gradient van een lichte tint naar bijna wit. De kleur
  // wordt sterk richting wit gemengd, zodat de tekst leesbaar blijft.
  const r = (rgb >> 16) & 0xff, g = (rgb >> 8) & 0xff, b = rgb & 0xff;
  const tint = (f) => `rgb(${Math.round(r * f + 255 * (1 - f))},${Math.round(g * f + 255 * (1 - f))},${Math.round(b * f + 255 * (1 - f))})`;
  root.setProperty('--bg-top', tint(0.10));
  root.setProperty('--bg-bottom', tint(0.03));
}

export function saveColor(rgb) {
  localStorage.setItem(KEY, String(rgb));
  applyColor(rgb);
}