André Woodley Jr.

founder. engineer. creative.

Enabling Dark Mode Isn't Complex

I recently implemented dark mode for the second time ever on Autodial, with my first here on this site (toggle sun/moon button in top right of the header). The first attempt was complex because I didn't fully understand the CSS, HTML and JavaScript components. This time was much easier by following three key steps:

  1. Put the JavaScript and CSS for dark mode directly in index.html. This ensures immediate loading without caching delays or flickering issues.
  2. Use automatic system defaults rather than toggle controls. Relying on device settings for light/dark mode removes UI complexity and is preferred by most users. - This also allows only css to be required.
  3. Leverage the @media (prefers-color-scheme: dark) {} CSS query. This dedicates all dark mode styling into one easily managed section. - Again embedding this directly in the index.html view number 1.

Enabling dark mode enhances user experience, even if minor. I'd argue enhancing user experience will increase profits and companies that don't offer dark-mode likely don't prioritize UX. A drag-and-drop solution or GitHub library could help automate dark mode for many sites. Overall, implementing dark mode is straightforward today and should be considered standard practice