98 lines
3.4 KiB
Markdown
98 lines
3.4 KiB
Markdown
---
|
|
permalink: "/{{ year }}/{{ month }}/{{ day }}/dark-mode-for-the-ages"
|
|
title: "Dark mode for the ages"
|
|
published_date: "2024-05-18 13:23:00 +0200"
|
|
layout: post.liquid
|
|
data:
|
|
route: blog
|
|
excerpt: |
|
|
Last night I was still up and awake at 2 am.
|
|
I opened this website and ... BOOM ... bright light in my eyes.
|
|
So I did what anyone who can't sleep at that hour does:
|
|
I implemented a dark mode theme for my website.
|
|
---
|
|
|
|
They say projects are not finished until you write about them.
|
|
So here we go.
|
|
|
|
Last night I was still up and awake at 2 am.
|
|
I opened this website and ... BOOM ... bright light in my eyes.
|
|
I do like this site's simple colorscheme,
|
|
but when everything around you is dark it does kinda burn in your eyes.
|
|
So I did what anyone who can't sleep at that hour does:
|
|
I went on the internet, looked up how to change colors in CSS and implemented a theme toggle on my website (Look for the sun or moon on the top right!)
|
|
|
|
There's many articles on this topic, the one I found was
|
|
[The simplest CSS variable dark mode theme][theme-switcher] by Luke Lowrey.
|
|
|
|
My site is a very simple plain ol' HTML & CSS page.
|
|
I use [Writ] as the base style and provide just a few things on top in my [style.css].
|
|
The colors are now defined like this:
|
|
|
|
```css
|
|
:root,
|
|
html[data-theme='light'] {
|
|
--main-bg-color: white;
|
|
--text-color: #111;
|
|
--alt-text-color: black;
|
|
--code-bg: rgba(0,0,0,.05);;
|
|
--border-color: rgba(0,0,0,.05);
|
|
--link-color: #00e;
|
|
--link-color-visited: #60b;
|
|
--inline-code: #111;
|
|
}
|
|
|
|
html[data-theme='dark'] {
|
|
--main-bg-color: #111;
|
|
--text-color: #b3b3b3;
|
|
--alt-text-color: #999999;
|
|
--code-bg: #ccc;
|
|
--border-color: #414141;
|
|
--link-color: #478be6;
|
|
--link-color-visited: #c988ff;
|
|
--inline-code: #323232;
|
|
}
|
|
```
|
|
|
|
and then used with `var(--main-bg-color)` further below.
|
|
|
|
The theme toggle button requires a bit of JavaScript, which I straight out copied from Luke's blogpost (and put into [theme.js]).
|
|
|
|
```javascript
|
|
var toggle = document.getElementById("theme-toggle");
|
|
|
|
var storedTheme = localStorage.getItem('theme') || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
|
|
if (storedTheme) {
|
|
document.documentElement.setAttribute('data-theme', storedTheme)
|
|
}
|
|
|
|
toggle.onclick = function() {
|
|
var currentTheme = document.documentElement.getAttribute("data-theme");
|
|
var targetTheme = "light";
|
|
|
|
if (currentTheme === "light") {
|
|
targetTheme = "dark";
|
|
}
|
|
|
|
document.documentElement.setAttribute('data-theme', targetTheme)
|
|
localStorage.setItem('theme', targetTheme);
|
|
};
|
|
```
|
|
|
|
It stores the user's preference in local storage and defaults to the system's prefered color scheme (see [`prefers-color-scheme`][mdn]).
|
|
|
|
Once I had it all in place I realized I've been testing the colors with my macOS' Night Shift mode on.
|
|
Oh well, looks good with it on, looks still decent with it off I guess.
|
|
The dark theme is not perfect and probably could use a bit more contrast.
|
|
Code blocks look odd as they are essentially still light mode (just slightly dimmed),
|
|
because the current code syntax highlighting does the styling inline
|
|
and so it's a bit hard to overwrite that in the external CSS.
|
|
But I decided it's better to ship the 80% solution then never get to shipping at all.
|
|
|
|
|
|
[theme-switcher]: https://lukelowrey.com/css-variable-theme-switcher/
|
|
[writ]: https://writ.cmcenroe.me/
|
|
[style.css]: https://fnordig.de/style.css
|
|
[theme.js]: https://fnordig.de/theme.js
|
|
[mdn]: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
|