Skip to content
PLAY VIDEO PLAY VIDEO PLAY VIDEO
By Rhiana Heath

Simple CSS Dark Theming for Accessibility

What is a dark theme?

There are two main types of themes a website or application can have: a light or dark theme.

For example, a light theme could be black text on a white background, and a dark theme, white text on a black background. Most websites just have the one light theme by default, but more and more are adapting to have a dark theme as well.

dark-light-mode

Operating systems and browsers, like Chrome and Firefox, can allow you to choose themes and colours. Others allow you to override colours directly. Some sites and apps will detect your preferences and toggle their themes accordingly.

Why would you want one?

A dark theme can make a site easier to read. Some people who have vision difficulties might prefer a dark theme, or someone who browses the internet at night or during a migraine.

If someone is doing a manual override it might make your website look bad and some info might be lost. Images, text, buttons and inputs can be lost as well. However, if you make your own adjustments that utilise the browser/OS settings then you can have more control over what is shown.

How to make one

1. Using Media queries

There is a new media query type which picks up on the mode so you can use it to switch out colours.

@media (prefers-color-scheme: [dark | light] ) {
  @content;
}

Usage is pretty low at the moment, with it around 3-5%, but the major web browsers are starting to pick it up in newer versions.

It’s also relatively low effort to implement a basic test run setting your system preferences to dark mode, then using CSS variables.

/* Setting some theme colours */
:root {
  --background-color: pink;
  --text-color: black;
}

/* Light mode */
@media (prefers-color-scheme: light) {
  :root {
    --background-color: white;
    --text-color: black;
  }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: black;
    --text-color: white;
  }
}

body {
  color: var(--text-color);
  background-color: var(--background-color);
}

After a quick test you can apply this out into a full colour scheme switch, even using it to switch out background images from light to dark theme versions.

The downside of the this approach is that will only work for really new versions of some browsers. Say you have your Macbook set up for dark theme. If you are looking at a website using the latest version of Chrome or Firefox, it will work well and will show the dark theme. But on an old version of your browser or something like Internet Explorer, the dark theme won't work. It will just show you the default colour scheme. Currently it will work in around 1 in 4 browser versions. Earlier this year it was only around 4%, so it is increasing.

2. Manual switch

Alternatively, if you want a more robust approach, you can add a light/dark theme toggle on your site for people to manually switch between the versions.

This would be using the same types of CSS variables as before, then using some JQuery attached to a switch allowing the user to set which theme they want manually. There are some in depth tutorials on how to do this. The abridged code is also below:

CSS

/* Light mode */
[data-theme="light"] {
  --background-color: white;
  --text-color: black;
}

/* Dark mode */
[data-theme="dark"] {
  --background-color: black;
  --text-color: white;
}

body {
  color: var(--text-color);
  background-color: var(--background-color);
}

HTML

<input type="checkbox" id="themeSwitch">
<label for="themeSwitch">Dark Mode</label>

jQuery

$("#themeSwitch").on("change", function(event){
   if ( $(this).prop(“checked”) {
     $('body").attr("data-theme", "dark")
   } else {
     $("body").attr("data-theme", "light")
   }
});

Is it worth it?

I think it is well worth it and would recommend you start adding this to your sites and applications as early as possible. It's relatively simple to set up and is quickly becoming standard practice. It's a really great addition to any website or application that your users will appreciate, and will help increase the accessibility of your site.

Latest Articles by Our Team

Our expert team of designers and developers love what the do and enjoy sharing their knowledge with the world.

We Hire Only the Best

reinteractive is Australia’s largest dedicated Ruby on Rails development company. We don’t cut corners and we know what we are doing.

We are an organisation made up of amazing individuals and we take pride in our team. We are 100% remote work enabling us to choose the best talent no matter which part of the country they live in. reinteractive is dedicated to making it a great place for any developer to work.

Free Community Workshops

We created the Ruby on Rails InstallFest and Ruby on Rails Development Hub to help introduce new people to software development and to help existing developers hone their skills. These workshops provide invaluable mentorship to train developers, addressing key skills shortages in the industry. Software development is a great career choice for all ages and these events help you get started and skilled up.

  • Webinars

    Webinars

    Webinars are our online portal for tips, tricks and lessons learned in everything we do. Make the most of this free resource to help you become a better developer.

    Learn more about webinars

  • Installfest

    Installfest

    The Ruby on Rails Installfest includes a full setup of your development environment and step-by-step instructions on how to build your first app hosted on Heroku. Over 1,800 attendees to date and counting.

    Learn more about Installfest

  • Development Hub

    Development Hub

    The Ruby on Rails Development Hub is a monthly event where you will get the chance to spend time with our team and others in the community to improve and hone your Ruby on Rails skills.

    Learn more about Development Hub

Next Community Events

Find more events

Get the “reinteractive Review” Monthly Email