视觉风格modern

暗黑模式

Dark Mode

优雅的深色界面设计，低对比度层次、微妙的边框和高亮。适合开发工具、专业应用、深夜阅读模式。

打开交互展示查看实现规则

主色#3b82f6

次色#0f172a

强调色 1#22c55e

强调色 2#f59e0b

强调色 3#ef4444

强调色 4#2ab5e5

AI 实现规则

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 → slate-800 on hover
- Border: slate-700 → slate-500 on hover
- Text primary: slate-100 → white on group-hover
- Text secondary: slate-400 → 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

组件预览与实现

组件变体

font-medium rounded-lg transition-all duration-200 bg-[#1f2937] text-white border border-gray-600 hover:bg-gray-700 hover:border-gray-500 active:bg-gray-800

button

按钮

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

{/* Primary Button — inset glow physics */}
<button className="
  px-4 py-2
  bg-blue-600 text-white
  rounded-lg font-medium
  shadow-[inset_0_1px_0_rgba(255,255,255,0.15)]
  hover:bg-blue-500
  hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.2),0_0_10px_rgba(59,130,246,0.3)]
  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-slate-900
  active:scale-[0.98] active:shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]
  transition-all duration-200 ease-out
">
  Save Changes
</button>

{/* Secondary Button */}
<button className="
  px-4 py-2
  bg-slate-700 text-slate-200
  rounded-lg font-medium
  shadow-[inset_0_1px_0_rgba(255,255,255,0.08)]
  hover:bg-slate-600 hover:text-slate-100
  hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.12)]
  focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 focus:ring-offset-slate-900
  active:scale-[0.98] active:shadow-[inset_0_2px_4px_rgba(0,0,0,0.4)]
  transition-all duration-200 ease-out
">
  Cancel
</button>

{/* Ghost Button */}
<button className="
  px-4 py-2
  text-slate-300
  rounded-lg font-medium
  hover:bg-white/5 hover:text-slate-100
  focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 focus:ring-offset-slate-900
  active:scale-[0.98] active:bg-white/10
  transition-all duration-200 ease-out
">
  Learn More
</button>

{/* Danger Button */}
<button className="
  px-4 py-2
  bg-red-600/20 text-red-400
  border border-red-500/30
  rounded-lg font-medium
  hover:bg-red-600/30 hover:border-red-500/50 hover:text-red-300
  focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-slate-900
  active:scale-[0.98]
  transition-all duration-200 ease-out
">
  Delete
</button>

card

卡片

暗黑模式卡片：group-hover 时边框照亮、次要文字提亮，模拟光源靠近效果；hover:-translate-y-0.5 + 深色外阴影上浮

<div className="
  group
  bg-slate-800/50 border border-slate-700
  rounded-xl p-6
  hover:bg-slate-800 hover:border-slate-500 hover:-translate-y-0.5
  hover:shadow-[0_8px_30px_rgba(0,0,0,0.5)]
  transition-all duration-300 ease-out
  cursor-pointer
">
  <div className="flex items-center gap-3 mb-4">
    <div className="w-10 h-10 bg-blue-600/20 rounded-lg flex items-center justify-center
      group-hover:bg-blue-600/30 transition-colors duration-200">
      <svg className="w-5 h-5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M13 10V3L4 14h7v7l9-11h-7z" />
      </svg>
    </div>
    <h3 className="text-lg font-semibold text-slate-200 group-hover:text-white transition-colors duration-200">
      Feature Title
    </h3>
  </div>
  <p className="text-slate-400 leading-relaxed group-hover:text-slate-300 transition-colors duration-200">
    Description with comfortable contrast for night reading.
  </p>
</div>

input

输入框

暗黑模式输入框：聚焦时蓝色边框 + ring-offset-slate-900 确保焦点环可见

<div className="space-y-1.5">
  <label className="block text-sm font-medium text-slate-300">Email</label>
  <input
    type="email"
    className="
      w-full px-3 py-2
      bg-slate-800 border border-slate-700
      rounded-lg text-slate-100
      placeholder:text-slate-500
      focus:outline-none focus:border-blue-500
      focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-slate-900
      transition-all duration-200
    "
    placeholder="you@example.com"
  />
</div>

nav

导航栏

暗黑模式顶部导航，链接 hover 时提亮，CTA 按钮带内发光和触觉反馈

