Light and dark mode implementation with prefers-color-scheme, CSS variables, and automatic switching. Use when implementing theme modes, color schemes, or system preference detection.
View on GitHubFebruary 2, 2026
Select agents to install to:
npx add-skill https://github.com/fusengine/agents/blob/main/plugins/design-expert/skills/dark-light-modes/SKILL.md -a claude-code --skill dark-light-modesInstallation paths:
.claude/skills/dark-light-modes/# Dark/Light Modes
Robust theme system with system preference detection.
## Agent Workflow (MANDATORY)
Before implementation:
1. **fuse-ai-pilot:explore-codebase** - Check existing theme setup
2. **fuse-ai-pilot:research-expert** - next-themes or theme provider docs
After: Run **fuse-ai-pilot:sniper** for validation.
## CSS Variables Approach
```css
:root {
/* Light mode (default) */
--background: oklch(100% 0 0);
--foreground: oklch(10% 0 0);
--surface: oklch(98% 0.01 260);
--muted: oklch(95% 0.01 260);
--border: oklch(90% 0.01 260);
/* Glass */
--glass-bg: rgba(255, 255, 255, 0.8);
--glass-border: rgba(255, 255, 255, 0.2);
}
.dark {
--background: oklch(10% 0.01 260);
--foreground: oklch(98% 0 0);
--surface: oklch(15% 0.01 260);
--muted: oklch(20% 0.01 260);
--border: oklch(25% 0.01 260);
/* Glass - darker */
--glass-bg: rgba(0, 0, 0, 0.4);
--glass-border: rgba(255, 255, 255, 0.1);
}
```
## System Preference Detection
```css
/* Automatic system preference */
@media (prefers-color-scheme: dark) {
:root:not(.light) {
--background: oklch(10% 0.01 260);
--foreground: oklch(98% 0 0);
/* ... dark values */
}
}
```
## React Implementation
```tsx
// ThemeProvider.tsx
"use client";
import { createContext, useContext, useEffect, useState } from "react";
type Theme = "light" | "dark" | "system";
const ThemeContext = createContext<{
theme: Theme;
setTheme: (theme: Theme) => void;
}>({ theme: "system", setTheme: () => {} });
export function ThemeProvider({ children }: { children: React.ReactNode }) {
const [theme, setTheme] = useState<Theme>("system");
useEffect(() => {
const root = document.documentElement;
if (theme === "system") {
const systemDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
root.classList.toggle("dark", systemDark);
} else {
root.classList.toggle("dark", theme === "dark");
}
}, [theme]);
return (
<ThemeContext.Provider value