暗黑模式设计提示词

Design a dark mode analytics dashboard. Background colors: #0a0a0a for base, #141414 for cards, #1e1e1e for elevated elements. Text: #f5f5f5 for primary, #a3a3a3 for secondary. Use a single accent color (blue #3b82f6) for interactive elements and data highlights. Cards should have subtle 1px borders in #262626. Charts should use the accent color with varying opacity for data series. Ensure all text meets WCAG AA contrast standards.

Build a dark-themed web application using shadcn/ui with the dark color scheme. Include a sidebar navigation with icons, a main content area with card-based layout, and a top bar. Use zinc-950 for the base background, zinc-900 for cards, and zinc-800 for hover states. Primary accent in blue-500. Include a settings page with a theme toggle switch. All text should use zinc-100 for headings and zinc-400 for body text.

Create a Next.js app with dark mode as default. Use CSS custom properties for theming: --background: 0 0% 4%; --card: 0 0% 8%; --border: 0 0% 15%; --foreground: 0 0% 96%; --muted: 0 0% 64%; --accent: 217 91% 60%. Implement proper surface elevation: each layer gets progressively lighter. Use Tailwind dark: variants throughout. Include a smooth theme toggle animation.

Generate a React component library with dark mode first design. Create: Card, Button, Input, Badge, Table, and Modal components. Each component must use CSS custom properties for colors so they work in both dark and light themes. Dark palette: background #09090b, surface #18181b, border #27272a, text #fafafa, muted #a1a1aa. Light palette: background #ffffff, surface #f4f4f5, border #e4e4e7, text #09090b, muted #71717a. Use Tailwind CSS with the dark: modifier.