Skills
.Work. You
Rest

light-dark-mode

Community

Accessible light/dark theming for UI.

Design & Creative#theming#accessibility#wcag#contrast#dark-mode#css-variables#light-mode
Authormgifford
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Projects often ship interfaces that fail to adapt to light and dark themes, reducing readability and accessibility. This Skill provides a principled approach to implementing theme-aware UI using CSS variables, prefers-color-scheme, and forced-colors considerations to keep content legible for all users.

Core Features & Use Cases

  • Adhere to WCAG 2.2 contrast requirements in both light and dark modes.
  • Use CSS custom properties to define theme tokens and safely switch themes without hardcoding colors.
  • Provide a keyboard-accessible theme toggle that respects user preferences and persists when possible.
  • Use cases include web apps that support theming, design systems, and components that switch color schemes.

Quick Start

Enable the light/dark theme support in your project, then verify WCAG-compliant contrast in both modes using CSS variables and a theme toggle.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: light-dark-mode
Download link: https://github.com/mgifford/accessibility-skills/archive/main.zip#light-dark-mode

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.