themx
← Back to themes

Dark Mode

corporate Color mode

Easy on the eyes, hard to look away

Reference year: 2020

Compare this theme

Best for

Dashboard, Developer tools, SaaS

Less suitable for

  • Pages with untested dark text, images, or controls inherited from a light palette.

Live component preview

Try the sample controls. daisyUI uses compiled library classes; shadcn/ui uses React components from the New York registry. The three example layouts demonstrate styling with the selected tokens. All content is demo data.

Dark Mode preview

Examples

Dark Mode — Hero Section
Hero Section
Dark Mode — Card Grid
Card Grid
Dark Mode — Form
Form
Dark Mode — Dashboard Layout
Dashboard Layout

Color Palette

Primary #BB86FC
Secondary #03DAC6
Accent #CF6679
Background #121212
Text #E1E1E1

Typography

Heading: Inter
Body: Inter

Key Characteristics

  • Dark surfaces with lighter text for reduced eye strain
  • Elevated surfaces use progressively lighter shades of gray
  • Primary colors are desaturated to work on dark backgrounds
  • Careful contrast ratios meeting WCAG accessibility standards
  • Depth communicated through surface elevation levels
  • Accent colors used sparingly for emphasis and interaction

Tags

dark accessible eye-friendly modern

Dark mode design moved from a niche developer preference to a mainstream expectation around 2020 when every major operating system and platform adopted system-wide dark themes. Far more than simply inverting colors, well-executed dark mode requires a carefully constructed elevation system where lighter surface shades convey hierarchy against a near-black base.

When to Use

Dark mode is appropriate for virtually any application, from media players and code editors to corporate dashboards and social platforms. It is especially effective for content-consumption interfaces, low-light environments, and OLED screens where true blacks save battery. Offering dark mode as a user preference alongside a light theme has become a baseline expectation for modern products.

Key Visual Elements

