usePrefersColorScheme

import { usePrefersColorScheme } from "@servicetitan/anvil2";

function ThemeAwareComponent() {
  const { mode } = usePrefersColorScheme();

  return (
    <div className={mode === "dark" ? "dark-theme" : "light-theme"}>
      System prefers: {mode} mode
    </div>
  );
}

function AdaptiveDiv() {
  const { mode } = usePrefersColorScheme();

  return (
    <div
      style={{
        backgroundColor: mode === "dark" ? "#1a1a1a" : "#ffffff",
        color: mode === "dark" ? "#ffffff" : "#000000",
      }}
    >
      This div adapts to system preferences
    </div>
  );
}

function App() {
  const { mode } = usePrefersColorScheme();

  return (
    <ThemeProvider mode={mode}>
      <AppContent />
    </ThemeProvider>
  );
}

function Logo() {
  const { mode } = usePrefersColorScheme();

  return (
    <img
      src={mode === "dark" ? "/logo-light.svg" : "/logo-dark.svg"}
      alt="Logo"
    />
  );
}

window.matchMedia("(prefers-color-scheme: dark)");