Theme

Light, dark, or system — every surface is wrapped in a ThemeProvider. Use these helpers to read or change the preference.

Initialize on mount

Call once when a surface boots. Reads the stored preference and applies it to the document.

import { initializeTheme } from "@/shared/theme";

await initializeTheme();

Read and change

import { setThemePreference, getThemePreference } from "@/shared/theme";

await setThemePreference("system");   // "light" | "dark" | "system"
const theme = await getThemePreference();

System mode

When set to system, the UI follows the browser/device theme via matchMedia. Changing the OS theme updates the extension in real time. Use CSS variables and Tailwind tokens instead of hardcoded colors so both themes render correctly.