skills.rest
efekrbas
efekrbasCOMMUNITY
Explore all skills by this author →
Website𝕏@efekrbsGitHub

dark-mode

Design dark-mode interfaces with semantic color tokens and accessible contrast.

41|5|Updated Sep 30, 2025
Search Tags:#accessibility#cross-platform#ui design#dark mode#color system#theme implementation
One-click install
npx skills add https://github.com/efekrbas/discord-hypesquad-manager --skill dark-mode-efekrbas
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dark-mode
Source: https://github.com/efekrbas/discord-hypesquad-manager/tree/main/.agents/skills/design-it/dark-mode
Command: npx skills add https://github.com/efekrbas/discord-hypesquad-manager --skill dark-mode-efekrbas

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you design dark-mode interfaces that feel premium, reduce eye strain, and preserve readability across apps and websites.

Core Features & Use Cases

  • Dark Surface Hierarchy: Uses layered greys and subtle borders instead of pure black to create depth and elevation.
  • Accessible Color Choices: Recommends contrast-safe text, muted accents, and semantic colors that stay legible in dark environments.
  • Cross-Platform Guidance: Provides implementation patterns for web, SwiftUI, Flutter, React Native, and Jetpack Compose.
  • Use Case: A product team can use this Skill to turn a bright UI into a polished dark theme with consistent cards, buttons, typography, and spacing.

Quick Start

Ask for a dark-mode design plan for your interface, including background colors, elevated surfaces, text contrast, and accent treatment.

Frequently Asked Questions about dark-mode

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

FAQPage Schema
How do I design a dark mode interface that reduces eye strain without using pure black?▼

Implement dark mode across SwiftUI, Flutter, React Native, and Jetpack Compose using semantic color tokens. This approach ensures accessible text contrast and consistent component styling across different mobile and web platforms.

Why should I use desaturated accents and semantic color tokens in a dark theme?▼

Desaturated accents and semantic color tokens are essential in a dark theme to maintain accessible text contrast. They prevent color vibration against dark surfaces, ensuring UI elements remain legible and visually comfortable.

How do I create elevation cues and surface hierarchy in a dark UI design?▼

Create elevation cues in a dark UI design by applying layered greys and subtle borders rather than shadows. This technique builds clear surface hierarchy and depth without relying on pure black backgrounds.

Can I get dark mode implementation patterns for both web and mobile frameworks?▼

Yes, you can get cross-platform dark mode implementation patterns for web, SwiftUI, Flutter, React Native, and Jetpack Compose. These patterns guide consistent styling for cards, buttons, and typography across platforms.

Related Skills

Explore More Design & Creative Skills→
Yoriichi-DangYoriichi-Dang

tailwind-v4-shadcn

Migrate React projects to Tailwind v4 with shadcn/ui using CSS-first theming.

Community
Advanced
piyushverma0piyushverma0
14

design-tokens

Generate Material You design tokens for Android theming.

Community
Advanced
launchapp-devlaunchapp-dev
38

theming-system

Design scalable theming architecture with layered tokens for runtime theme switching.

Official
Advanced
nkabbarankabbara

dark-mode-image

Convert raster images to dark-mode variants while preserving original dimensions.

Community
Intermediate