use/read/write theme mode

src/lib/useThemeMode.ts

@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react';
+
+export type ThemeMode = 'light' | 'dark';
+const storageName = 'themeMode';
+const attributeName = 'data-theme-mode';
+
+export function useTheme() {
+  const [theme, setTheme] = useState(getTheme());
+
+  useEffect(() => {
+    const listener = function () {
+      setTheme(getTheme());
+    };
+    window.addEventListener('load', listener);
+
+    return () => window.removeEventListener('load', listener);
+  }, []);
+
+  return theme;
+}
+
+export function getTheme() {
+  return localStorage.getItem(storageName) ?? getCSSTheme();
+}
+
+export function setTheme(mode: ThemeMode) {
+  document.documentElement.setAttribute(attributeName, mode);
+  localStorage.setItem(storageName, mode);
+}
+
+export function getCSSTheme(): ThemeMode {
+  return getComputedStyle(document.documentElement)
+    .getPropertyValue('--theme')
+    .replace(/^\s+|\s+$/g, '') as ThemeMode;
+}