static/js/components/themeSwitcher.js


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

const THEMES = {
  DARK: "DARK",
  LIGHT: "LIGHT",
};

const flipFlopTheme = (theme) =>
  THEMES[theme] === THEMES.DARK ? THEMES.LIGHT : THEMES.DARK;

const themePickerText = {
  DARK: "light mode.",
  LIGHT: "dark mode.",
};

const themeSwitcher = document.getElementById("theme-switcher");

const setTheme = (theme) => {
  themeSwitcher.textContent = `${themePickerText[theme]}`;

  document.documentElement.setAttribute("data-theme", theme);
  localStorage.setItem("theme", theme);
};

themeSwitcher.addEventListener("click", () =>
  setTheme(flipFlopTheme(document.documentElement.getAttribute("data-theme"))),
);

setTheme(localStorage.getItem("theme") || THEMES.LIGHT);