暗黑模式

Dark Mode

69/100Fair

Elegant dark interface design with low-contrast layering, subtle borders and highlights. Ideal for developer tools, professional applications, and night reading mode.

暗黑深色夜间开发专业护眼moderncontemporarysleek现代

View Full Showcase →Templates

Best For

暗黑 / 深色 / 夜间

Primary Move

Use dark backgrounds bg-slate-900, bg-gray-900, bg-[#0f172a]

Watch Out

Do not use pure white text text-white (too harsh)

Showcase Entry

Live preview of the showcase page. Click to explore the full experience.

View Full Showcase →

Color Palette

Primary

#3b82f6

Secondary

#0f172a

Accent 1

#22c55e

Accent 2

#f59e0b

Accent 3

#ef4444

Accent 4

#2ab5e5

AI Implementation

Copy the Hard Prompt first, then use the spec when needed

Use the Hard Prompt by default to generate UI. Use the Design Spec to understand, modify, and review the style. Use the Creative Brief for early exploration.

Hard Prompt

Use this by default: copy it, append the concrete requirement, and let AI generate consistent production UI.

When to use

When AI should generate UI directly
When repeated outputs must stay consistent
When style drift is the main risk

How to use

Copy the full prompt
Append the concrete requirement
Review against forbidden rules and UI states

STYLEKIT_STYLE_REFERENCE
style_name: Dark Mode
style_slug: dark-mode
style_source: /styles/dark-mode

# Hard Prompt

## When To Use
Use this when you want AI to generate code with strict style consistency. It is the safest default for production UI.

## How To Use
- Copy the full prompt into ChatGPT, Claude, Cursor, or another coding assistant.
- Append the concrete product/page requirement after the prompt.
- After generation, check the forbidden rules and interaction states before accepting the output.

Strictly follow the style rules below and maintain consistency. No style drift allowed.

## Requirements
- Prioritize style consistency first, then creative extension.
- When conflicts arise, treat prohibitions as the highest priority.
- Self-check before output: verify colors, typography, spacing, and interactions still match this style.

## Style Rules
STYLE: Dark Mode
TYPE: Professional dark interface design

MUST USE:
- Dark backgrounds: bg-slate-900, bg-gray-900, bg-[#0f172a]
- Card backgrounds: bg-slate-800/50 (semi-transparent) at rest, bg-slate-800 on hover
- Low contrast borders: border-slate-700 at rest, border-slate-500 on hover (border illumination)
- Text hierarchy: text-slate-100 (primary), text-slate-400 (secondary); secondary brightens to group-hover:text-slate-300
- Saturated accent colors: blue-500, green-500
- Inset top-edge glow on buttons: shadow-[inset_0_1px_0_rgba(255,255,255,0.15)]
- Hover states: hover:bg-slate-800, hover:bg-white/5
- Standard rounded corners: rounded-lg, rounded-xl

MUST AVOID:
- Pure white text (too harsh)
- High contrast borders
- Pure black background (#000000)
- Dark text on dark backgrounds
- Too many highlight colors
- Light-colored shadows (light shadows invisible on dark backgrounds)
- Buttons without active:scale-[0.98] (no tactile confirmation)
- focus:ring without focus:ring-offset-slate-900 (ring invisible on dark background)

COLOR HIERARCHY:
- Background: slate-900 (#0f172a)
- Surface: slate-800/50 to slate-800 on hover
- Border: slate-700 to slate-500 on hover
- Text primary: slate-100 to white on group-hover
- Text secondary: slate-400 to slate-300 on group-hover
- Accent: blue-500, green-500

TYPOGRAPHY:
- Headings: font-semibold text-slate-100
- Body: text-slate-300 or text-slate-400

## Animation & Interaction Rules

- Illumination Physics: On hover, borders brighten from slate-700 to slate-500 (hover:border-slate-500). This simulates a nearby light source illuminating the card's edge -- NOT a background change. Combined with hover:bg-slate-800 (surface rises slightly), the effect is of a surface catching light.
- Text Light-Up: Secondary text (text-slate-400) transitions to group-hover:text-slate-300. Title text (text-slate-200) to group-hover:text-white. Use transition-colors duration-200. The card must use the group class.
- Inset Glow Button: Primary buttons use shadow-[inset_0_1px_0_rgba(255,255,255,0.15)] at rest (top edge highlight simulating overhead light). On hover: shadow-[inset_0_1px_0_rgba(255,255,255,0.2),0_0_10px_rgba(59,130,246,0.3)] -- glow intensifies and bleeds outward. On active: shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)] -- inset depression shadow simulates the button being physically pressed down.
- Tactile Confirmation: ALL buttons must use active:scale-[0.98]. The 2% scale reduction is the minimum signal that a press occurred. Without it, a dark button feels completely unresponsive.
- Focus Ring Visibility: ALWAYS pair focus:ring-2 with focus:ring-offset-2 focus:ring-offset-slate-900. Without ring-offset-slate-900, the ring merges with the dark background and becomes invisible -- violating WCAG 2.1 AA.
- Card Elevation: hover:-translate-y-0.5 + hover:shadow-[0_8px_30px_rgba(0,0,0,0.5)] -- the deep dark shadow reinforces the dark environment. Never use light-colored shadows on dark backgrounds.
- Easing: duration-200 ease-out for buttons and interactive controls. duration-300 ease-out for card-level transitions. Never exceed duration-300.

## Self-Check

After generating code, verify:
1. All buttons have active:scale-[0.98]
2. All focusable elements have focus:ring-2 focus:ring-{color}-500 focus:ring-offset-2 focus:ring-offset-slate-900
3. Cards use group class; text uses group-hover:text-* for light-up
4. Card hover: border brightens (hover:border-slate-500) + bg lightens (hover:bg-slate-800) + hover:-translate-y-0.5
5. Button shadows use inset for glow, deep dark for elevation
6. No light-colored shadows anywhere

Component Templates

Component Preview

按钮

暗黑模式三态按钮：顶边内发光模拟光源，hover 时蓝光晕外溢，active:scale-[0.98] 触觉按压，focus:ring-offset-slate-900 确保暗底焦点环可见

Frontend Readiness

Dark Mode, States, Motion, and Accessibility

This layer tracks whether the style is ready for real websites: theme modes, state feedback, keyboard access, and performance constraints.

Overall

58%

Fallback

Dark Mode

35%

Fallback

UI States

79%

Partial

Motion

70%

Partial

A11y

70%

Partial

Performance

35%

Fallback

Key State Coverage

light / dark

HoverFocus VisibleDisabledLoadingEmptyErrorSuccess

Button

Default / Hover / Focus Visible / Active / Disabled

Input

Default / Hover / Focus Visible / Disabled / Error

Card

Default / Hover / Focus Visible / Loading / Skeleton

Form

Default / Focus Visible / Disabled / Loading / Error

Implementation Notes

This style contains dark-mode signals, but no curated dark token contract has been reviewed.
Check contrast in both light and dark modes.
Check heavy shadows, blur, large media, and scroll-linked effects manually.
No style-specific performance cost profile has been curated yet.

Global Styles

Global CSS

css

/* Dark Mode Global Styles */
@layer base {
  body {
    @apply bg-slate-900 text-slate-100 antialiased;
  }

  h1, h2, h3, h4 {
    @apply font-semibold text-slate-100;
  }

  ::selection {
    @apply bg-blue-600 text-white;
  }
}

/* Subtle glow for focus states */
.dark-focus-glow:focus {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}
/* Dark Mode Design Tokens */
:root {
  --dark-mode-primary: #3b82f6;
  --dark-mode-secondary: #0f172a;
  --dark-mode-accent: #22c55e;
  --dark-mode-glow: rgba(59, 130, 246, 0.3);
}

@keyframes dark-mode-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes dark-mode-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.dark-mode-card {
  position: relative;
  overflow: hidden;
}

.dark-mode-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), transparent);
  pointer-events: none;
}

