dragoon0x/optik

dark-mode

Generate dark mode color variant that preserves contrast ratios and visual hierarchy from the light theme. Not just color inversion — proper dark surface design.

First seen May 9, 2026

Installation

$ npx skills add dragoon0x/optik --skill dark-mode

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

Also in this package

Other skills from dragoon0x/optik · top by installs.

npx skills add dragoon0x/optik

Browse all from dragoon0x/optik

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Stars 1
License LICENSE
Default branch main
Open issues 0
Status Active

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 817 B
  • docs SUMMARY.md 180 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 6 installs

SKILL.md

/dark-mode — Intelligent Dark Mode Generation

Rules

  • Dark mode is NOT color inversion
  • Surface colors use dark shades (800-950) from the brand palette
  • Text uses light shades (50-200)
  • Accent colors may need lightness adjustment to maintain contrast
  • Reduce elevation differences (shadows are less visible on dark backgrounds — use surface color shifts instead)
  • Reduce pure white usage (use off-whites)
  • Maintain the same contrast ratios as light mode

Implementation

Output as @media (prefers-color-scheme: dark) overriding the CSS custom properties from the light theme.