Dark Mode

w3-kit supports class-based dark mode with three modes: system, light, and dark. The user's preference is stored in localStorage and applied automatically on page load.

How It Works

Tailwind is configured with darkMode: "class"
The theme is stored in the localStorage key "w3-theme"
Applied via a data-theme attribute and the .dark class on <html>
Components use the Tailwind dark: prefix for dark mode styles

Dark Mode Classes

Components use standard Tailwind dark mode utilities. Here are common patterns you will see in the component source.

// Common dark mode patterns in components
className="bg-white dark:bg-gray-950"
className="text-gray-900 dark:text-white"
className="border-gray-200 dark:border-gray-800"
className="bg-gray-50 dark:bg-gray-900"

Theme Toggle

Use the built-in theme utilities to toggle between modes programmatically.

theme-toggle.tsx

import { setTheme, getStoredTheme } from "w3-kit/theme"

// Set a specific theme
setTheme("dark")
setTheme("light")
setTheme("system")

// Read the current stored preference
const current = getStoredTheme() // "system" | "light" | "dark"

Custom Theme Toggle Component

Here is a pattern for building your own theme toggle button.

ThemeToggle.tsx

import { useState, useEffect } from "react"
import { setTheme, getStoredTheme } from "w3-kit/theme"

type Theme = "system" | "light" | "dark"

export function ThemeToggle() {
  const [theme, setCurrentTheme] = useState<Theme>("system")

  useEffect(() => {
    setCurrentTheme(getStoredTheme())
  }, [])

  const toggle = () => {
    const next: Theme =
      theme === "system" ? "light" : theme === "light" ? "dark" : "system"
    setTheme(next)
    setCurrentTheme(next)
  }

  return (
    <button onClick={toggle} className="rounded-md px-3 py-1.5 text-sm">
      {theme === "system" ? "System" : theme === "light" ? "Light" : "Dark"}
    </button>
  )
}