skills.rest
RepairYourTech
RepairYourTechCOMMUNITY
Explore all skills by this author →
GitHub

dark-mode-theming

Implements dark mode theming with CSS custom properties and FOUC prevention.

6|1|Updated Feb 27, 2026
Search Tags:#theming#accessibility#web design#frontend development#dark mode#css variables
One-click install
npx skills add https://github.com/RepairYourTech/cfsa-antigravity --skill dark-mode-theming-repairyourtech
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dark-mode-theming
Source: https://github.com/RepairYourTech/cfsa-antigravity/tree/main/.agent/skill-library/surface/web/dark-mode-theming
Command: npx skills add https://github.com/RepairYourTech/cfsa-antigravity --skill dark-mode-theming-repairyourtech

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the challenge of implementing dark mode and flexible theming systems in web applications, ensuring a consistent and accessible user experience across different visual preferences.

Core Features & Use Cases

  • CSS Custom Properties: Utilizes CSS variables for defining theme tokens, allowing for easy customization and dynamic switching.
  • System Preference Detection: Detects user's OS-level preference for light or dark mode.
  • FOUC Prevention: Employs a blocking inline script to apply the theme before the page renders, preventing visual glitches.
  • Asset Adaptation: Provides strategies for adapting images, SVGs, and background images for different themes.
  • Third-Party Widget Theming: Offers solutions for theming external widgets.
  • Contrast Maintenance: Emphasizes WCAG AA contrast ratios for accessibility.
  • Theme Toggle: Includes examples for creating user-facing theme switching components.

Quick Start

Implement dark mode theming by defining CSS custom properties and using a blocking script in your HTML's head to set the initial theme attribute.

Frequently Asked Questions about dark-mode-theming

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

FAQPage Schema
How do I implement dark mode in a web application without a flash of unstyled content?▼

To implement dark mode without a flash of unstyled content (FOUC), use a blocking inline script in your HTML head to apply the theme attribute before the page renders, combined with CSS custom properties for theme tokens.

What is the best way to detect system preference for dark mode in CSS?▼

The best way to detect system preference for dark mode involves using JavaScript to check the user's OS-level preference, which then dynamically updates CSS custom properties to switch themes accordingly.

Can I use CSS variables for theme switching in frameworks like Astro or Tailwind CSS?▼

Yes, you can use CSS variables for theme switching in frameworks like Astro and Tailwind CSS. This Skill integrates with these libraries to provide comprehensive theming solutions using custom properties.

How do I adapt images and SVGs for different dark mode themes?▼

Adapting images and SVGs for dark mode requires specific asset adaptation strategies. This involves adjusting visual assets like background images and SVGs to ensure they maintain visual consistency and accessibility.

Does dark mode theming maintain accessible contrast ratios for WCAG compliance?▼

Yes, dark mode theming maintains accessible contrast ratios by emphasizing WCAG AA contrast standards. This ensures that theme switching does not compromise visual accessibility for users.

Related Skills

Explore More Design & Creative Skills→
schalkneethlingschalkneethling
7

css-tokens

Generate a tokens.css file with CSS custom properties for theming and dark mode.

Community
Basic
hkcm91hkcm91

theming-with-tokens

Manage StickerNest UI themes with CSS custom properties and token-based architecture.

Community
Intermediate
corey-alixcorey-alix

Atomic CSS

Create atomic CSS utility classes using token-based custom properties.

Official
Intermediate
openchamberopenchamber
7.8k

theme-system

Enforce theme token usage for UI styling in OpenChamber.

Official
Intermediate