Feature
Description that stays readable in light & dark.
);
}
```
## Enforcing the Single-Theme Lock
To comply with taste-skill’s Page Theme Lock, the theme must be set exactly once at the layout level and never modified by child components. The root `html` element receives the theme class or data attribute, and all descendants inherit this value.
```tsx
// layout.tsx - Theme lock implementation
export default function Layout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
Child components are strictly forbidden from re-assigning `class="dark"` or `data-theme="dark"`. If a brand requires a manual toggle, the switch must affect the entire page by updating the root element, not individual sections:
```typescript
const toggleTheme = () => {
const newTheme = theme === 'dark' ? 'light' : 'dark';
document.documentElement.className = newTheme;
};
```
## Summary
- taste-skill enforces dark mode through a **three-layer architecture** defined in [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md): Page Theme Lock, Mandatory Dark-Mode Support, and Dual-Mode Protocol.
- The **Page Theme Lock** (lines 341–349) prevents mid-page theme switches by locking the entire document to a single theme determined at load time based on `prefers-color-scheme`.
- Developers must choose between **Tailwind `dark:` utilities** (default) or **CSS-variable theming**, but cannot mix strategies within a single project.
- The specification forbids pure black and white values while requiring contrast parity and brand-color fidelity across both themes.
- Theme overrides and manual toggles must operate at the **root level only**, ensuring no child components violate the single-theme constraint.
## Frequently Asked Questions
### How does taste-skill prevent mid-page theme switching?
The **Page Theme Lock** rule in [`SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/SKILL.md) (lines 341–349) explicitly forbids mid-page theme flips by requiring the theme to be set once at the root `html` element. Child components cannot reassign theme classes or attributes, ensuring visual consistency throughout the user session and preventing layout shifts during navigation.
### What are the two approved theming strategies in taste-skill?
taste-skill supports **Tailwind’s `dark:` variant** as the default approach, where utilities are paired with dark counterparts using the `class` strategy, and a **CSS-variables approach** using semantic tokens that swap values under `[data-theme="dark"]`. Both methods must respect the single-theme lock and detect the system preference via `prefers-color-scheme` unless explicitly overridden by brand requirements.
### Why does taste-skill prohibit pure black and white color values?
The **Dual-Mode Protocol** (lines 574–585) forbids pure black (`#000000`) and pure white (`#FFFFFF`) to maintain brand-color fidelity and reduce eye strain in dark environments. The specification requires using off-black and off-white shades (such as `zinc-950` or `#111827`) that preserve visual hierarchy while meeting WCAG contrast accessibility standards across both themes.
### Can brands override the automatic system preference detection?
Yes, brands may explicitly override the `prefers-color-scheme` detection to force a fixed light or dark mode, but they must still adhere to the **Mandatory Dark-Mode Support** rule (lines 31–36). This means the interface must be architected for both themes even if only one is displayed, and the chosen theme must remain locked at the page level without per-section variations.