Style Detail - Dark Mode

See this style applied to a real page — identical content, different stylesheet.

About This Style

Dark Mode, also known as dark theme or night mode, is an interface color scheme that uses dark backgrounds and light foregrounds (text, icons). It contrasts with the traditional light background, dark foreground approach.

The main goal of dark mode is to reduce the light emitted by screens, especially in low-light environments, thereby alleviating user eye strain. It is also often considered to have a more modern and elegant appearance.

Main Features:

Dark Backgrounds: Typically uses dark gray, near-black, or pure black as the primary background color. Pure black (#000000) can save energy on OLED screens.
Light Foreground: Text, icons, and other important content use light colors (such as white, light gray, or soft colors) to ensure sufficient readability.
Contrast Management: Careful adjustment of text and background contrast is necessary. Too high contrast (pure white on pure black) can be glaring, while too low affects readability. WCAG guidelines recommend a contrast ratio of at least 4.5:1.
Reduced Color Saturation: Overly saturated colors can appear harsh on dark backgrounds. Color saturation is usually reduced to make them softer.
Accent Colors: Bright accent colors are used to highlight key actions (like buttons, links, active states), but should be used sparingly to avoid distraction.
Shadow Handling: Traditional dark shadows are not very effective on dark backgrounds. Brighter shadows, outlines, or different ways of expressing depth may be needed.
Image Adaptation: Sometimes different versions of images are needed for dark mode, or existing images' brightness and contrast are adjusted to look harmonious on a dark background.

Dark mode has become a standard option in many operating systems and applications, offering users flexibility based on environment or personal preference. Well-designed dark mode is not just about aesthetics, but also about accessibility and user comfort.

Sample AI Prompt

Create a modern dashboard UI in dark mode. Use a dark grey background (#1F2937), light grey text (#D1D5DB), bright blue accents (#60A5FA) for interactive elements, Inter font, and ensure sufficient contrast for readability.

(Chinese Explanation: Create a modern dashboard UI in dark mode. Use a dark grey background (#1F2937), light grey text (#D1D5DB), bright blue accents (#60A5FA) for interactive elements, Inter font, and ensure sufficient contrast for readability.)

Theme CSS Code Snippet

Below is the core CSS code for applying dark mode as a global theme (body.theme-dark-mode):

/* 1. Dark Mode Theme */
body.theme-dark-mode {
    --page-bg: #1f2937; /* Dark blue-grey */
    --page-bg-gradient: linear-gradient(to bottom, #374151, #1f2937);
    --text-color: #d1d5db; /* Light grey text */
    --heading-color: #f9fafb; /* Near white headings */
    --link-color: #60a5fa; /* Bright blue link */
    --link-hover-color: #93c5fd; /* Lighter blue hover */
    --border-color: #4b5563; /* Mid-grey border */
    --card-bg: #374151; /* Slightly lighter card bg */
    --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Darker shadow */
    --card-hover-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
    --header-bg: rgba(31, 41, 55, 0.8); /* Semi-transparent header */
    --header-text-color: var(--heading-color);
    --header-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(5px); /* Optional: Blur effect */
    border-bottom: 1px solid var(--border-color);
    --footer-text-color: #9ca3af; /* Muted grey footer text */
    --footer-bg: #1f2937; /* Match page bottom */
    border-top: 1px solid var(--border-color);
    --button-bg: var(--link-color); /* Use link color for primary button */
    --button-text-color: #ffffff;
    --button-hover-bg: var(--link-hover-color);
    --button-border: none;
    --button-secondary-bg: #4b5563; /* Grey secondary button */
    --button-secondary-text-color: var(--text-color);
    --button-secondary-hover-bg: #6b7280;
    --button-secondary-border: none;
    --prompt-bg: #111827; /* Even darker prompt area */
    --prompt-text-color: #9ca3af; /* Muted prompt text */
    --base-font: var(--font-inter); /* Clean sans-serif like Inter */
    --heading-font: var(--font-inter);
    --card-border-radius: 8px; /* Standard border radius */
    --button-border-radius: 6px;
}

Note: Implementing good dark mode requires careful consideration of color contrast and saturation to ensure all elements are clear and not glaring on a dark background.

Resource Download (Example)

Download a zip file containing a more complete CSS definition for this style (may include specific component styles, font file references, etc.).

Download dark-mode.zip