skills.rest
andersoncollab
andersoncollabCOMMUNITY
Explore all skills by this author →
GitHub

dark-mode

Implement accessible dark mode with CSS tokens, Tailwind variants, and persistence.

Updated Aug 23, 2026
Search Tags:#dark mode#css custom properties#wcag contrast#tailwind dark#theme toggling#fowt
One-click install
npx skills add https://github.com/andersoncollab/design-agent --skill dark-mode-andersoncollab
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dark-mode
Source: https://github.com/andersoncollab/design-agent/tree/main/skills/dark-mode
Command: npx skills add https://github.com/andersoncollab/design-agent --skill dark-mode-andersoncollab

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It prevents broken, low-contrast, or unreadable interfaces when switching from light to dark themes, while avoiding harsh inversion approaches that make images and colors look wrong.

Core Features & Use Cases

  • Theme tokens with color mapping: Uses CSS custom properties for a mapped dark palette (not filter-based inversion) and enforces a surface hierarchy for consistent elevation.
  • Tailwind-ready dark variant: Configures Tailwind to use the class-based dark mode approach so components can rely on predictable dark: styling.
  • Preference + persistence: Detects system preference via prefers-color-scheme and supports a manual toggle persisted with localStorage.
  • FOWT (flash of wrong theme) mitigation: Adds an early, synchronous head script to prevent initial incorrect theme rendering.
  • Dark-mode visual fixes: Replaces shadows with borders/elevation cues and adapts images for comfortable reading and correct contrast.
  • Use cases: New dark-theme rollouts, legacy modernization, dark-mode contrast audits, and SaaS dashboards with per-user theme settings.

Quick Start

Ask the skill to implement dark mode for your web app by adding CSS theme tokens, enabling Tailwind dark: support, wiring system detection plus a localStorage-persisted toggle, preventing flash-of-wrong-theme, and updating shadows/images to follow the dark surface and contrast rules.

Frequently Asked Questions about dark-mode

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement accessible dark mode with CSS custom properties and Tailwind?▼

Implement accessible dark mode by mapping light colors to a dark surface hierarchy using CSS custom properties, configuring Tailwind for class-based dark variants, and enforcing higher-contrast text and UI borders to meet WCAG contrast standards.

How do I prevent flash of wrong theme (FOWT) when loading a dark mode toggle?▼

Prevent flash of wrong theme (FOWT) by adding an early, synchronous script in the document head that checks localStorage overrides and applies the correct data-theme attribute before the initial render.

Does this dark mode approach support system preference detection and manual theme persistence?▼

Yes, this dark mode approach supports system preference detection via the prefers-color-scheme media query and allows manual theme toggling with persistence stored in localStorage to override user settings.

What is the best way to handle shadows and images when switching to a dark theme?▼

The best way to handle dark theme visual fixes is replacing standard shadows with borders and elevation cues, and adapting images to follow the mapped dark surface hierarchy for comfortable reading and correct contrast.

Why does my dark mode look wrong when using CSS filter inversion instead of color mapping?▼

Filter-based inversion makes images and colors look wrong because it harshly inverts the entire interface, whereas mapping light colors to a structured dark surface hierarchy preserves visual integrity and enforces proper contrast.

Can I use class-based dark variants for a SaaS dashboard with per-user theme settings?▼

Yes, you can use Tailwind class-based dark variants activated via a data-theme attribute or .dark class to build SaaS dashboards with per-user theme settings that persist across sessions using localStorage.

Related Skills

Explore More Software Engineering Skills→
JaivishChauhanJaivishChauhan
6

dark-mode-theming

Configure next-themes with CSS custom properties and Tailwind for Next.js theming.

Community
Intermediate
hulusi-tunchulusi-tunc
3

dark-mode-design

Design accessible dark mode interfaces with surface hierarchy and contrast validation.

Community
Intermediate
as4584as4584
2

tailwind-design-system

Create scalable Tailwind CSS design systems with CVA variants and CSS variables.

Community
Advanced
adityaarsharmaadityaarsharma
2

orbit-designer-dark-mode

Automate dark mode audits for WordPress plugins with CSS and WCAG AA checks.

Community
Intermediate