.dark-mode-card:hover::before {
  opacity: 1;
}

.dark-mode-gradient {
  background: linear-gradient(135deg, #3b82f6, #22c55e);
}

.dark-mode-gradient-text {
  background: linear-gradient(135deg, #3b82f6, #22c55e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dark-mode-frosted {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(59, 130, 246, 0.08);
}

.dark-mode-accent-corner {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2rem), calc(100% - 2rem) 100%, 0 100%);
}

.dark-mode-animate-in {
  animation: dark-mode-fade-in 0.5s ease-out both;
}

Compatible Layout Patterns

Recommended Layouts

The following layout patterns pair well with the 暗黑模式 style.

固定侧边栏布局

Fixed Sidebar

杂志网格布局

Magazine Grid

全屏英雄区布局

Fullscreen Hero

圣杯布局

Holy Grail Layout

仪表盘布局

Dashboard Layout

IDE Integration

IDE Configuration Export

Download configuration files for AI coding assistants to generate code in this style.

Style Pack

Export Style Pack

Get complete machine-readable style assets including design tokens, Tailwind presets, CSS variables, and shadcn/ui themes.

Metadata

Style metadata including version information

Design Tokens

Compatible with Figma / Style Dictionary / Tokens Studio

Tailwind Preset

Tailwind CSS theme preset, import directly in config

Global CSS

CSS variables and base styles

shadcn Theme

shadcn/ui theme configuration

CSS Variables

Pure CSS variables, works with any project

SKILL.md

Loadable skill pack for Cursor / Claude Code / VS Code

Design Philosophy

