Research-Stack/5-Applications/text-to-cad/viewer/lib/themes.js

export const SYSTEM_THEME_ID = "system";
export const LIGHT_THEME_ID = "light";
export const DARK_THEME_ID = "dark";
export const DEFAULT_THEME_ID = SYSTEM_THEME_ID;
export const THEME_STORAGE_KEY = "cad-explorer-theme";

const THEME_ALIASES = Object.freeze({
  "studio-light": LIGHT_THEME_ID,
  ivory: LIGHT_THEME_ID,
  graphite: DARK_THEME_ID,
  blueprint: DARK_THEME_ID,
  solarized: DARK_THEME_ID,
  terminal: DARK_THEME_ID,
  "candy-core": DARK_THEME_ID
});

const THEME_OPTIONS = Object.freeze([
  {
    id: SYSTEM_THEME_ID,
    label: "System"
  },
  {
    id: LIGHT_THEME_ID,
    label: "Light"
  },
  {
    id: DARK_THEME_ID,
    label: "Dark"
  }
]);

const THEME_REGISTRY = Object.freeze(
  Object.fromEntries(THEME_OPTIONS.map((themeOption) => [themeOption.id, themeOption]))
);

export const THEMES = THEME_OPTIONS;

export function normalizeThemeId(themeId) {
  const normalizedThemeId = String(themeId || "").trim().toLowerCase();
  const canonicalThemeId = THEME_ALIASES[normalizedThemeId] || normalizedThemeId;
  return THEME_REGISTRY[canonicalThemeId] ? canonicalThemeId : DEFAULT_THEME_ID;
}

export function getThemeOption(themeId) {
  return THEME_REGISTRY[normalizeThemeId(themeId)];
}

export function resolveThemeMode(themeId, { prefersDark = false } = {}) {
  const normalizedThemeId = normalizeThemeId(themeId);
  return normalizedThemeId === SYSTEM_THEME_ID
    ? (prefersDark ? DARK_THEME_ID : LIGHT_THEME_ID)
    : normalizedThemeId;
}

export function getThemeControlLabel(themeId, { prefersDark = false } = {}) {
  const themeOption = getThemeOption(themeId);
  if (themeOption.id !== SYSTEM_THEME_ID) {
    return themeOption.label;
  }
  const resolvedMode = resolveThemeMode(themeId, { prefersDark });
  return `${themeOption.label} (${getThemeOption(resolvedMode).label})`;
}

export function applyThemeToDocument(themeId, root = document.documentElement, { prefersDark = false } = {}) {
  if (!root) {
    return;
  }

  const normalizedThemeId = normalizeThemeId(themeId);
  const resolvedThemeMode = resolveThemeMode(normalizedThemeId, { prefersDark });

  root.dataset.themePreference = normalizedThemeId;
  root.dataset.theme = resolvedThemeMode;
  root.classList.toggle("dark", resolvedThemeMode === DARK_THEME_ID);
  root.style.colorScheme = resolvedThemeMode;
}