Why does this skill advise against using pure black (#000) for backgrounds?

Pure black creates extreme contrast that causes 'halation' or glowing text effects, which leads to significant eye strain, particularly for the 50% of the population with astigmatism.

How does the elevation system work without shadows?

In dark mode, shadows are often invisible. This skill uses a system of increasing lightness (OKLCH) for surfaces to signify depth, where elements closer to the user appear lighter than the background.

How does it handle accent colors in dark mode?

It recommends desaturating accent colors by 15-25% to prevent 'visual vibration'—a phenomenon where high-saturation colors appear to shake or bleed on dark backgrounds.

Does this skill help with theme-switching performance?

Yes, it provides implementation patterns to prevent the 'Flash of inAccurate coloR Theme' (FART) using blocking scripts or server-side hints for a seamless user experience.

Professional Dark Mode Design

Name: Professional Dark Mode Design
Author: mendelgold220

bymendelgold220

0•

デザインツール

Implements production-grade dark mode interfaces using advanced color science, surface elevation principles, and accessibility best practices.

The Dark Mode Design skill enables Claude to move beyond simple color inversion to create sophisticated, high-contrast, and eye-strain-free user interfaces. It provides deep expertise in OKLCH color palettes, surface elevation systems that replace traditional shadows, and desaturated accent colors to prevent visual vibration. By focusing on semantic design tokens and accessibility standards, this skill helps developers build dark themes that feel intentional and premium, avoiding common 'AI slop' pitfalls like pure black backgrounds or neon-soaked aesthetics. It includes guidance on system preference detection, theme-switching architecture, and component-specific adaptations for images and illustrations.

主な機能

010 GitHub stars

02Surface elevation mapping to replace traditional shadows with lightness levels

03Advanced OKLCH-based color palette generation for cohesive dark themes

04Accessibility-first contrast auditing and font-weight optimization

05Anti-pattern detection to prevent generic 'AI-generated' visual styles

06Semantic design token architecture for seamless theme switching

ユースケース

01Converting existing light-mode legacy applications into premium, high-performance dark themes

02Building robust, theme-aware design systems using CSS variables or Tailwind CSS

03Optimizing UI readability and reducing eye strain for low-light user environments

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mendelgold220/impeccable-dark dark-mode-design

For use in Claude.ai and ChatGPT

主な機能

010 GitHub stars

02Surface elevation mapping to replace traditional shadows with lightness levels

03Advanced OKLCH-based color palette generation for cohesive dark themes

04Accessibility-first contrast auditing and font-weight optimization

05Anti-pattern detection to prevent generic 'AI-generated' visual styles

06Semantic design token architecture for seamless theme switching

ユースケース

01Converting existing light-mode legacy applications into premium, high-performance dark themes

02Building robust, theme-aware design systems using CSS variables or Tailwind CSS

03Optimizing UI readability and reducing eye strain for low-light user environments