...
 
Commits (3)
---
layout: post
title: To a dark theme (and back, if you prefer)
date: 2020-06-21 18:06:21 +01:00
lang: en
tags:
- website
- dark theme
- light theme
- prefers-color-scheme
- SASS
- SCSS
---
Back in september [I converted](https://gitlab.com/ffes/ffes.gitlab.io/-/commit/d57220931397ed7213ac850c89e0f0dbd0a90f01) the look of my website to dark theme.
A while ago I discovered that most modern operarting systems and their browsers now support [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme).
So I recently decided that I want to add support for that to my site and in fact bring back the light theme (if you prefer).
I know that not all operating systems support the feature, like Linux and older version of Android and iOS.
But since most of my visiters use the Windows desktop to view my site, I don't think that will be much of a problem.
Windows 10 and all the major browsers on that platform support this feature.
So the site will look the way you want: light or dark.
I choose to make the dark theme, the default theme.
So if suddenly the site is changed to a light theme and you prefer the dark theme, you might consider adjusting your system preferences.
## How it is done
Since I use [Jekyll](https://www.jekyllrb.com) to generate my site I use SCSS to generate the CSS for my site.
The `prefers-color-scheme` setting is not too difficult to implement, but you need to think of a couple of things.
First of all since the site need to be able to dynamically change from light to dark and back you cannot hardcode the color in the css.
You need to use CSS variables and define all the colors.
I use names like `--text-color` and `--bg-color`.
```css
/* The dark theme is the default theme */
:root {
--bg-color: #293134;
--text-color: #c8c8c8;
--highlight-color: #fdfdfd;
--nav-bg-color: #000000;
--nav-text-color: #c8c8c8;
--nav-highlight-color: #fdfdfd;
--header-color: #fdfdfd;
--link-color: #569cd6;
--terminal-color: #619e57;
}
@media (prefers-color-scheme: light) {
:root {
--bg-color: #fdfdfd;
--text-color: #000000;
--highlight-color: #fdfdfd;
--nav-bg-color: #000000;
--nav-text-color: #c8c8c8;
--nav-highlight-color: #fdfdfd;
--header-color: #569cd6;
--link-color: #569cd6;
--terminal-color: #619e57;
}
}
```
After that replace all the colors, in my case the SASS variables, with these CSS variables.
```css
body {
background-color: var(--bg-color);
color: var(--text-color);
height: 100%;
font-family: 'Open Sans', sans-serif;
}
```
If you still want to use SASS variables with defining you can use them, know that [modern implementations of SASS](https://sass-lang.com/documentation/breaking-changes/css-vars) require to use the `#{$dark_grey}` syntax when defining the colors.
And since my website is quite simple that is all I had to do.
Well, when it comes down to SASS and CSS.
Back in September I also replaced the social media logos with SVGs.
For now I created two versions of the logo. A black and a white one. And based on the `prefers-color-scheme` the default image is overwriten using the `<picture>` tag.
```html
<picture>
<source srcset="assets/images/logos/github-black.svg" media="(prefers-color-scheme: light)">
<img src="assets/images/logos/github-white.svg" alt="GitHub" title="GitHub" />
</picture>
```
......@@ -8,16 +8,16 @@
padding: 0 5px 0 5px;
a:link, a:visited, a:hover, a:active {
color: $white;
color: var(--header-color);
}
}
.post {
.alert-success {
cursor: pointer;
background-color: $dark_grey;
border-color: $light_grey;
color: $green;
background-color: var(--bg-color);
border-color: var(--text-color);
color: var(--terminal-color);
}
}
......@@ -49,7 +49,7 @@
margin-top: 20px;
border-style: solid;
border-width: 0 0 3px 0;
border-color: $light_grey;
border-color: var(--text-color);
}
h2#archief {
......@@ -61,7 +61,7 @@ h2#archief {
}
.post-series {
color: $green;
color: var(--terminal-color);
padding-left: 2em;
}
......
......@@ -7,19 +7,20 @@ html {
}
body {
color: $light_grey;
background-color: $dark_grey;
background-color: var(--bg-color);
color: var(--text-color);
height: 100%;
font-family: 'Open Sans', sans-serif;
}
nav {
background-color: $black;
background-color: var(--nav-bg-color);
color: var(--nav-text-color);
font-family: Inconsolata, monospace;
font-size: 1.5em;
#green-terminal {
color: $green;
color: var(--terminal-color);
}
li {
......@@ -28,17 +29,17 @@ nav {
}
.hamburger-icon {
color: $white;
color: var(--nav-highlight-color);
font-size: 1.5em;
}
a:link, a:visited, a:active {
color: $light_grey;
color: var(--nav-text-color);
text-decoration: none;
}
a:hover {
color: $white;
color: var(--nav-highlight-color);
text-decoration: none;
}
}
......@@ -50,12 +51,12 @@ nav {
}
a:link, a:visited, a:hover, a:active {
color: $blue;
color: var(--link-color);
}
h1,h2,h3,h4,h5,h6 {
font-family: 'Montserrat', cursive;
color: $white;
color: var(--header-color);
}
div p {
......@@ -67,17 +68,17 @@ code {
}
td {
color: $light_grey;
color: var(--text-color);
}
th {
font-weight: bold;
color: $white;
color: var(--highlight-color);
}
::selection {
background: $green;
color: $dark_grey;
background: var(--terminal-color);
color: var(--bg-color);
}
/* Bootstrap override */
......@@ -85,7 +86,7 @@ th {
.table-striped > tbody > tr:nth-child(odd)> {
td, th {
background-color: lighten($color: $dark_grey, $amount: 10%);
background-color: var(--alt-table-row-color);
}
}
......@@ -94,5 +95,5 @@ th {
h1.not-found {
font-family: "Libre Barcode 39 Text";
font-size: 8em;
color: $white;
color: var(--header-color);
}
......@@ -4,3 +4,37 @@ $light_grey: #c8c8c8;
$white: #fdfdfd;
$blue: #569cd6;
$green: #619e57;
// The dark theme is the default theme
:root {
--bg-color: #{$dark_grey};
--text-color: #{$light_grey};
--highlight-color: #{$white};
--nav-bg-color: #{$black};
--nav-text-color: #{$light_grey};
--nav-highlight-color: #{$white};
--header-color: #{$white};
--link-color: #{$blue};
--terminal-color: #{$green};
--alt-table-row-color: #3f4c51;
--blog-series-color: #{$green};
--src-text-color: #{$white};
}
@media (prefers-color-scheme: light) {
:root {
--bg-color: #{$white};
--text-color: #{$black};
--highlight-color: #{$white};
--nav-bg-color: #{$black};
--nav-text-color: #{$light_grey};
--nav-highlight-color: #{$white};
--header-color: #{$blue};
--link-color: #{$blue};
--terminal-color: #{$green};
--alt-table-row-color: #f2f2f2;
--blog-series-color: #{$green};
--src-text-color: #{$white};
}
}
......@@ -7,7 +7,7 @@
pre.highlight {
border-width: 1px;
border-style: solid;
border-color: $light_grey;
border-color: var(--text-color);
border-radius: 4px;
padding: 5px;
}
......@@ -15,7 +15,7 @@ pre.highlight {
.highlight {
background: #1E1E1E;
color: $light_grey;
color: var(--src-text-color);
.c { color: #618A51; }
.err { color: #a61717; background-color: #1E1E1E; }
......
......@@ -5,15 +5,34 @@ title: About me
<h1>About me</h1>
<p>My name is Frank Fesevur, I live in the Netherlands. I am married to <a href="https://www.pedicureloosduinen.nl/">Caroline</a> and we have a son Menno. I work as a developer and system administrator. In my spare time I try to work on various open source <a href="{% link projects/index.html %}">projects</a>.</p>
<p>
My name is Frank Fesevur, I live in the <a href="https://en.wikipedia.org/wiki/Netherlands">Netherlands</a>.
I am married to <a href="https://www.pedicureloosduinen.nl/">Caroline</a> and we have a son Menno.
I work as a software developer and system administrator.
In my spare time I try to work on various open source <a href="{% link projects/index.html %}">projects</a>.
</p>
<p>If you want to contact me about one of my open source projects, use the contact information mentioned in the documentation of that project. For everything else you can send me an e-mail. The address is my last name at gmail dot com.</p>
<p>
If you want to contact me about one of my open source projects, use the contact information mentioned in the documentation of that project.
For everything else you can send me an e-mail.
The address is my last name at gmail dot com.
</p>
<p>My social media links:</p>
<p>
<a href="https://gitlab.com/ffes" title="GitLab"><img src="{% link assets/images/logos/gitlab.svg %}" alt="GitLab" title="GitLab" /></a>&nbsp;
<a href="https://github.com/ffes" title="GitHub"><img src="{% link assets/images/logos/github.svg %}" alt="GitHub" title="GitHub" /></a>&nbsp;
<a href="https://instagram.com/frankfesevur" title="Instagram"><img src="{% link assets/images/logos/instagram.svg %}" alt="Instagram" title="Instagram" /></a>&nbsp;
<a href="https://github.com/ffes" title="GitHub">
<picture>
<source srcset="{% link assets/images/logos/github-black.svg %}" media="(prefers-color-scheme: light)">
<img src="{% link assets/images/logos/github-white.svg %}" alt="GitHub" title="GitHub" />
</picture>
</a>&nbsp;
<a href="https://instagram.com/frankfesevur" title="Instagram">
<picture>
<source srcset="{% link assets/images/logos/instagram-black.svg %}" media="(prefers-color-scheme: light)">
<img src="{% link assets/images/logos/instagram-white.svg %}" alt="Instagram" title="Instagram" />
</picture>
</a>&nbsp;
<a href="https://www.facebook.com/frank.fesevur.3" title="Facebook"><img src="{% link assets/images/logos/facebook.svg %}" alt="Facebook" title="Facebook" /></a>&nbsp;
<a href="https://twitter.com/FraCaMen" title="Twitter"><img src="{% link assets/images/logos/twitter.svg %}" alt="Twitter" title="Twitter" /></a>
</p>
......
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
version="1.1" viewBox="0 0 11.492911 11.209466" height="40px" width="40px">
<defs>
<clipPath clipPathUnits="userSpaceOnUse">
<path d="M 0,0 H 5309.73 V 4999.88 H 0 Z" />
</clipPath>
</defs>
<g transform="translate(194.48968,-147.32864)" id="layer1">
<path d="m -188.74363,147.32864 c -3.17289,0 -5.74605,2.5728 -5.74605,5.74675 0,2.53894 1.64642,4.69265 3.92995,5.45253 0.28751,0.0529 0.39229,-0.12453 0.39229,-0.27693 0,-0.13653 -0.005,-0.49777 -0.008,-0.9772 -1.59844,0.34714 -1.9357,-0.77046 -1.9357,-0.77046 -0.2614,-0.66393 -0.63817,-0.84067 -0.63817,-0.84067 -0.52176,-0.35631 0.0395,-0.34925 0.0395,-0.34925 0.57679,0.0406 0.88018,0.59231 0.88018,0.59231 0.51259,0.87807 1.34514,0.62442 1.67252,0.47731 0.0522,-0.37112 0.20073,-0.62442 0.36477,-0.768 -1.27599,-0.14499 -2.61761,-0.63817 -2.61761,-2.84021 0,-0.62724 0.22402,-1.14053 0.59161,-1.54199 -0.0593,-0.14535 -0.25647,-0.7299 0.0564,-1.52083 0,0 0.48225,-0.15451 1.5801,0.58914 0.45825,-0.1277 0.95003,-0.1912 1.43862,-0.19367 0.48825,0.002 0.97967,0.066 1.43863,0.19367 1.09714,-0.74365 1.57868,-0.58914 1.57868,-0.58914 0.31362,0.79093 0.11642,1.37548 0.0575,1.52083 0.3683,0.40146 0.59055,0.91475 0.59055,1.54199 0,2.20768 -1.34374,2.69346 -2.62361,2.83563 0.20602,0.17744 0.38982,0.52811 0.38982,1.06398 0,0.76835 -0.007,1.38818 -0.007,1.57656 0,0.15381 0.10372,0.33267 0.39511,0.27658 2.28177,-0.76165 3.92677,-2.91395 3.92677,-5.45218 0,-3.17395 -2.57316,-5.74675 -5.7471,-5.74675" style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.03527778" />
</g>
</svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
version="1.1" viewBox="0 0 177.74393 177.74393" height="40px" width="40px">
<g transform="translate(319.43743,-66.764939)">
<path d="m -230.5653,66.764939 c -24.13634,0 -27.16282,0.102306 -36.64196,0.534812 -9.45939,0.431447 -15.91981,1.933928 -21.57283,4.130675 -5.84411,2.271183 -10.80022,5.310011 -15.74105,10.250664 -4.94068,4.940653 -7.97951,9.897182 -10.25066,15.741299 -2.19687,5.652911 -3.69921,12.113331 -4.13095,21.572711 -0.43243,9.47914 -0.53468,12.50562 -0.53468,36.64198 0,24.136 0.10225,27.16248 0.53468,36.64162 0.43174,9.45938 1.93408,15.9198 4.13095,21.57268 2.27115,5.84411 5.30998,10.80036 10.25066,15.74133 4.94083,4.94065 9.89694,7.97952 15.74105,10.25066 5.65302,2.19673 12.11344,3.69921 21.57283,4.13067 9.47914,0.43243 12.50562,0.53482 36.64196,0.53482 24.136,0 27.16248,-0.10239 36.64162,-0.53482 9.45939,-0.43146 15.91981,-1.93394 21.57272,-4.13067 5.84412,-2.27114 10.80029,-5.31001 15.7413,-10.25066 4.94065,-4.94097 7.97948,-9.89722 10.25066,-15.74133 2.19675,-5.65288 3.69923,-12.1133 4.13068,-21.57268 0.4325,-9.47914 0.53481,-12.50562 0.53481,-36.64162 0,-24.13636 -0.10231,-27.16284 -0.53481,-36.64198 -0.43145,-9.45938 -1.93393,-15.9198 -4.13068,-21.572711 -2.27118,-5.844117 -5.31001,-10.800646 -10.25066,-15.741299 -4.94101,-4.940653 -9.89718,-7.979481 -15.7413,-10.250664 -5.65291,-2.196747 -12.11333,-3.699228 -21.57272,-4.130675 -9.47914,-0.432506 -12.50562,-0.534812 -36.64162,-0.534812 z m 0,16.012938 c 23.7296,0 26.54054,0.09066 35.91173,0.51823 8.66492,0.395111 13.37063,1.842911 16.50224,3.059995 4.14831,1.612194 7.10882,3.538008 10.21856,6.647745 3.11009,3.110089 5.0359,6.0706 6.6481,10.218913 1.21708,3.13161 2.66488,7.83731 3.05999,16.50224 0.42757,9.37119 0.51823,12.18212 0.51823,35.91208 0,23.7296 -0.0907,26.54053 -0.51823,35.91172 -0.39511,8.66493 -1.84291,13.37063 -3.05999,16.50224 -1.6122,4.14835 -3.53801,7.10879 -6.6481,10.2186 -3.10974,3.11008 -6.07025,5.0359 -10.21856,6.64806 -3.13161,1.21708 -7.83732,2.66485 -16.50224,3.05992 -9.36978,0.42764 -12.18036,0.5183 -35.91173,0.5183 -23.73171,0 -26.54194,-0.0907 -35.91207,-0.5183 -8.66493,-0.39507 -13.37063,-1.84284 -16.50224,-3.05992 -4.14835,-1.61216 -7.10879,-3.53798 -10.21859,-6.64806 -3.10981,-3.10981 -5.03591,-6.07025 -6.64807,-10.2186 -1.21708,-3.13161 -2.6647,-7.83731 -3.06006,-16.50224 -0.4276,-9.37119 -0.51816,-12.18212 -0.51816,-35.91172 0,-23.72996 0.0906,-26.54089 0.51816,-35.91208 0.39536,-8.66493 1.84298,-13.37063 3.06006,-16.50224 1.61216,-4.148313 3.53812,-7.108824 6.64793,-10.218561 3.10994,-3.110089 6.07038,-5.035903 10.21873,-6.648097 3.13161,-1.217084 7.83731,-2.664884 16.50224,-3.059995 9.37119,-0.427567 12.18213,-0.51823 35.91207,-0.51823" style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.03527778" />
<path d="m -230.5653,185.26089 c -16.36112,0 -29.62416,-13.26304 -29.62416,-29.62381 0,-16.36113 13.26304,-29.62417 29.62416,-29.62417 16.36078,0 29.62381,13.26304 29.62381,29.62417 0,16.36077 -13.26303,29.62381 -29.62381,29.62381 z m 0,-75.26091 c -25.20491,0 -45.63709,20.43218 -45.63709,45.6371 0,25.20456 20.43218,45.63674 45.63709,45.63674 25.20457,0 45.63675,-20.43218 45.63675,-45.63674 0,-25.20492 -20.43218,-45.6371 -45.63675,-45.6371" style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.03527778" />
<path d="m -172.46068,108.19693 c 0,5.88998 -4.77484,10.66447 -10.66482,10.66447 -5.88963,0 -10.66447,-4.77449 -10.66447,-10.66447 0,-5.88998 4.77484,-10.664827 10.66447,-10.664827 5.88998,0 10.66482,4.774847 10.66482,10.664827" style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.03527778" />
</g>
</svg>