vtc-service 0.7.0

Service for Verifiable Trust Communities
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

// Segmented Auto / Light / Dark switcher. Lives in the nav header
// next to the session badge. Persists via @/lib/theme.

import { useEffect, useState } from "react";
import { Monitor, Moon, Sun } from "lucide-react";

import {
  getStoredTheme,
  setTheme,
  subscribeTheme,
  type ThemePreference,
} from "@/lib/theme";

const options: { value: ThemePreference; icon: typeof Sun; label: string }[] = [
  { value: "auto", icon: Monitor, label: "Match system" },
  { value: "light", icon: Sun, label: "Light" },
  { value: "dark", icon: Moon, label: "Dark" },
];

export function ThemeSwitcher() {
  const [pref, setPref] = useState<ThemePreference>(() => getStoredTheme());

  useEffect(() => subscribeTheme(setPref), []);

  return (
    <div
      className="theme-switcher"
      role="group"
      aria-label="Colour theme"
    >
      {options.map((opt) => {
        const Icon = opt.icon;
        const active = pref === opt.value;
        return (
          <button
            key={opt.value}
            type="button"
            aria-pressed={active}
            aria-label={opt.label}
            title={opt.label}
            onClick={() => setTheme(opt.value)}
          >
            <Icon aria-hidden="true" />
          </button>
        );
      })}
    </div>
  );
}