panels-origin/web-panel/composables/useTheme.ts

const THEME_KEY = "panel-theme";
const LEGACY_KEY = "panel-login-theme";

function readStoredDark(): boolean {
  if (!import.meta.client) return false;
  const saved = localStorage.getItem(THEME_KEY) ?? localStorage.getItem(LEGACY_KEY);
  return saved === "dark";
}

function writeStored(dark: boolean) {
  const value = dark ? "dark" : "light";
  localStorage.setItem(THEME_KEY, value);
  localStorage.setItem(LEGACY_KEY, value);
}

function applyDom(dark: boolean) {
  if (!import.meta.client) return;
  document.documentElement.classList.toggle("dark", dark);
  document.documentElement.style.colorScheme = dark ? "dark" : "light";
}

export function useTheme() {
  const isDark = useState("panel-theme-dark", () => false);

  function setDark(value: boolean) {
    isDark.value = value;
    applyDom(value);
    if (import.meta.client) writeStored(value);
  }

  function toggle() {
    setDark(!isDark.value);
  }

  function init() {
    if (!import.meta.client) return;
    setDark(readStoredDark());
  }

  return { isDark, setDark, toggle, init };
}