Dark mode has landed on MacOS and iOS and if you’re using CSS variables, it’s really easy to add a dark mode version to your site.
That’s what we’ve done on this site. By simply checking for the user’s dark mode preference and inverting our colour scheme we generated a dark mode for safralondon.com and had it up and running in a couple of hours.
Of course, this site makes use of 2 colours, yellow and black. Three, if you count white. So it’s a lot easier for us than say a brand with many colours to contend with, but you can only beat what’s in front of you, as they say ;)
The result
The CSS code
:root {
--color-primary: #fd2;
--color-primary-rgb: 255, 221, 34;
--color-secondary: #151515;
--color-secondary-rgb: 21, 21, 21;
}
@media (prefers-color-scheme: dark) {
:root {
--color-primary: #151515;
--color-primary-rgb: 21, 21, 21;
--color-secondary: #fd2;
--color-secondary-rgb: 255, 221, 34;
}
}
body {
background-color: var(--color-primary);
color: var(--color-secondary);
}
There’s some other little tweaks around the site of course, but that’s the bulk of the work right there.
Further reading
- Using CSS custom properties (variables)
- caniuse browser support for CSS Variables (Custom Properties)
- Dark Mode support in Webkit
Browser support
Internet Explorer 11 (IE11) does not support CSS variables, but then it does not support dark mode media queries either, so you do not lose out.
Each time you redevelop a website, you have to consider, is it important for our business to support a specific older version of a browser? If the percentage of your audience using that browser is very small you may ask - is it worth the extra cost in development fees; conversely, if the percentage of use is medium+ you may be thinking - we could lose sales or customer confidence if we don’t support that browser.
For Safra, IE11 is not a big concern, but for some clients it could well be a browser version that needs fully supporting. For each project we work on, we consult with the client to see what level of browser support is genuinely required and we adjust our develoment practices to suit.