About This Style
Dark Mode, also known as a 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 primary goal of Dark Mode is to reduce the light emitted by screens, especially in low-light environments, thereby lessening user eye strain. It is also often perceived as having a more modern and elegant appearance.
Key Features:
- Dark Backgrounds: Typically uses dark grays, near-blacks, 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 pastels) 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. Saturation is often reduced to make colors 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 less effective on dark backgrounds. Lighter shadows, outlines, or different ways of expressing hierarchy may be needed.
- Image Adaptation: Sometimes, different versions of images are needed for dark mode, or existing images may need brightness and contrast adjustments to look harmonious on dark backgrounds.
Dark Mode has become a standard option in many operating systems and applications, offering users flexibility based on their environment or personal preference. A well-designed dark mode is not just about aesthetics but also about accessibility and user comfort.
Example 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.(English 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 Snippet
The following 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 a good dark mode requires careful consideration of color contrast and saturation to ensure all elements are clearly visible and not harsh on a dark background.
Download Resources (Example)
Download a ZIP archive containing a more complete CSS definition for this style (may include specific component styles, font file references, etc.).
Download dark-mode.zip