Dark Mode design emphasizes creating a comfortable reading experience and clear information hierarchy on dark backgrounds.

Accessibility

Accessibility Score

WCAG 2.1 compliance analysis based on color contrast and typography readability.

Overall Score

Grade: C - Fair

Contrast Ratios

Score: 63/100Average Ratio: 7.26:1

AA FailAAA Fail

Context	Colors	Ratio
Text on background	/#f1f5f9 / #0f172a	16.3:1
Text on secondary background	/#f1f5f9 / #1e293b	13.35:1
Button primary	/#ffffff / #2563eb	5.17:1
Text on accent 1	/#f1f5f9 / #2563eb	4.72:1
Text on accent 2	/#f1f5f9 / #22c55e	2.08:1
Text on accent 3	/#f1f5f9 / #f59e0b	1.96:1

Readability

Score

82/100

Font Size

text-sm md:text-base

Font Weight

font-semibold

Line Height

default

Scoring is based on WCAG 2.1 standards. AA requires 4.5:1 contrast for normal text, 3:1 for large text; AAA requires 7:1 for normal text, 4.5:1 for large text.

暗黑模式

Dark Mode

69/100Fair

Elegant dark interface design with low-contrast layering, subtle borders and highlights. Ideal for developer tools, professional applications, and night reading mode.

暗黑深色夜间开发专业护眼moderncontemporarysleek现代

Best For

暗黑 / 深色 / 夜间

Primary Move

Use dark backgrounds bg-slate-900, bg-gray-900, bg-[#0f172a]

Watch Out

Do not use pure white text text-white (too harsh)

Copy the Hard Prompt first, then use the spec when needed

Use the Hard Prompt by default to generate UI. Use the Design Spec to understand, modify, and review the style. Use the Creative Brief for early exploration.

Hard Prompt

Use this by default: copy it, append the concrete requirement, and let AI generate consistent production UI.

When to use

When AI should generate UI directly
When repeated outputs must stay consistent
When style drift is the main risk

How to use

Copy the full prompt
Append the concrete requirement
Review against forbidden rules and UI states

STYLEKIT_STYLE_REFERENCE
style_name: Dark Mode
style_slug: dark-mode
style_source: /styles/dark-mode

# Hard Prompt

## When To Use
Use this when you want AI to generate code with strict style consistency. It is the safest default for production UI.

## How To Use
- Copy the full prompt into ChatGPT, Claude, Cursor, or another coding assistant.
- Append the concrete product/page requirement after the prompt.
- After generation, check the forbidden rules and interaction states before accepting the output.

Strictly follow the style rules below and maintain consistency. No style drift allowed.

## Requirements
- Prioritize style consistency first, then creative extension.
- When conflicts arise, treat prohibitions as the highest priority.
- Self-check before output: verify colors, typography, spacing, and interactions still match this style.

## Style Rules
STYLE: Dark Mode
TYPE: Professional dark interface design

MUST USE:
- Dark backgrounds: bg-slate-900, bg-gray-900, bg-[#0f172a]
- Card backgrounds: bg-slate-800/50 (semi-transparent) at rest, bg-slate-800 on hover
- Low contrast borders: border-slate-700 at rest, border-slate-500 on hover (border illumination)
- Text hierarchy: text-slate-100 (primary), text-slate-400 (secondary); secondary brightens to group-hover:text-slate-300
- Saturated accent colors: blue-500, green-500
- Inset top-edge glow on buttons: shadow-[inset_0_1px_0_rgba(255,255,255,0.15)]
- Hover states: hover:bg-slate-800, hover:bg-white/5
- Standard rounded corners: rounded-lg, rounded-xl

MUST AVOID:
- Pure white text (too harsh)
- High contrast borders
- Pure black background (#000000)
- Dark text on dark backgrounds
- Too many highlight colors
- Light-colored shadows (light shadows invisible on dark backgrounds)
- Buttons without active:scale-[0.98] (no tactile confirmation)
- focus:ring without focus:ring-offset-slate-900 (ring invisible on dark background)

COLOR HIERARCHY:
- Background: slate-900 (#0f172a)
- Surface: slate-800/50 to slate-800 on hover
- Border: slate-700 to slate-500 on hover
- Text primary: slate-100 to white on group-hover
- Text secondary: slate-400 to slate-300 on group-hover
- Accent: blue-500, green-500

TYPOGRAPHY:
- Headings: font-semibold text-slate-100
- Body: text-slate-300 or text-slate-400

## Animation & Interaction Rules

- Illumination Physics: On hover, borders brighten from slate-700 to slate-500 (hover:border-slate-500). This simulates a nearby light source illuminating the card's edge -- NOT a background change. Combined with hover:bg-slate-800 (surface rises slightly), the effect is of a surface catching light.
- Text Light-Up: Secondary text (text-slate-400) transitions to group-hover:text-slate-300. Title text (text-slate-200) to group-hover:text-white. Use transition-colors duration-200. The card must use the group class.
- Inset Glow Button: Primary buttons use shadow-[inset_0_1px_0_rgba(255,255,255,0.15)] at rest (top edge highlight simulating overhead light). On hover: shadow-[inset_0_1px_0_rgba(255,255,255,0.2),0_0_10px_rgba(59,130,246,0.3)] -- glow intensifies and bleeds outward. On active: shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)] -- inset depression shadow simulates the button being physically pressed down.
- Tactile Confirmation: ALL buttons must use active:scale-[0.98]. The 2% scale reduction is the minimum signal that a press occurred. Without it, a dark button feels completely unresponsive.
- Focus Ring Visibility: ALWAYS pair focus:ring-2 with focus:ring-offset-2 focus:ring-offset-slate-900. Without ring-offset-slate-900, the ring merges with the dark background and becomes invisible -- violating WCAG 2.1 AA.
- Card Elevation: hover:-translate-y-0.5 + hover:shadow-[0_8px_30px_rgba(0,0,0,0.5)] -- the deep dark shadow reinforces the dark environment. Never use light-colored shadows on dark backgrounds.
- Easing: duration-200 ease-out for buttons and interactive controls. duration-300 ease-out for card-level transitions. Never exceed duration-300.

## Self-Check

After generating code, verify:
1. All buttons have active:scale-[0.98]
2. All focusable elements have focus:ring-2 focus:ring-{color}-500 focus:ring-offset-2 focus:ring-offset-slate-900
3. Cards use group class; text uses group-hover:text-* for light-up
4. Card hover: border brightens (hover:border-slate-500) + bg lightens (hover:bg-slate-800) + hover:-translate-y-0.5
5. Button shadows use inset for glow, deep dark for elevation
6. No light-colored shadows anywhere

Global CSS

css

/* Dark Mode Global Styles */
@layer base {
  body {
    @apply bg-slate-900 text-slate-100 antialiased;
  }

  h1, h2, h3, h4 {
    @apply font-semibold text-slate-100;
  }

  ::selection {
    @apply bg-blue-600 text-white;
  }
}

/* Subtle glow for focus states */
.dark-focus-glow:focus {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}
/* Dark Mode Design Tokens */
:root {
  --dark-mode-primary: #3b82f6;
  --dark-mode-secondary: #0f172a;
  --dark-mode-accent: #22c55e;
  --dark-mode-glow: rgba(59, 130, 246, 0.3);
}

@keyframes dark-mode-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes dark-mode-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.dark-mode-card {
  position: relative;
  overflow: hidden;
}

.dark-mode-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), transparent);
  pointer-events: none;
}

