Skip to main content

Theming

Closegram supports light and dark mode via Tailwind CSS's darkMode: "class" strategy.

How it works​

The theme is toggled by adding or removing the dark class on the <html> element. Tailwind then applies dark: variant classes accordingly.

ThemeToggle component​

src/components/ThemeToggle.tsx renders a sun/moon toggle button. Clicking it:

  1. Toggles the dark class on document.documentElement
  2. Persists the preference to localStorage

Theme context​

The current theme is managed in a React context so any component can read or change it:

const { theme, toggleTheme } = useTheme();

Tailwind configuration​

Dark mode is enabled via the shared packages/tailwind-config:

// tailwind.config.ts
export default {
  darkMode: "class",
  // ...
};

Usage in components​

<div className="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  ...
</div>

System preference​

On first load (before any user preference is saved), the theme defaults to the OS preference:

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