skills.rest
Asymmetric-al
Asymmetric-alOFFICIAL
Explore all skills by this author →
WebsiteGitHub

dark-mode-design-expert

Generate time-aware dark-mode design tokens with WCAG-compliant contrast.

1|1|Updated Mar 18, 2026
Search Tags:#theming#accessibility#design-system#dark-mode#color-tokens#time-of-day#atmospheric
One-click install
npx skills add https://github.com/Asymmetric-al/asym-web --skill dark-mode-design-expert-asymmetric-al
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dark-mode-design-expert
Source: https://github.com/Asymmetric-al/asym-web/tree/main/.agents/skills/dark-mode-design-expert
Command: npx skills add https://github.com/Asymmetric-al/asym-web --skill dark-mode-design-expert-asymmetric-al

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Dark-mode inconsistency and inaccessible color systems across platforms hinder usability; this Skill provides atmospheric, time-aware theming tokens and patterns to design cohesive, accessible dark UI.

Core Features & Use Cases

  • Atmospheric theming: weather/sky-inspired color systems that shift with dawn, day, golden hour, twilight, night.
  • WCAG-compliant contrast: systematic tokens to maintain readability in all modes.
  • Design-system integration: primitives → semantic → components; supports cross-skill collaboration with color-contrast auditing and token generation.

Quick Start

Set up a baseline atmospheric dark-mode system and implement a time-of-day theme switch.

Frequently Asked Questions about dark-mode-design-expert

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

FAQPage Schema
How do I create a dark-mode design system with accessible color tokens?▼

Build a dark-mode design system using token-based primitives, semantic layers, and component-level tokens that maintain WCAG-compliant contrast and readability across all UI elements.

What is atmospheric theming and how does it apply to dark-mode UI?▼

Atmospheric theming uses weather and sky-inspired color systems that shift dynamically through dawn, day, golden hour, twilight, and night to provide cohesive dark-mode visual states.

Do I need a token-based design system to implement time-of-day theme switching?▼

Yes, implementing time-of-day theme switching requires a token-based design system with primitives and semantic layers to manage atmospheric color transitions across platforms.

How do I maintain WCAG contrast compliance across different dark-mode themes?▼

Maintain WCAG contrast compliance in dark-mode themes by applying systematic design tokens that govern color relationships, ensuring text readability across all atmospheric and time-based variations.

What's the best way to structure design tokens for cross-platform dark themes?▼

Structure cross-platform dark theme tokens by defining baseline primitives, mapping them to semantic layers, and deriving component-level tokens to ensure cohesive atmospheric theming across web apps.

Related Skills

Explore More Design & Creative Skills→
nmoralescybernmoralescyber

ckmdesign-system

Implement three-layer CSS design token systems with primitives, semantics, and components.

Community
Advanced
Owl-ListenerOwl-Listener
2.0k

theming-system

Map design tokens to dynamic themes across brands and modes.

Community
Advanced
lord-vinayaklord-vinayak

contrast-checker

Calculate color contrast ratios and evaluate WCAG 2.2 compliance.

Community
Advanced
KraitsKraits

visual-design-foundations

Codify typography, spacing, color, and iconography into a cohesive design system.

Community
Advanced