Dark themes seem to be all the rage currently. No doubt you’ve seen them on your phone, computer and the various apps you frequent. Some consider them a gimmick, others find them beneficial to their online experience. Dark themes can be a more comfortable way to browse at night and in low light, and a way to reduce battery consumption for OLED devices. Sometimes they are just a visual preference that suits a desired aesthetic for users when engaging with their devices.
However you personally feel about dark themes or theming in general, there’s no denying that providing a choice for users can often be a positive thing. Letting a user take control of their experience when visiting your website or app is likely going to be perceived favourably.
Are you interested in theming your website?
The good news is you can create theme switching for your website with relative technical ease.
However you should be mindful of the following points in order to maximise a users experience:
- Check a users browser or OS for their preference of a light or dark theme
- Allow theme choice to be remembered with local storage if the default theme is switched from
- Ensure good colour contrast for available themes to aid accessibility
A note on that last point about colours, there’s an excellent primer article on colour contract on The A11y Project website. It also has links to some helpful tools for checking contrast.
A working example for theme switching
Below is a simple example that provides the user with an option to select from a light, dark, or high contrast theme. This works by setting a data-attribute of data-theme against the page html tag with a value like light or dark. Each data-attribute then has a number of CSS variables assigned to it to control colours. When the data-attribute value is changed from light to dark this can instantly update CSS variables creating a “live” change in appearance based on how CSS is applied.
CSS Tricks have a good explanation on why CSS variables are beneficial over preprocessor variables for these types of application.
In my example below the code will check the user preference first. So if you are using a dark theme setting on your OS, and your web browser has picked it up, this example should also be displaying a dark theme. And if you are using a light theme, then it should be using my light version.
When you make a change to the selected theme your preference is saved using local storage. When you open the web page in a new tab, or return at a later point you should see the same theme that you selected previously.
Final thoughts on themes with CSS variables
Selectable themes on websites can be a great addition when added thoughtfully with good practices. It’s not something that every website needs, so think carefully as to whether your users would really benefit from it.
Theming for websites doesn’t have to revolve around light and dark modes. Recently I worked on a WordPress multi site project where each division of a company ran a sub site with different colour schemes to help distinguish themselves.
In a similar project I also looked at how options can be created in the WordPress admin for users to style their own website. I might look to write about this in more detail so check my blog again in the future.
If you think theming might be a good fit for your website, feel free to let me know and we can discuss whether it would be appropriate and how to implement it.