The background is never pure black (#000000) — a very dark gray such as #121212 reduces harsh contrast and avoids the “infinity void” effect. Surfaces at higher elevations use progressively lighter grays (#1E1E1E, #2C2C2C, #383838) to simulate light accumulation. Primary and secondary colors are desaturated compared to their light-theme counterparts so they remain legible without causing glare. Borders are used minimally; elevation and subtle tonal shifts handle separation.

Typography

A single versatile typeface like Inter works across both headings and body in dark mode, where legibility depends more on weight contrast than font variety. Use semi-bold or bold for headings and regular weight for body text. Avoid pure white (#FFFFFF) for body copy — a slightly muted tone like #E1E1E1 prevents halation and improves long-reading comfort.

Export style

Choose a library mapping or use the CSS variables in your own components. JSON includes the same mapping. Load the listed fonts separately.

:root {
  --tx-surface-bg: #121212;
  --tx-font-heading: "Inter", sans-serif;
  --tx-font-body: "Inter", sans-serif;
  --tx-surface-bg-image: none;
  --tx-card-bg: #1E1E1E;
  --tx-card-border: rgba(255,255,255,0.08);
  --tx-card-border-width: 1px;
  --tx-card-radius: 0.75rem;
  --tx-card-shadow: 0 2px 8px rgba(0,0,0,0.3);
  --tx-card-backdrop-blur: 0px;
  --tx-card-border-hover: rgba(255,255,255,0.15);
  --tx-card-shadow-hover: 0 4px 16px rgba(0,0,0,0.4);
  --tx-font-heading-weight: 600;
  --tx-font-body-weight: 400;
  --tx-text-muted: rgba(225,225,225,0.7);
  --tx-text-subtle: rgba(225,225,225,0.5);
  --tx-link-color: #BB86FC;
  --tx-button-radius: 0.5rem;
  --tx-input-bg: #2A2A2A;
  --tx-input-border: rgba(255,255,255,0.1);
  --tx-text: #E1E1E1;
  --tx-primary: #BB86FC;
  --tx-secondary: #03DAC6;
  --tx-accent: #CF6679;
  --tx-media-filter: none;
}

Prompt Builder

Choose your project, UI library, and output. Prompts, documents, and exports use the same resolved theme values.

Example projects:

Use your own components with the exported CSS variables.

Components

Changing the page purpose selects suggested components. You can adjust them below.

Optional design layers

Apply a layout, then a surface effect, then a color mode. Fonts stay with the base theme. The output contains one final token set.

Dark Mode

Live component preview

Try the sample controls. daisyUI uses compiled library classes; shadcn/ui uses React components from the New York registry. The three example layouts demonstrate styling with the selected tokens. All content is demo data.

Optional skills

Include skill references and installation instructions for your coding agent. Selecting a skill here does not install it.

Choose daisyUI or shadcn/ui to include its official skill.

Copy this prompt into your coding assistant. The task mode applies to the UI prompt.

Generated prompt

You are building a web application using Next.js with Tailwind.
Read existing project instructions and reuse installed components where available.

## Project
Project brief: Not specified
Target users: Not specified
Page purpose: Dashboard
Framework: Next.js
CSS approach: Tailwind
UI library: Custom / no library
Tone: Professional

## Visual direction
Base theme: Dark Mode (color-mode)
- Dark surfaces with lighter text for reduced eye strain
- Elevated surfaces use progressively lighter shades of gray
- Primary colors are desaturated to work on dark backgrounds
- Careful contrast ratios meeting WCAG accessibility standards
- Depth communicated through surface elevation levels
- Accent colors used sparingly for emphasis and interaction

## Resolved style
Use this final token set. It already includes the selected layers. These values take precedence over conflicting base characteristics.
Color palette: primary #BB86FC, secondary #03DAC6, accent #CF6679, background #121212, text #E1E1E1
Typography: Inter for headings, Inter for body text
Load the declared fonts with the required weights. Use system fallbacks when a font is unavailable.
```css
:root {
  --tx-surface-bg: #121212;
  --tx-font-heading: "Inter", sans-serif;
  --tx-font-body: "Inter", sans-serif;
  --tx-surface-bg-image: none;
  --tx-card-bg: #1E1E1E;
  --tx-card-border: rgba(255,255,255,0.08);
  --tx-card-border-width: 1px;
  --tx-card-radius: 0.75rem;
  --tx-card-shadow: 0 2px 8px rgba(0,0,0,0.3);
  --tx-card-backdrop-blur: 0px;
  --tx-card-border-hover: rgba(255,255,255,0.15);
  --tx-card-shadow-hover: 0 4px 16px rgba(0,0,0,0.4);
  --tx-font-heading-weight: 600;
  --tx-font-body-weight: 400;
  --tx-text-muted: rgba(225,225,225,0.7);
  --tx-text-subtle: rgba(225,225,225,0.5);
  --tx-link-color: #BB86FC;
  --tx-button-radius: 0.5rem;
  --tx-input-bg: #2A2A2A;
  --tx-input-border: rgba(255,255,255,0.1);
  --tx-text: #E1E1E1;
  --tx-primary: #BB86FC;
  --tx-secondary: #03DAC6;
  --tx-accent: #CF6679;
  --tx-media-filter: none;
}
```
Use the CSS variables in your own components. Apply the heading and body font variables to their respective elements.

## Layout
- Keep the existing layout. Separate dark surfaces with borders and spacing.

## Interaction
- Show focus and selected states with visible borders as well as color.

## Suitability notes
Use these limitations to assess the chosen page purpose. Explain any mismatch before applying an unsuitable treatment.
- Dark Mode: Pages with untested dark text, images, or controls inherited from a light palette.

## Components
Generate the following components in this style:
- Sidebar
- Tables
- Forms

## Quality requirements
Choose section order and visual emphasis from the real content and page purpose. Add only sections needed for the task.
Use supplied content. Label sample data. Do not invent testimonials, customer logos, statistics, or compliance claims.
Every interactive control must perform its declared action or be clearly labeled as a demo.
Include loading, empty, error, success, disabled, and focus states where applicable.
Use semantic HTML, visible keyboard focus, readable text contrast, and labeled form fields.
Ensure responsive design (mobile-first). Preserve reading order and avoid horizontal page overflow.
Respect prefers-reduced-motion. Keep essential content visible when animations are disabled.

## Verification
Check representative desktop and mobile widths, keyboard interaction, and relevant component states. Run available project checks and report what was actually verified.
Use Tailwind utility classes with the declared tokens.
Product context is incomplete. Label assumptions and treat the result as a draft until the missing context is supplied.