...
 
Commits (5)
source 'https://rubygems.org'
gem "jekyll", "~> 4.0.0"
gem "jekyll", "~> 4.1.0"
group :jekyll_plugins do
gem 'jekyll_version_plugin'
gem 'jekyll-sitemap'
gem 'jekyll-postfiles'
gem 'jekyll-feed'
end
name: "Frank Fesevur"
description: "This is website of Frank Fesevur, the home of NppSnippets, IndentByFold and NppTags"
permalink: pretty
author: "Frank Fesevur"
downloadUrl: https://downloads.fesevur.com
strict_front_matter: true
exclude:
......@@ -11,3 +12,6 @@ sass:
style: compressed
plugins:
- jekyll-sitemap
- jekyll-feed
feed:
excerpt_only: true
......@@ -12,7 +12,7 @@
<link rel="stylesheet" href="{% link assets/css/bundle.scss %}">
<link rel="icon" href="{% link assets/images/favicon.ico %}" type="image/x-icon">
<link rel="canonical" href="{{ page.url | absolute_url }}">
<link rel="alternate" type="application/rss+xml" title="Frank&#39;s weblog" href="{% link feed.xml %}">
{% feed_meta %}
</head>
<body>
......
---
layout: post
title: To a dark theme (and back, if you prefer)
title: Back to the light theme, if you prefer
date: 2020-06-21 18:06:21 +02:00
lang: en
tags:
- website
- dark theme
- light theme
- prefers-color-scheme
- SASS
- SCSS
- CSS variables
---
Back in september [I converted](https://gitlab.com/ffes/ffes.gitlab.io/-/commit/d57220931397ed7213ac850c89e0f0dbd0a90f01) the look of my website to dark theme.
Back in September 2019 [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).
A while ago I found out that most modern operating 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 as a side effect bring back the light theme (if you prefer that).
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.
But since most of my visitors 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
## How I did it
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.
The `prefers-color-scheme` setting is not too difficult to implement, but there are a couple of things you need to think of.
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`.
First of all since the site need to be able to dynamically change from light to dark and back you cannot simply hardcode the color in the CSS.
It is best to use CSS variables to define all the colors.
I gave the variables names based on their use like `--text-color` and `--bg-color`.
```css
/* The dark theme is the default theme */
......@@ -53,7 +52,7 @@ I use names like `--text-color` and `--bg-color`.
:root {
--bg-color: #fdfdfd;
--text-color: #000000;
--highlight-color: #fdfdfd;
--highlight-color: #293134;
--nav-bg-color: #000000;
--nav-text-color: #c8c8c8;
--nav-highlight-color: #fdfdfd;
......@@ -64,7 +63,7 @@ I use names like `--text-color` and `--bg-color`.
}
```
After that replace all the colors, in my case the SASS variables, with these CSS variables.
After that I had to replace all the colors with these CSS variables.
```css
body {
......@@ -75,13 +74,17 @@ body {
}
```
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.
Nice plus is that the new variables names make the SCSS easier to understand what will happen.
And since my website is quite simple that is all I had to do.
Well, when it comes down to SASS and CSS.
If you want to use SASS variables to define the RGB values you can use them, but 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.
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.
My website is quite simple, so that is all I had to do. Well, when it comes to SASS and CSS.
Back in September I also replaced the social media logos with SVGs on my [About page]({% link about.html %}).
So I only had black versions of the GitHub logo and of the Instagram logo.
For now I created two versions of the logo: a black one and a white one.
And based on the `prefers-color-scheme` the default image is overwritten using the `<picture>` tag.
Maybe one day I will include the SVGs as inline images and use CSS to replace the colors.
```html
<picture>
......@@ -89,3 +92,5 @@ For now I created two versions of the logo. A black and a white one. And based o
<img src="assets/images/logos/github-white.svg" alt="GitHub" title="GitHub" />
</picture>
```
With a little over an hour the site respected the preference of the user.
......@@ -26,7 +26,7 @@ $green: #619e57;
:root {
--bg-color: #{$white};
--text-color: #{$black};
--highlight-color: #{$white};
--highlight-color: #{$dark_grey};
--nav-bg-color: #{$black};
--nav-text-color: #{$light_grey};
--nav-highlight-color: #{$white};
......
---
---
<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
<channel>
<title>{{ site.title | xml_escape }}</title>
{% if site.description %}<description>{{ site.description | xml_escape }}</description>{% endif %}
<link>{{ site.url }}</link>
<atom:link href="{{ site.url }}/{{ page.path }}" rel="self" type="application/rss+xml" />
{% for post in site.posts limit:10 %}
<item>
<title>{% if post.series %}{{ post.series | xml_escape }} - {% endif %}{{ post.title | xml_escape }}</title>
<dc:creator>{% if post.author %}{{ post.author | xml_escape }}{% else %}Frank Fesevur{% endif %}</dc:creator>
<description>{% if post.excerpt %}{{ post.excerpt | xml_escape }}{% else %}{{ post.content | xml_escape }}{% endif %}</description>
<pubDate>{{ post.date | date_to_rfc822 }}</pubDate>
<link>{{ site.url }}{{ post.url }}</link>
<guid isPermaLink="true">{{ site.url }}{{ post.url }}</guid>
</item>
{% endfor %}
</channel>
</rss>
......@@ -27,7 +27,7 @@ description: NppJavaScript is a GPLv2 licensed plug-in for Notepad++ to extend i
<h2>Sample script</h2>
<pre>beginUndoAction();<br/>insertText("We started here.");<br/>var i;<br/>for (i = 0; i &lt; 3; i++)<br/> lineUp();<br/>insertText("We went up three lines.");<br/>endUndoAction();<br/>alert("done");<br/></pre>
<pre class="highlight">beginUndoAction();<br/>insertText("We started here.");<br/>var i;<br/>for (i = 0; i &lt; 3; i++)<br/> lineUp();<br/>insertText("We went up three lines.");<br/>endUndoAction();<br/>alert("done");<br/></pre>
<h2>Why JavaScript?</h2>
......