LINICKX.com

Adding Dark Mode to your website is super easy!

Nick Bettison — Sat, 07 Mar 2020 11:05:00 +0000

Whilst tweaking my website at the beginning of the year I was surprised how easy it is to support Light Mode or Dark Mode themes. The implementation below isn't a user toggle Javascript thing, browsers now have a "media preference", that is if your iPhone, Mac or Windows 10 is setup for Light Mode then it'll prefer a lighter style and the opposite is true, if you're setup for Dark Mode then a darker style is displayed.

Example 1: Light/White Website with optional Dark Mode.

To start with, let's take the initial template from bootstrap and add 8 lines of code (mostly whitespace!) to include an optional inverted view; this is what we add...

<style type="text/css">
    @media (prefers-color-scheme: dark) {
      body {
        background-color: black;
        color: white;
      }
    }
</style>

So the final page looks like this, save it as light_eg.html on your desktop.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Hello, world!</title>

    <style type="text/css">
        @media (prefers-color-scheme: dark) {
          body {
            background-color: black;
            color: white;
          }
        }
    </style>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>Example HTML from <a href="https://getbootstrap.com/docs/4.4/getting-started/introduction/">bootstrap</a>

  </body>
</html>

By default the page will be the normal bootstrap colours, dark text on a white background but if the user has setup their device in Dark Mode the site will be white text on a black background.

Example 2: Dark/Black Website with optional Light Mode.

Ok, so what if your use case was the same as mine; your site is normally dark but you want to provide a brighter version for people who prefer the lighter side of the net.

This time, lets start with the full HTML example: dark_eg.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootswatch CSS -->

    <link href="https://stackpath.bootstrapcdn.com/bootswatch/4.4.1/cyborg/bootstrap.min.css" rel="stylesheet" integrity="sha384-l7xaoY0cJM4h9xh1RfazbgJVUZvdtyLWPueWNtLAphf/UbBgOVzqbOTogxPwYLHM" crossorigin="anonymous">

    <title>Hello, world!</title>

    <style type="text/css">
        @media (prefers-color-scheme: light) {
          body, h1, h2, h3 {
            background-color: white;
            color: black;
          }
        }
    </style>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>Example HTML from <a href="https://getbootstrap.com/docs/4.4/getting-started/introduction/">bootstrap</a> with dark <a href="https://bootswatch.com/cyborg/">Cyborg Theme</a>

  </body>
</html>

In this example we're using a dark bootstrap theme called cyborg, again we add in our 8 lines, but notice something a little different:

<style type="text/css">
    @media (prefers-color-scheme: light) {
      body, h1, h2, h3 {
        background-color: white;
        color: black;
      }
    }
</style>

In the dark example, additional changes are needed for h1, h2 & h3 so this is the gotcha to look out for when using off-the-shelf themes. In the cyborg theme, the headings do not inherited their colour from body, they are hard set; when the colour scheme is inverted the white on white text disappears. To fix the issue some additional h1, h2 & h3 colours are needed, so make sure you test your site in each mode to capture any missing options.

Footnotes

This feature isn't dependent on bootstrap, it simply makes a good example as it's a style/css framework that's very common.
User's cannot choose a theme, this approach simply honours their system wide preference
Inspired by Flavio's dark mode post: https://flaviocopes.com/dark-mode/

Thoughts on my website

nick — Tue, 15 Sep 2009 20:57:00 +0100

I've been wondering lately if linickx.com needs a more minimalist touch, something like the Gnome Zeitgeist blog or thpinfo.com, getting the balance right in my themes is always a problem for me. If I can find some time I think I'll have a play.

UGHRRG, ie6!!!! Should I support it?

nick — Sun, 20 Apr 2008 12:25:00 +0100

I'm in the process the process of writing a whole new look for linickx.com, I think I'm about there so I've decided it was about time to give the other browsers a spin. All of my development has been with Firefox on linux (with a little epiphany for testing non logged in users) and I've got the look and feel pretty much as I like.

I reboot into windows cause according to google analytics 70% of my visitors in the last month are windows people; Firefox on windows passes the test, all the same, so I've downloaded a copy of safari for windows, good news there too and I finish off with Internet Explorer 6, crap I forgot that ie6 cannot render transparent .png files, although the layout is alright my new header is screwed and I've used .png icons in my /files/ section so that's going to look rubbish.

This leaves me with a dilemma, do I re-do all of my images as .gifs to account for the 10% of ie6 users? And is it possible to dual install ie6 & ie7 ? ... I still haven't tested that and 20% of visitors use that...I've never bothered upgrading to ie7 since I new I was never going to use it, why waste the disk space & bandwidth?

I'm toying with having a browse happy banner appear for ie6 and a disclaimer saying this site will look awful use a proper browser; the banner will be easy to do within the WordPress powered section, but the /files/ section which is driven by apache may be more of an issue.

The whole thing is just irritating, I was really looking forward to getting the new look up soon, ho-hum off to make a decision!

P.s. In case you were wondering, yes 60% of vistors are firefox, 5% are safari and the other 5% is made up of random stuff (hello to the 2 users on the PSP!!!)