Course Outline (Part 31)

Welcome to Part 31 of the CSS Mastery & Responsive Layouts Course. In this part, we will explore Dark Mode, Prefers-ColorScheme, & Color Schemes.

Providing a dark mode option is no longer a luxury—it is a modern web standard. Modern CSS provides the tools to detect operating system theme preferences and dynamically update color palettes using custom properties, giving users an eye-strain-free experience automatically or via custom UI toggles.

Chapter 164: The prefers-color-scheme Media Query

The prefers-color-scheme media query allows you to write CSS rules that target users who have set their operating system or browser environment to a light or dark theme.

◆ Detecting Dark Preferences

To override light styles when dark mode is requested:

body {
  background-color: #ffffff;
  color: #1a1a1a;
  transition: background-color 0.3s, color 0.3s;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #f5f5f5;
  }
}

❖ Detecting Light Preferences

While less common (since light is usually the default), you can target explicit light-mode requests:

@media (prefers-color-scheme: light) {
  .hero-banner {
    background-image: url('/images/hero-light.png');
  }
}

Chapter 165: The color-scheme Property

Before rendering any custom CSS, browsers render system controls like checkboxes, scrollbars, text inputs, and select options with a default light styling. The color-scheme property tells the browser which color schemes the page supports, allowing the user agent to render form controls and scrollbars natively in dark mode.

◆ Supported Color Schemes

You can declare support at the document root:

:root {
  color-scheme: light dark; /* Supports both, defaults to user agent choice */
}

❖ Forcing Dark Theme Controls

If a specific component is always dark themed:

.dark-card {
  color-scheme: dark; /* Forces inputs/scrollbars within this container to render dark */
  background-color: #1e1e1e;
  color: #ffffff;
}

Chapter 166: Implementing Dynamic Themes with CSS Variables

The cleanest way to implement dark mode is combining CSS custom properties (variables) with either media queries or a data attribute selector on the <html> or <body> element.

◆ Using a Data Attribute Selector

This approach allows JavaScript toggling while maintaining default system styles:

:root {
  --bg-primary: #ffffff;
  --text-primary: #111827;
  --accent-color: #2563eb;
}

/* System preferences override */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #0f172a;
    --text-primary: #f8fafc;
    --accent-color: #3b82f6;
  }
}

/* User override via JavaScript setting <html data-theme="dark"> */
[data-theme="dark"] {
  --bg-primary: #0f172a;
  --text-primary: #f8fafc;
  --accent-color: #3b82f6;
}

[data-theme="light"] {
  --bg-primary: #ffffff;
  --text-primary: #111827;
  --accent-color: #2563eb;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

❖ Modifying Images and SVG Assets in Dark Mode

You can dim images or swap SVG fills to look better in dark mode:

@media (prefers-color-scheme: dark) {
  img {
    filter: brightness(0.8) contrast(1.2); /* Soften bright pictures */
  }
  .logo-icon {
    fill: #3b82f6;
  }
}

Chapter 167: Dark Mode Practice & Self-Check

◆ Practice Exercises

  1. Exercise 1: Light/Dark Mode Palette: Create a theme card component using CSS variables for background, text, and border. Use color-scheme to ensure textareas inside look native to the theme.

❖ Self-Check Questions

  1. What media query detects system-wide color preferences?
    • Answer: prefers-color-scheme.
  2. What values can prefers-color-scheme take?
    • Answer: light, dark, or no-preference (deprecated).
  3. What does the color-scheme property do?
    • Answer: It signals to the browser which themes (light/dark) a page supports, updating default form controls, select fields, and scrollbars.
  4. Where should color-scheme: light dark; be defined?
    • Answer: On the :root element.
  5. Why use CSS Variables for theme management?
    • Answer: Because you only have to modify the variable values inside a single selector rule block to update the colors across the entire website.
  6. How can you dim image elements to prevent high-glare in dark mode?
    • Answer: Using filter: brightness(0.8); or similar filter combinations.
  7. Does prefers-color-scheme require JavaScript?
    • Answer: No, it is processed completely within native CSS.
  8. What is the benefit of data-theme selectors over prefers-color-scheme?
    • Answer: They allow manual user overrides (e.g., clicking a toggle button) to take precedence over the operating system preference.
  9. What happens if color-scheme is set to dark only?
    • Answer: System UI controls inside that element or page are rendered using dark theme styles regardless of OS preference.
  10. Does transitioning root properties affect performance?
    • Answer: Transitioning layout-changing properties does, but transitioning colors (background/color) on body text causes minimal repaint lag if styled correctly.

Discussion

Loading comments...