<nav className="bg-slate-900 border border-slate-800 px-6 py-3">
  <div className="max-w-6xl mx-auto flex items-center justify-between">
    <span className="text-lg font-semibold text-slate-100">DevTools</span>
    <div className="flex items-center gap-6">
      <a href="#" className="text-sm font-medium text-slate-400 hover:text-slate-100 transition-colors duration-200">Docs</a>
      <a href="#" className="text-sm font-medium text-slate-400 hover:text-slate-100 transition-colors duration-200">API</a>
      <a href="#" className="text-sm font-medium text-slate-400 hover:text-slate-100 transition-colors duration-200">Changelog</a>
    </div>
    <button className="
      px-4 py-2
      bg-blue-600 text-white text-sm
      rounded-lg font-medium
      shadow-[inset_0_1px_0_rgba(255,255,255,0.15)]
      hover:bg-blue-500 hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.2),0_0_10px_rgba(59,130,246,0.3)]
      focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-slate-900
      active:scale-[0.98]
      transition-all duration-200 ease-out
    ">
      Sign in
    </button>
  </div>
</nav>

hero

Hero 区块

暗黑模式 Hero：深色渐变背景，蓝色高亮强调字，双按钮 CTA 带完整三态交互

<section className="bg-gradient-to-b from-slate-900 to-[#0f172a] py-24 px-4">
  <div className="max-w-4xl mx-auto text-center">
    <div className="inline-flex items-center gap-2 px-3 py-1 bg-blue-600/10 text-blue-400 rounded-full text-sm font-medium mb-6 border border-blue-500/20">
      <span className="w-1.5 h-1.5 rounded-full bg-blue-400" />
      Now in beta
    </div>
    <h1 className="text-4xl md:text-6xl font-bold text-slate-100 tracking-tight mb-6 leading-tight">
      Built for developers<br />
      <span className="text-blue-400">who ship at night.</span>
    </h1>
    <p className="text-lg text-slate-400 max-w-2xl mx-auto mb-10 leading-relaxed">
      A professional toolkit optimized for low-light environments and extended coding sessions.
    </p>
    <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
      <button className="
        px-6 py-3
        bg-blue-600 text-white
        rounded-lg font-medium
        shadow-[inset_0_1px_0_rgba(255,255,255,0.15)]
        hover:bg-blue-500 hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.2),0_0_15px_rgba(59,130,246,0.4)]
        focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-slate-900
        active:scale-[0.98] active:shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]
        transition-all duration-200 ease-out
      ">
        Get started free
      </button>
      <button className="
        px-6 py-3
        bg-slate-800 text-slate-200
        border border-slate-700
        rounded-lg font-medium
        hover:bg-slate-700 hover:border-slate-600 hover:text-slate-100
        focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 focus:ring-offset-slate-900
        active:scale-[0.98]
        transition-all duration-200 ease-out
      ">
        View demo
      </button>
    </div>
  </div>
</section>

交互展示

独立打开展示

适用范围与设计理念

应用场景

视觉关键词

Dark Mode 设计强调在深色背景上创造舒适的阅读体验和清晰的信息层次。

核心理念：

- 护眼舒适：降低屏幕亮度，减少视觉疲劳

- 层次分明：通过灰度和透明度区分层级

- 高亮聚焦：使用高亮色引导用户注意力

- 专业氛围：传达技术感和专业感

设计原则：

- 视觉一致性：所有组件必须遵循统一的视觉语言，从色彩到字体到间距保持谐调

- 层次分明：通过颜色深浅、字号大小、留白空间建立清晰的信息层级

- 交互反馈：每个可交互元素都必须有明确的 hover、active、focus 状态反馈

- 响应式适配：设计必须在移动端、平板、桌面端上保持一致的体验

- 无障碍性：确保色彩对比度符合 WCAG 2.1 AA 标准，所有交互元素可键盘访问

应该这样做

使用深色背景 bg-slate-900, bg-gray-900, bg-[#0f172a]
卡片使用略浅的背景 bg-slate-800/50，hover 时提亮 hover:bg-slate-800
边框使用低对比度 border-slate-700，hover 时照亮 hover:border-slate-500
文字使用 text-slate-100 主要, text-slate-400 次要，group-hover 时次要文字提亮 group-hover:text-slate-300
高亮色保持高饱和度 blue-500, green-500
按钮使用内发光 shadow-[inset_0_1px_0_rgba(255,255,255,0.15)] 模拟暗色光源
按钮必须有 active:scale-[0.98] 触觉按压确认
所有可交互元素必须有 focus:ring-2 focus:ring-offset-2 focus:ring-offset-slate-900
卡片 hover 时 hover:-translate-y-0.5 + 深色外阴影上浮
使用 rounded-lg 或 rounded-xl 圆角

避免这样做

禁止使用纯白文字 text-white（过于刺眼）
禁止使用高对比度边框
禁止使用纯黑背景 #000000（过于沉闷）
禁止在深色背景上使用深色文字
禁止高亮色使用过多
禁止阴影使用浅色（深色背景上用浅色阴影无法体现层次）
禁止按钮缺少 active:scale-[0.98]（按钮需要触觉确认，否则如同装饰）
禁止 focus:ring 缺少 focus:ring-offset-slate-900（暗色背景上焦点环必须与元素分离才可见）

全局 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;
}

