paperboy/theme.js at master · harbefas/paperboy · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
const THEMES = ['auto', 'dark', 'light'];

function setSVG(el, svgStr) {
  el.innerHTML = svgStr;
}

const ICONS = {
  auto: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>',
  dark:  '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>',
  light: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>',
};

function isDaytime() {
  const h = new Date().getHours();
  return h >= 7 && h < 19;
}

function resolveTheme(pref) {
  if (pref === 'dark') return 'dark';
  if (pref === 'light') return 'light';
  return isDaytime() ? 'light' : 'dark';
}

function applyTheme(pref) {
  const resolved = resolveTheme(pref);
  // Tokens live in [data-theme] blocks (styles/mate-tokens.css); the theme
  // switch is that attribute and nothing else.
  document.documentElement.dataset.theme = resolved;
}

function initTheme(btnId) {
  let pref = localStorage.getItem('theme') || 'auto';
  applyTheme(pref);

  const btn = document.getElementById(btnId);
  if (!btn) return;

  setSVG(btn, ICONS[pref]);
  btn.title = 'Theme: ' + pref;

  let themeInterval = null;

  function startAutoCheck(currentPref) {
    if (themeInterval) { clearInterval(themeInterval); themeInterval = null; }
    if (currentPref === 'auto') {
      themeInterval = setInterval(() => {
        if (localStorage.getItem('theme') === 'auto') applyTheme('auto');
      }, 60_000);
    }
  }

  btn.addEventListener('click', () => {
    const currentResolved = resolveTheme(pref);
    let idx = THEMES.indexOf(pref);
    let next;
    do {
      idx = (idx + 1) % THEMES.length;
      next = THEMES[idx];
    } while (resolveTheme(next) === currentResolved && next !== pref);
    pref = next;
    localStorage.setItem('theme', pref);
    applyTheme(pref);
    setSVG(btn, ICONS[pref]);
    btn.title = 'Theme: ' + pref;
    startAutoCheck(pref);
  });

  startAutoCheck(pref);
}