https://arshaali.github.io/assets/js/theme.js

1const STORAGE_KEY = "theme";
2const THEME_ATTR  = "data-theme";
3const QUERY_KEY   = "(prefers-color-scheme: dark)";
4
5const themes = {
6  LIGHT: "light",
7  DARK: "dark",
8};
9
10initTheme();
11
12function initTheme() {
13  const savedTheme = localStorage.getItem(STORAGE_KEY);
14
15  if (savedTheme) {
16    // Storage theme
17    setTheme(savedTheme);
18  } else if (window.matchMedia && window.matchMedia(QUERY_KEY).matches) {
19    // system theme
20    setTheme(themes.DARK);
21  } else {
22    // Default theme
23    setTheme(themes.LIGHT);
24  }
25
26  // Watch for system theme changes
27  window.matchMedia(QUERY_KEY).addEventListener("change", (e) => {
28    const newTheme = e.matches ? themes.DARK : themes.LIGHT;
29    setTheme(newTheme);
30  });
31}
32
33function toggleTheme() {
34  const theme = getTheme();
35  const newTheme = theme === themes.DARK ? themes.LIGHT : themes.DARK;
36  setTheme(newTheme);
37  localStorage.setItem(STORAGE_KEY, newTheme);
38}
39
40function getTheme() {
41  return document.documentElement.getAttribute(THEME_ATTR);
42}
43
44function setTheme(value) {
45  document.documentElement.setAttribute(THEME_ATTR, value);
46}