Kohei Asai

Kohei Asai

Written 08/25/2019
  • English
  • 日本語
  • Applying Dark Mode on the Web

    I just applied "Dark Mode" to this website! It's with white background on light mode, but while you use dark mode, it's with dark color background.

    LightDark
    iOS (Light)iOS (Dark)

    Dark Mode is already available on all major OSs including Windows, Android, iOS and macOS and you can use prefers-color-scheme to check if the Dark Mode is set in the environment.

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

    To distinguish if the environment is on dark mode in JavaScript, you can use window.matchMedia().

    window.matchMedia("(prefers-color-scheme: dark)").matches  // true

    This feature is available on latest Google Chrome, Safari and Firefox so far. Edge and Internet Explorer don't support.

    prefers-color-scheme Compatibility

    Dark mode is only switchable setting in latest macOS, however, in the next version of macOS there’s also "automatic" setting that automatically switches between dark mode and light mode by the sunrise and sunset as same as "Night Light" / "Night Shift", which is the feature on most phones that changes your display color a bit yellow-ish in order to make your eyes relax.

    Dark mode setting in macOS Catalina

    What do you need to do for dark mode?

    There's several concerns you need to do for dark mode, even not programming matter.

    • Darken vivid images with something such as filter: grayscale(50%). It's acceptable for users according to research. Here is guideline in web.dev
    • Avoid using drop shadow to intend the contents' edge such like as floating panels. That is really bad with dark color background
    • Avoid using dull colors for service or corporation logos. As considering to use it on both of light and dark color background, you need to use another color as primary or accent color on the website
    • Use hash map or struct to declare color constants instead of single value (code example)
    • Use inline SVG or icon fonts to enable to change colors by CSS (code example)

    Conclusion

    Dark mode is still not common so far, on the other hand, it has been getting common since macOS supports it in 2018. Nowadays, most major OSs has this feature. Dark mode is known as letting device's battery lasts longer on OELD displays, therefore, dark mode is getting much more common from now on.

    You might need to concern of dark mode to design or implement websites/applications in the long-term project.

    Related Links