https://vetspolszczenia.pl/assets/js/theme.js?v=4

1/* =====================================================================
2   Przelacznik motywu: systemowy -> jasny -> ciemny (zapis w localStorage).
3   Wczesne ustawienie data-theme robi maly inline-skrypt w <head> (bez migania);
4   ten plik obsluguje przycisk i etykiety.
5   ===================================================================== */
6(() => {
7  "use strict";
8
9  const order = ["auto", "light", "dark"];
10  const labels = {
11    auto: ["Motyw systemowy", "Jasny lub ciemny automatycznie"],
12    light: ["Motyw jasny", "Kliknij, aby zmienić"],
13    dark: ["Motyw ciemny", "Kliknij, aby zmienić"],
14  };
15
16  const root = document.documentElement;
17  const get = () => {
18    try {
19      const v = localStorage.getItem("vs-theme");
20      return v === "light" || v === "dark" ? v : "auto";
21    } catch (e) {
22      return "auto";
23    }
24  };
25
26  const apply = (mode) => {
27    if (mode === "auto") root.removeAttribute("data-theme");
28    else root.setAttribute("data-theme", mode);
29    const btn = document.querySelector("#themeToggle");
30    if (btn) {
31      const [tytul, opis] = labels[mode] || labels.auto;
32      const strong = btn.querySelector("strong");
33      const small = btn.querySelector("small");
34      if (strong) strong.textContent = tytul;
35      if (small) small.textContent = opis;
36      btn.setAttribute("aria-label", `${tytul}. Kliknij, aby zmienić motyw.`);
37    }
38  };
39
40  apply(get());
41
42  const btn = document.querySelector("#themeToggle");
43  if (btn) {
44    btn.addEventListener("click", () => {
45      const next = order[(order.indexOf(get()) + 1) % order.length];
46      try {
47        localStorage.setItem("vs-theme", next);
48      } catch (e) {
49        /* prywatny tryb - trudno, zadziala do odswiezenia */
50      }
51      apply(next);
52    });
53  }
54
55  // ---- Kolor akcentu (5 wariantow; "" = oryginalny) ----
56  const dots = document.querySelectorAll(".accent-dot");
57  if (dots.length) {
58    const getA = () => {
59      try {
60        return localStorage.getItem("vs-accent") || "";
61      } catch (e) {
62        return "";
63      }
64    };
65    const applyA = (a) => {
66      if (a) root.setAttribute("data-accent", a);
67      else root.removeAttribute("data-accent");
68      dots.forEach((d) => d.classList.toggle("is-active", (d.dataset.accent || "") === a));
69    };
70    applyA(getA());
71    dots.forEach((d) => {
72      d.addEventListener("click", () => {
73        const a = d.dataset.accent || "";
74        try {
75          if (a) localStorage.setItem("vs-accent", a);
76          else localStorage.removeItem("vs-accent");
77        } catch (e) {
78          /* trudno */
79        }
80        applyA(a);
81      });
82    });
83  }
84
85  /* Koło zębate "Ustawienia wyglądu" otwiera teraz panel po prawej (wyglad.js),
86     w którym są styl, kolor i motyw. Stary rozwijany panel zostaje ukryty. */
87  const panel = document.getElementById("ustawieniaPanel");
88  if (panel) panel.hidden = true;
89})();