Color

import {
  applyTheme,
  argbFromHex,
  themeFromSourceColor,
} from "@material/material-color-utilities";
import { Themes } from "./themes";
import "./color-theme-demo.scss";

const seed = document.querySelector<HTMLInputElement>("#theme-demo-seed")!;
const dark = document.querySelector<HTMLInputElement>("#theme-demo-dark")!;
const card = document.querySelector<HTMLElement>("#theme-demo-card")!;
const section = document.querySelector<HTMLElement>("#theme-demo-section")!;
const status = document.querySelector<HTMLElement>("#theme-demo-status")!;
const savedTheme = new Themes(document);
dark.checked = savedTheme.isDarkMode();

// Only CSS tokens on the chosen target change; no saved preference is overwritten.
function previewTheme(target: HTMLElement) {
  const theme = themeFromSourceColor(argbFromHex(seed.value));
  applyTheme(theme, { target, dark: dark.checked });
  target.style.colorScheme = dark.checked ? "dark" : "light";
  if (target === document.body) {
    document.documentElement.setAttribute(
      "theme",
      dark.checked ? "dark" : "light",
    );
    document.documentElement.style.colorScheme = dark.checked
      ? "dark"
      : "light";
  }
}

document
  .querySelector("#theme-demo-page-apply")!
  .addEventListener("click", () => {
    previewTheme(document.body);
    status.textContent = `Page preview: ${seed.value}, ${dark.checked ? "dark" : "light"} mode.`;
  });
for (const [id, target] of [
  ["#theme-demo-card-apply", card],
  ["#theme-demo-section-apply", section],
] as const) {
  document.querySelector(id)!.addEventListener("click", () => {
    previewTheme(target);
    status.textContent = `${target === card ? "Card" : "Section"} preview updated; the page palette is unchanged.`;
  });
}

document.querySelector("#theme-demo-reset")!.addEventListener("click", () => {
  // Remove only generated theme properties, so these examples inherit the page again.
  for (const target of [card, section]) {
    Array.from(target.style)
      .filter((name) => name.startsWith("--md-sys-color-"))
      .forEach((name) => target.style.removeProperty(name));
    target.style.removeProperty("color-scheme");
  }
  const isDark = savedTheme.isDarkMode();
  savedTheme.applyThemeProperties(isDark);
  document.body.style.removeProperty("color-scheme");
  document.documentElement.setAttribute("theme", isDark ? "dark" : "light");
  dark.checked = isDark;
  status.textContent =
    "Saved page theme restored. Card and section inherit it again.";
});

.color-theme-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-block: 16px;
}
.color-theme-controls > label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--md-sys-color-on-surface);
}
.color-theme-controls input[type="color"] {
  width: 48px;
  height: 40px;
  padding: 4px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 8px;
}
.color-theme-surface {
  padding: 24px;
  margin-block: 16px;
  border-radius: 16px;
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
}
.color-theme-surface h5 {
  margin-top: 0;
}
.color-theme-note {
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  margin-block: 16px;
}