.dark-mode-card:hover::before {
  opacity: 1;
}

.dark-mode-gradient {
  background: linear-gradient(135deg, #3b82f6, #22c55e);
}

.dark-mode-gradient-text {
  background: linear-gradient(135deg, #3b82f6, #22c55e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dark-mode-frosted {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(59, 130, 246, 0.08);
}

.dark-mode-accent-corner {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2rem), calc(100% - 2rem) 100%, 0 100%);
}

.dark-mode-animate-in {
  animation: dark-mode-fade-in 0.5s ease-out both;
}

Export Style Pack

Get complete machine-readable style assets including design tokens, Tailwind presets, CSS variables, and shadcn/ui themes.

Metadata

Style metadata including version information

Design Tokens

Compatible with Figma / Style Dictionary / Tokens Studio

Tailwind Preset

Tailwind CSS theme preset, import directly in config

Global CSS

CSS variables and base styles

shadcn Theme

shadcn/ui theme configuration

CSS Variables

Pure CSS variables, works with any project

SKILL.md

Loadable skill pack for Cursor / Claude Code / VS Code

Accessibility Score

WCAG 2.1 compliance analysis based on color contrast and typography readability.

Overall Score

Grade: C - Fair

Contrast Ratios

Score: 63/100Average Ratio: 7.26:1

AA FailAAA Fail

Context	Colors	Ratio
Text on background	/#f1f5f9 / #0f172a	16.3:1
Text on secondary background	/#f1f5f9 / #1e293b	13.35:1
Button primary	/#ffffff / #2563eb	5.17:1
Text on accent 1	/#f1f5f9 / #2563eb	4.72:1
Text on accent 2	/#f1f5f9 / #22c55e	2.08:1
Text on accent 3	/#f1f5f9 / #f59e0b	1.96:1

Readability

Score

82/100

Font Size

text-sm md:text-base

Font Weight

font-semibold

Line Height

default

Scoring is based on WCAG 2.1 standards. AA requires 4.5:1 contrast for normal text, 3:1 for large text; AAA requires 7:1 for normal text, 4.5:1 for large text.