布局、色板与 Tokens

主色#3b82f6

次色#0f172a

强调色 1#22c55e

强调色 2#f59e0b

强调色 3#ef4444

强调色 4#2ab5e5

{
  "border": {
    "width": "border",
    "color": "border-slate-700",
    "radius": "rounded-lg",
    "style": "border-solid"
  },
  "shadow": {
    "sm": "shadow-none",
    "md": "shadow-none",
    "lg": "shadow-lg shadow-black/20",
    "none": "shadow-none",
    "hover": "shadow-none",
    "focus": "ring-1 ring-blue-500",
    "colored": {}
  },
  "interaction": {
    "transition": "transition-colors duration-200",
    "active": "active:scale-95",
    "hoverOpacity": "hover:bg-slate-700"
  },
  "typography": {
    "heading": "font-semibold",
    "body": "font-normal",
    "mono": "font-mono",
    "sizes": {
      "hero": "text-4xl md:text-5xl lg:text-6xl",
      "h1": "text-3xl md:text-4xl",
      "h2": "text-2xl md:text-3xl",
      "h3": "text-xl md:text-2xl",
      "body": "text-sm md:text-base",
      "small": "text-xs"
    }
  },
  "spacing": {
    "section": "py-12 md:py-16 lg:py-20",
    "container": "px-4 md:px-6 lg:px-8",
    "card": "p-6",
    "gap": {
      "sm": "gap-4",
      "md": "gap-6",
      "lg": "gap-8"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-slate-900",
      "secondary": "bg-slate-800",
      "accent": [
        "bg-blue-600",
        "bg-green-500",
        "bg-amber-500"
      ]
    },
    "text": {
      "primary": "text-slate-100",
      "secondary": "text-slate-300",
      "muted": "text-slate-400"
    },
    "button": {
      "primary": "bg-blue-600 text-white hover:bg-blue-500",
      "secondary": "bg-slate-700 text-slate-200 hover:bg-slate-600",
      "danger": "bg-red-600/20 text-red-400 border border-red-500/30"
    }
  },
  "forbidden": {
    "classes": [
      "text-white",
      "bg-white",
      "bg-gray-50",
      "border-black",
      "shadow-white",
      "bg-black"
    ],
    "patterns": [
      "^text-white$",
      "^bg-white",
      "^bg-gray-[1-3]00",
      "^bg-black$"
    ],
    "reasons": {
      "text-white": "Use text-slate-100 for softer contrast",
      "bg-white": "Dark mode uses dark backgrounds",
      "bg-black": "Use bg-slate-900 for better depth"
    }
  },
  "required": {
    "button": [
      "px-4 py-2",
      "rounded-lg",
      "font-medium",
      "transition-colors duration-200"
    ],
    "card": [
      "bg-slate-800",
      "border border-slate-700",
      "rounded-xl"
    ],
    "input": [
      "bg-slate-800",
      "border border-slate-700",
      "rounded-lg",
      "text-slate-100",
      "placeholder:text-slate-500",
      "focus:border-blue-500",
      "focus:ring-1 focus:ring-blue-500"
    ]
  }
}

示例提示词

开发者仪表板

生成暗色开发者仪表板

Create a developer dashboard using Dark Mode style:
- Sidebar navigation with slate-800 background
- Main content on slate-900
- Metric cards with subtle borders
- Code blocks with syntax highlighting
- Status indicators with colored dots
- Blue accent for primary actions
- Comfortable contrast for long sessions

SaaS 着陆页

生成暗黑模式风格的 SaaS 产品着陆页

Create a SaaS landing page using Dark Mode style with hero section, feature grid, testimonials, pricing table, and footer.

作品集展示

生成暗黑模式风格的作品集页面

Create a portfolio showcase page using Dark Mode style with project grid, about section, contact form, and consistent visual language.