# Dark Light Modes
> Use when implementing theme modes, color schemes, or system preference detection. Covers prefers-color-scheme, CSS variables, next-themes.
- Skill: `majiayu000/dark-light-modes-2` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/dark-light-modes-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/dark-light-modes-2/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/dark-light-modes-2
---
# Dark/Light Modes
## Agent Workflow (MANDATORY)
Before implementation, use `TeamCreate` to spawn 3 agents:
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.
---
## Overview
| Feature | Description |
|---------|-------------|
| **CSS Variables** | Token-based theming |
| **System Detection** | prefers-color-scheme |
| **Manual Toggle** | User preference |
| **No FOUC** | Prevent flash |
---
## Quick Reference
### CSS Variables
```css
:root {
--background: oklch(100% 0 0);
--foreground: oklch(10% 0 0);
--glass-bg: rgba(255, 255, 255, 0.8);
}
.dark {
--background: oklch(10% 0.01 260);
--foreground: oklch(98% 0 0);
--glass-bg: rgba(0, 0, 0, 0.4);
}
```
### System Preference
```css
@media (prefers-color-scheme: dark) {
:root:not(.light) {
--background: oklch(10% 0.01 260);
}
}
```
### Next.js with next-themes
```tsx
// app/providers.tsx
"use client";
import { ThemeProvider } from "next-themes";
export function Providers({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
### Theme Toggle
```tsx
"use client";
import { Moon, Sun, Monitor } from "lucide-react";
import { useTheme } from "next-themes";
export function ThemeToggle() {
const { theme, setTheme } = useTheme();
return (
);
}
```
### Prevent FOUC
```tsx
```
---
## Validation Checklist
```
[ ] CSS variables for both modes
[ ] prefers-color-scheme respected
[ ] Manual toggle available
[ ] No FOUC (flash of unstyled content)
[ ] Glass variants for both modes
[ ] Stored preference in localStorage
```
---
## Best Practices
### DO
- Use CSS variables for theming
- Support system preference
- Provide manual toggle
- Prevent FOUC with script
### DON'T
- Hard-code dark: classes everywhere
- Ignore system preference
- Forget localStorage
- Allow flash on load