Six Levels of Dark Mode (2024)

This outlines 8 stages for implementing dark mode, progressively expanding from basic browser support to JavaScript control.

• Level 1: Use only <meta name="color-scheme" content="light dark"> to follow the user's color scheme preference.
• Level 2: Achieve the same effect in CSS with html { color-scheme: light dark; }. Leveraging UA default styles and system colors can produce a surprisingly clean setup.
• Level 3: Branch color values directly with the light-dark() function. However, at the time of writing, browser support isn't sufficient.
• Level 4: Use @media (prefers-color-scheme: dark) to change not just colors but also images, shadows, and other elements broadly.
• Level 5: Separate light/dark-specific stylesheets with link media="(prefers-color-scheme: ...)". This approach is suitable for large-scale customization.
• Level 6: Read the scheme in JavaScript with window.matchMedia('(prefers-color-scheme: dark)') for additional processing.
• Level 7: Instead of only following the system preference, provide a 3-state Automatic / light / dark toggle.
• Level 8: Instead of classes or data-theme, determine the theme based on the actual presence of <meta name="color-scheme"> using :has().

Additionally, through observations on CSS Naked Day, it points out that many sites are still not sufficiently prepared for dark mode, and also mentions Safari's dark mode accessibility issues. For printing, it was observed that browsers effectively treat prefers-color-scheme as light, leading to the conclusion that separating printer-specific styles is the safe approach.