How to add dark mode to your website

Update (2026): I’ve written a new post showing how to use the light-dark() function for light and dark mode, with simpler CSS. Read How to use light-dark() for light and dark mode

On your phone, tablet or laptop, you can set a preference for light mode, dark mode, or ‘auto’.

• Dark mode is great for its accessibility in low-light settings
• Light mode is better for bright conditions
• Auto allows your device to toggle between light and dark modes based on the time of day, going light in the day and dark at night

Some websites let users toggle between dark and light modes. It’s great for regular visitors who have a preference. But for one-off visitors, choosing a mode can be annoying. A smarter approach is for the site to automatically adapt to the user’s system setting, be it light, dark, or ‘auto’. This way, the site feels intuitive without requiring extra clicks.

Adding dark mode with CSS only

You can enable dark mode on your website using just CSS, no JavaScript needed. The CSS media query ‘prefers-color-scheme: dark‘ lets you automatically switch to dark mode based on user preference.

Here’s a basic example using media queries:

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

For easier management, use CSS custom variables:

/* Define default colours */
:root {
  --text-colour: #000;
  --background-colour: #fff;
}

/* Apply default colours */
body {
  color: var(--text-colour);
  background: var(--background-colour);
}

/* Update colours for dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --text-colour: #fff;
    --background-colour: #000;
  }
}

This approach uses custom variables for text and background colours, making it easier to manage and update your dark mode settings.

Compatibility concerns

The method works well for most modern browsers. If you don’t need to support outdated browsers like IE 11 or Opera Mini, then it’s a straightforward task. You can check browser support on ‘Can I use’.

• Can I use prefers-color-scheme
• Can I use CSS Variables

If you must support older browsers, consider using fallbacks for each custom CSS variable. While IE 11 and Opera Mini won’t get dark mode, they’ll at least display your website default colours correctly. Here’s how you could set it up:

body {
  color: $text-colour;  /* Fallback for older browsers */
  color: var(--text-colour);
  background: $background-colour;  /* Fallback for older browsers */
  background: var(--background-colour);
}

This approach ensures that older browsers still have a usable design, even if they can’t switch to dark mode.

How to test dark mode

Testing dark mode requires changing settings on your device. Here’s a quick guide for various platforms:

Mac:

• Go to System Preferences
• Click on General
• Choose Light, Dark, or Auto under Appearance

iPhone:

• Open Settings
• Go to Display & Brightness
• Choose Light, Dark, or set to Auto

Windows:

• Open Settings
• Go to Personalisation
• Click on Colours
• Scroll down to ‘Choose your default app mode’ and select Dark

Android:

• Open Settings
• Go to Display
• Tap on Dark Theme to toggle on/off, or set to Auto if available

The ‘auto’ setting changes modes based on the time of day.

Implementation checklist

When incorporating dark mode into a website or application, consider these key points:

• Contrast: Use tools like contrast ratio checkers or WAVE to optimise the contrast between text and background.
• Readability: Make sure text is easily readable in both light and dark modes.
• Aesthetics: Check that all elements, including images, look good in both modes. Pay special attention to PNGs or SVGs with transparent backgrounds, as they may not be visible in one of the modes.
• Auto-apply: Confirm that dark and light modes switch automatically based on user or system preferences.

Conclusion

Dark mode is popular, but not essential. However, its rising popularity is evident from the millions who have downloaded browser extensions or changed their system settings for this feature. The demand is clearly high. The benefits include reduced eye strain from less blue light, enhanced accessibility, and better energy efficiency on OLED screens, leading to longer battery life.

However, implementing and managing both light and dark themes isn’t without its challenges. It takes time to set up and requires ongoing management. Your approach to theme development can either simplify or complicate this process. Despite the overhead, offering the choice between light and dark modes empowers users to experience the web in a way that’s most comfortable for them, making it a worthwhile addition to any website.