feat: add dark mode (#109)

exampleSite/config.yaml

@@ -84,4 +84,5 @@ params:
   geekblogPrivacyPolicy: https://thegeeklab.de/legal-notice/#privacy-policy
 
   geekblogImageLazyLoading: true
+  geekblogDarkModeDim: true
   geekblogTagsToMenu: true

exampleSite/content/posts/features/code-blocks.md

@@ -0,0 +1,101 @@
+---
+title: Code Blocks
+date: 2021-11-21T15:00:00+01:00
+authors:
+  - john-doe
+tags:
+  - Documentation
+  - Features
+---
+
+There are several ways to add code blocks. Most of them work out of the box, only the Hugo short code `<highlight>` needs to be configured to work properly. The theme also provides some additional features like a copy button and an option to set the maximum length of code blocks. Both of these functions and the dependent formatting rely on the `.highlight` CSS class. You must ensure that you always assign a language to your code blocks if you want to use these functions. If you do not want to apply syntax highlighting, you can also specify `plain` or `text` as the language.
+
+{{< toc >}}
+
+## Inline code
+
+To display an inline shortcode use single quotes:
+
+```plain
+`some code`
+```
+
+**Example:** `some code`
+
+## Code blocks
+
+Code blocks can be uses without language specification:
+
+````markdown
+```Plain
+some code
+```
+````
+
+**Example:**
+
+```Plain
+some code
+```
+
+... or if you need language specific syntax highlighting:
+
+````markdown
+```Shell
+# some code
+echo "Hello world"
+```
+````
+
+**Example:**
+
+```Shell
+# some code
+echo "Hello World"
+```
+
+## Highlight shortcode
+
+Hugo has a build-in shortcode for syntax highlighting. To work properly with this theme, you have to set following options in your site configuration:
+
+{{< tabs "uniqueid" >}}
+{{< tab "TOML" >}}
+
+```TOML
+pygmentsUseClasses=true
+pygmentsCodeFences=true
+```
+
+{{< /tab >}}
+{{< tab "YAML" >}}
+
+```YAML
+pygmentsUseClasses: true
+pygmentsCodeFences: true
+```
+
+{{< /tab >}}
+{{< /tabs >}}
+
+You can use it like every other shortcode:
+
+<!-- prettier-ignore -->
+```markdown
+{{</* highlight Shell "linenos=table" */>}}
+# some code
+echo "Hello World"
+{{</* /highlight */>}}
+```
+
+**Example:**
+
+<!-- markdownlint-disable -->
+
+<!-- prettier-ignore-start -->
+{{< highlight Shell "linenos=table" >}}
+# some code
+echo "Hello World"
+{{< /highlight >}}
+<!-- prettier-ignore-end-->
+
+<!-- markdownlint-enable -->

exampleSite/content/posts/features/dark-mode/index.md

@@ -0,0 +1,19 @@
+---
+title: Dark Mode
+date: 2021-11-21T15:00:00+01:00
+authors:
+  - john-doe
+tags:
+  - Documentation
+  - Features
+---
+
+Say hello to the dark mode of the Geekblog theme!
+
+[![Geekblog in dark mode](images/geekblog-dark.png)](images/geekblog-dark.png)
+
+The dark mode can be used in two different ways. If you have JavaScript disabled in your browser, the dark mode automatically detects the preferred system settings via the `prefers-color-scheme` parameter. Depending on the value, the theme will automatically switch between dark and light mode if this feature is supported by your operating system and browser.
+
+The second mode requires JavaScript and is controlled by a dark mode switch in the upper right corner. You can switch between three modes: Auto, Dark and Light. Auto mode works the same as the first method mentioned above and automatically detects the system setting. Dark and Light modes allow you to force one of them for your Geekblog page only, regardless of the system setting. This works even if your browser or operating system does not support the system setting. The current selection is stored locally via the Web Storage API.
+
+To avoid very bright spots often caused by images while using the dark mode we have added an optional auto-dim feature that can be enabled with the site parameter `geekblogDarkModeDim` (see [Configuration](/posts/usage/configuration/)). As this may have an impact on the quality of the images it is disabled by default.

exampleSite/content/posts/features/theming/index.md

@@ -8,12 +8,24 @@ tags:
   - Features
 ---
 
-Personalize the look of your site.
-
-<!--more-->
-
 {{< toc >}}
 
+## Color Scheme
+
+If you want to customize the theme's color scheme to give it your individual touch, you are only a few lines of CSS away. Generally, you need to override the default settings. The easiest way to do this is to create a file named `static/custom.css` right at the root of your site.
+
+All the necessary CSS customization properties are listed below. If you want to customize elements that don't use these properties, you can always look up the class name and override it directly. For inspiration, you can also take a look at [https://www.color-hex.com/color-palettes/](https://www.color-hex.com/). In this simple example, we'll use the [_Beach_](https://www.color-hex.com/color-palette/895) color palette.
+
+[![Beach Color Palette](images/theme-example.png)](images/theme-example.png)
+
+**Custom CSS:**
+
+<!-- prettier-ignore-start -->
+<!-- spellchecker-disable -->
+{{< include file="/static/custom.css.example" language="CSS" options="linenos=table" >}}
+<!-- spellchecker-enable -->
+<!-- prettier-ignore-end -->
+
 ## Favicons
 
 The Theme is shipped with a set of default Favicons in various formats generated by a [Favicon Generator](https://realfavicongenerator.net/). All files can be found in the `static/favicon` folder of the release tarball. To make the replacement of the default Favicons as simple as possible, the theme loads only a very small subset of the Favicon formats.
@@ -51,3 +63,5 @@ If you want to add more Favicon formats you have to [overwrite](https://gohugo.i
 <meta name="msapplication-TileColor" content="#2f333e">
 <meta name="theme-color" content="#2f333e">
 ```
+
+Happy customizing!

exampleSite/content/posts/post-with-images/index.md

@@ -78,7 +78,7 @@ resources:
       credits: "[Jay Mantri](https://unsplash.com/@jaymantri) on [Unsplash](https://unsplash.com/s/photos/forest)"
 ---
 
-{{</* img name="forest-1" size="large" lazy=false */>}}
+{{</* img name="forest-1" lazy=false */>}}
 ```
 
 <!-- spellchecker-enable -->

exampleSite/content/posts/usage/configuration.md

@@ -120,6 +120,10 @@ enableRobotsTXT = true
   # (Optional, default true) Enable or disable adding tags automatically to the main menu.
   geekblogTagsToMenu = true
 
+  # (Optional, default false) Auto-decrease brightness of images and add a slightly grayscale to avoid
+  # bright spots while using the dark mode.
+  geekblogDarkModeDim = false
+
   # (Optional, default none) Adds a "Hosted on <provider>" line to the footer.
   # Could be used if you want to give credits to your hosting provider.
   [params.geekblogHostedOn]
@@ -138,9 +142,9 @@ enableRobotsTXT = true
 
 ```Yaml
 ---
-# ...
-
-theme: hugo-geekblog
+baseURL: "http://localhost"
+title: "Geekblog"
+theme: "hugo-geekblog"
 
 paginate: 5
 pluralizeListTitles: false
@@ -245,6 +249,10 @@ params:
   # (Optional, default true) Enable or disable adding tags automatically to the main menu.
   geekblogTagsToMenu: true
 
+  # (Optional, default false) Auto-decrease brightness of images and add a slightly grayscale to avoid
+  # bright spots while using the dark mode.
+  geekblogDarkModeDim: false
+
   # (Optional, default none) Adds a "Hosted on <provider>" line to the footer.
   # Could be used if you want to give credits to your hosting provider.
   geekblogHostedOn:

exampleSite/content/posts/usage/getting-started.md

@@ -249,6 +249,7 @@ There are a lot more things to discover. To get the most out of the Theme we hav
 - [Configuration](/posts/usage/configuration/)
 - [Menus](/posts/usage/menus/)
 - **Features**
+  - [Code Blocks](/posts/features/code-blocks/)
   - [Icon Sets](/posts/features/icon-sets/)
   - [Theming](/posts/features/theming/)
   - [Authors](/posts/features/authors/)

exampleSite/static/custom.css

@@ -1,3 +1,7 @@
+:root {
+  --code-max-height: 60rem;
+}
+
 .icon-grid {
   width: 8rem;
   height: 8rem;

exampleSite/static/custom.css.example

@@ -0,0 +1,150 @@
+/* Global customization */
+
+:root {
+  --code-max-height: 60rem;
+}
+
+/* Light mode theming */
+:root,
+:root[color-mode="light"] {
+  --header-background: #4ec58a;
+  --header-font-color: #ffffff;
+
+  --body-background: #ffffff;
+  --body-font-color: #343a40;
+
+  --mark-color: #ffab00;
+
+  --button-background: #62cb97;
+  --button-border-color: #4ec58a;
+
+  --link-color: #518169;
+  --link-color-visited: #c54e8a;
+
+  --code-background: #f5f6f8;
+  --code-accent-color: #e3e7eb;
+  --code-accent-color-lite: #eff1f3;
+
+  --code-copy-font-color: #6b7784;
+  --code-copy-border-color: #adb4bc;
+  --code-copy-success-color: #00c853;
+
+  --accent-color-dark: #868e96;
+  --accent-color: #e9ecef;
+  --accent-color-lite: #f8f9fa;
+
+  --control-icons: #b2bac1;
+
+  --footer-background: #2f333e;
+  --footer-font-color: #ffffff;
+  --footer-link-color: #ffcc5c;
+  --footer-link-color-visited: #ffcc5c;
+}
+@media (prefers-color-scheme: light) {
+  :root {
+    --header-background: #4ec58a;
+    --header-font-color: #ffffff;
+
+    --body-background: #ffffff;
+    --body-font-color: #343a40;
+
+    --mark-color: #ffab00;
+
+    --button-background: #62cb97;
+    --button-border-color: #4ec58a;
+
+    --link-color: #518169;
+    --link-color-visited: #c54e8a;
+
+    --code-background: #f5f6f8;
+    --code-accent-color: #e3e7eb;
+    --code-accent-color-lite: #eff1f3;
+
+    --code-copy-font-color: #6b7784;
+    --code-copy-border-color: #adb4bc;
+    --code-copy-success-color: #00c853;
+
+    --accent-color-dark: #868e96;
+    --accent-color: #e9ecef;
+    --accent-color-lite: #f8f9fa;
+
+    --control-icons: #b2bac1;
+
+    --footer-background: #2f333e;
+    --footer-font-color: #ffffff;
+    --footer-link-color: #ffcc5c;
+    --footer-link-color-visited: #ffcc5c;
+  }
+}
+
+/* Dark mode theming */
+:root[color-mode="dark"] {
+  --header-background: #4ec58a;
+  --header-font-color: #ffffff;
+
+  --body-background: #343a40;
+  --body-font-color: #ced3d8;
+
+  --mark-color: #ffab00;
+
+  --button-background: #62cb97;
+  --button-border-color: #4ec58a;
+
+  --link-color: #7ac29e;
+  --link-color-visited: #c27a9e;
+
+  --code-background: #2f353a;
+  --code-accent-color: #262b2f;
+  --code-accent-color-lite: #2b3035;
+
+  --code-copy-font-color: #adb4bc;
+  --code-copy-border-color: #808c98;
+  --code-copy-success-color: #00c853;
+
+  --accent-color-dark: #222629;
+  --accent-color: #2b3035;
+  --accent-color-lite: #2f353a;
+
+  --control-icons: #b2bac1;
+
+  --footer-background: #2f333e;
+  --footer-font-color: #ffffff;
+  --footer-link-color: #ffcc5c;
+  --footer-link-color-visited: #ffcc5c;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --header-background: #4ec58a;
+    --header-font-color: #ffffff;
+
+    --body-background: #343a40;
+    --body-font-color: #ced3d8;
+
+    --mark-color: #ffab00;
+
+    --button-background: #62cb97;
+    --button-border-color: #4ec58a;
+
+    --link-color: #7ac29e;
+    --link-color-visited: #c27a9e;
+
+    --code-background: #2f353a;
+    --code-accent-color: #262b2f;
+    --code-accent-color-lite: #2b3035;
+
+    --code-copy-font-color: #adb4bc;
+    --code-copy-border-color: #808c98;
+    --code-copy-success-color: #00c853;
+
+    --accent-color-dark: #222629;
+    --accent-color: #2b3035;
+    --accent-color-lite: #2f353a;
+
+    --control-icons: #b2bac1;
+
+    --footer-background: #2f333e;
+    --footer-font-color: #ffffff;
+    --footer-link-color: #ffcc5c;
+    --footer-link-color-visited: #ffcc5c;
+  }
+}

layouts/_default/baseof.html

@@ -16,7 +16,7 @@
 <body>
     {{ partial "svg-icon-symbols" . }}
 
-    <div class="wrapper">
+    <div class="wrapper {{ if default false .Site.Params.GeekblogDarkModeDim }}dark-mode-dim{{ end }}">
         {{ partial "site-header" . }}
 
         <main class="gblog-page container">

layouts/partials/content.html

@@ -1 +1,4 @@
-{{ .Content | replaceRE `<nav id="TableOfContents">\s*<ul>\s*<li>\s*<ul>` `<nav id="TableOfContents"><ul>` | replaceRE `</ul>\s*</li>\s*</ul>\s*</nav>` `</ul></nav>` | safeHTML }}
+{{- $content := .Content -}}
+{{- $content = $content | replaceRE `<nav id="TableOfContents">\s*<ul>\s*<li>\s*<ul>` `<nav id="TableOfContents"><ul>` | replaceRE `</ul>\s*</li>\s*</ul>\s*</nav>` `</ul></nav>` | safeHTML -}}
+{{- $content = $content | replaceRE `(<table>(?:.|\n)+?</table>)` `<div class=table-wrap> ${1} </div>` | safeHTML -}}
+{{- $content -}}

layouts/partials/head/others.html

@@ -1,3 +1,5 @@
+<script src="{{ index .Site.Data.assets "js/darkmode.min.js" | relURL }}"></script>
+
 <link rel="preload" as="font" href="{{ "fonts/Metropolis.woff2" | relURL }}" type="font/woff2" crossorigin="anonymous">
 <link rel="preload" as="font" href="{{ "fonts/LiberationSans.woff2" | relURL }}" type="font/woff2" crossorigin="anonymous">
 

layouts/partials/site-header.html

@@ -1,14 +1,33 @@
 <header class="gblog-header">
-    <div class="container flex align-center justify-center">
-        <a class="gblog-header__link" rel="me" href="{{ .Site.BaseURL }}">
-            <span class="gblog-brand flex align-center justify-center">
-                <img class="gblog-brand__img" src="{{ (default "brand.svg" .Site.Params.logo) | relURL }}" alt="">
-                {{ .Site.Title }}
+    <div class="container flex flex-wrap">
+        <div class="gblog-header__col-1 flex justify-start hidden-mobile"></div>
+        <div class="gblog-header__col-2 flex align-center justify-center ">
+            <a class="gblog-header__link" rel="me" href="{{ .Site.BaseURL }}">
+                <span class="gblog-brand flex align-center justify-center">
+                    <img class="gblog-brand__img" src="{{ (default "brand.svg" .Site.Params.logo) | relURL }}" alt="">
+                    {{ .Site.Title }}
+                </span>
+                {{ with .Site.Params.subtitle }}
+                <span class="gblog-brand__subtitle flex align-center justify-center">{{ . }}</span>
+                {{ end }}
+            </a>
+        </div>
+        <div class="gblog-header__col-3 flex justify-end">
+            <span id="gblog-dark-mode">
+                <svg class="icon gblog_brightness_dark">
+                    <title>{{ i18n "button_toggle_dark" }}</title>
+                    <use xlink:href="#gblog_brightness_dark"></use>
+                </svg>
+                <svg class="icon gblog_brightness_light">
+                    <title>{{ i18n "button_toggle_dark" }}</title>
+                    <use xlink:href="#gblog_brightness_light"></use>
+                </svg>
+                <svg class="icon gblog_brightness_auto">
+                    <title>{{ i18n "button_toggle_dark" }}</title>
+                    <use xlink:href="#gblog_brightness_auto"></use>
+                </svg>
             </span>
-            {{ with .Site.Params.subtitle }}
-            <span class="gblog-brand__subtitle flex align-center justify-center">{{ . }}</span>
-            {{ end }}
-        </a>
+        </div>
     </div>
 </header>
 <nav class="gblog-nav">
@@ -17,7 +36,7 @@
         <label for="menu-control" class="flex align-center justify-center">
             <svg class="icon gblog_menu"><use xlink:href="#gblog_menu"></use></svg>
             <svg class="icon gblog_clear"><use xlink:href="#gblog_clear"></use></svg>
-            <span>Nav</span>
+            <span>Navigation</span>
         </label>
     </div>
     <ul class="gblog-nav__list container flex flex-wrap justify-center menu-content">

src/iconfont/uEA1C-brightness_auto.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-7.27 -7.27 42.55 42.55"><path d="M16.846 18.938h2.382L15.22 7.785h-2.44L8.772 18.938h2.382l.871-2.44h3.95zm7.087-9.062L27.999 14l-4.066 4.124v5.809h-5.809L14 27.999l-4.124-4.066H4.067v-5.809L.001 14l4.066-4.124V4.067h5.809L14 .001l4.124 4.066h5.809v5.809zm-11.385 4.937L14 10.282l1.452 4.531h-2.904z"/></svg>

src/iconfont/uEA1D-brightness_dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-7.27 -7.27 42.55 42.55"><path d="M14 21.435q3.079 0 5.257-2.178T21.435 14t-2.178-5.257T14 6.565q-1.51 0-3.079.697 1.917.871 3.108 2.701T15.22 14t-1.191 4.037-3.108 2.701q1.568.697 3.079.697zm9.933-11.559L27.999 14l-4.066 4.124v5.809h-5.809L14 27.999l-4.124-4.066H4.067v-5.809L.001 14l4.066-4.124V4.067h5.809L14 .001l4.124 4.066h5.809v5.809z"/></svg>

src/iconfont/uEA1E-brightness_light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-7.27 -7.27 42.55 42.55"><path d="M14 21.435q3.079 0 5.257-2.178T21.435 14t-2.178-5.257T14 6.565 8.743 8.743 6.565 14t2.178 5.257T14 21.435zm9.933-3.311v5.809h-5.809L14 27.999l-4.124-4.066H4.067v-5.809L.001 14l4.066-4.124V4.067h5.809L14 .001l4.124 4.066h5.809v5.809L27.999 14z"/></svg>

src/icons/brightness_auto.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 28 28">
+<title>brightness_auto</title>
+<path d="M16.846 18.938h2.382l-4.008-11.153h-2.44l-4.008 11.153h2.382l0.871-2.44h3.95zM23.933 9.876l4.066 4.124-4.066 4.124v5.809h-5.809l-4.124 4.066-4.124-4.066h-5.809v-5.809l-4.066-4.124 4.066-4.124v-5.809h5.809l4.124-4.066 4.124 4.066h5.809v5.809zM12.548 14.813l1.452-4.531 1.452 4.531h-2.904z"></path>
+</svg>

src/icons/brightness_dark.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 28 28">
+<title>brightness_dark</title>
+<path d="M14 21.435q3.079 0 5.257-2.178t2.178-5.257-2.178-5.257-5.257-2.178q-1.51 0-3.079 0.697 1.917 0.871 3.108 2.701t1.191 4.037-1.191 4.037-3.108 2.701q1.568 0.697 3.079 0.697zM23.933 9.876l4.066 4.124-4.066 4.124v5.809h-5.809l-4.124 4.066-4.124-4.066h-5.809v-5.809l-4.066-4.124 4.066-4.124v-5.809h5.809l4.124-4.066 4.124 4.066h5.809v5.809z"></path>
+</svg>

src/icons/brightness_light.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 28 28">
+<title>brightness_light</title>
+<path d="M14 21.435q3.079 0 5.257-2.178t2.178-5.257-2.178-5.257-5.257-2.178-5.257 2.178-2.178 5.257 2.178 5.257 5.257 2.178zM23.933 18.124v5.809h-5.809l-4.124 4.066-4.124-4.066h-5.809v-5.809l-4.066-4.124 4.066-4.124v-5.809h5.809l4.124-4.066 4.124 4.066h5.809v5.809l4.066 4.124z"></path>
+</svg>

src/js/darkmode.js

@@ -0,0 +1,51 @@
+const DARK_MODE = "dark";
+const LIGHT_MODE = "light";
+const AUTO_MODE = "auto";
+const THEME = "hugo-geekblog";
+
+const TOGGLE_MODES = [AUTO_MODE, DARK_MODE, LIGHT_MODE];
+
+(applyTheme = function (init = true) {
+  let html = document.documentElement;
+  let currentMode = TOGGLE_MODES.includes(localStorage.getItem(THEME))
+    ? localStorage.getItem(THEME)
+    : AUTO_MODE;
+
+  html.setAttribute("class", "color-toggle-" + currentMode);
+  localStorage.setItem(THEME, currentMode);
+
+  if (currentMode === AUTO_MODE) {
+    html.removeAttribute("color-mode");
+  } else {
+    html.setAttribute("color-mode", currentMode);
+  }
+
+  if (!init) {
+    // Reload required to re-initialise e.g. Mermaid with the new theme and re-parse the Mermaid code blocks.
+    location.reload();
+  }
+})();
+
+document.addEventListener("DOMContentLoaded", (event) => {
+  const darkModeToggle = document.getElementById("gblog-dark-mode");
+
+  darkModeToggle.onclick = function () {
+    let currentMode = localStorage.getItem(THEME);
+    let nextMode = toggle(TOGGLE_MODES, currentMode);
+
+    localStorage.setItem(THEME, TOGGLE_MODES[nextMode]);
+    applyTheme(false);
+  };
+});
+
+function toggle(list = [], value) {
+  current = list.indexOf(value);
+  max = list.length - 1;
+  next = 0;
+
+  if (current < max) {
+    next = current + 1;
+  }
+
+  return next;
+}

src/js/mermaid-loader.js

@@ -1,7 +1,17 @@
 document.addEventListener("DOMContentLoaded", function (event) {
+  let currentMode = localStorage.getItem(THEME);
+  let darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
   let primaryColor = "#ececff";
   let darkMode = false;
 
+  if (
+    currentMode === DARK_MODE ||
+    (currentMode === AUTO_MODE && darkModeQuery.matches)
+  ) {
+    primaryColor = "#6C617E";
+    darkMode = true;
+  }
+
   mermaid.initialize({
     flowchart: { useMaxWidth: true },
     theme: "base",

src/sass/_base.scss

@@ -1,7 +1,78 @@
+:root,
+:root[color-mode="light"] {
+  --code-max-height: auto;
+
+  @include light_mode;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    @include light_mode;
+  }
+}
+
+:root[color-mode="dark"] {
+  @include dark_mode;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    @include dark_mode;
+  }
+}
+
 html {
   font-size: $font-size-base;
   letter-spacing: 0.33px;
   scroll-behavior: smooth;
+
+  &.color-toggle-hidden {
+    #gblog-dark-mode {
+      .gblog_brightness_auto,
+      .gblog_brightness_dark,
+      .gblog_brightness_light {
+        display: none;
+      }
+    }
+  }
+
+  &.color-toggle-light {
+    #gblog-dark-mode {
+      .gblog_brightness_light {
+        display: inline-block;
+      }
+      .gblog_brightness_auto,
+      .gblog_brightness_dark {
+        display: none;
+      }
+    }
+  }
+
+  &.color-toggle-dark {
+    #gblog-dark-mode {
+      .gblog_brightness_dark {
+        display: inline-block;
+      }
+      .gblog_brightness_auto,
+      .gblog_brightness_light {
+        display: none;
+      }
+    }
+  }
+
+  &.color-toggle-auto {
+    #gblog-dark-mode {
+      .gblog_brightness_light {
+        display: none;
+      }
+      .gblog_brightness_dark {
+        display: none;
+      }
+      .gblog_brightness_auto {
+        display: inline-block;
+      }
+    }
+  }
 }
 
 html,
@@ -11,8 +82,8 @@ body {
 }
 
 body {
-  color: $body-font-color;
-  background: $body-background;
+  color: var(--body-font-color);
+  background: var(--body-background);
 
   font-weight: $body-font-weight;
 
@@ -35,11 +106,6 @@ h6 {
   font-weight: 600;
   display: flex;
   align-items: center;
-
-  > code {
-    border-top: 3px solid $gray-300;
-    font-size: 0.75em !important;
-  }
 }
 
 h4,
@@ -50,16 +116,21 @@ h6 {
 
 a {
   text-decoration: underline;
-  color: $color-link;
+  color: var(--link-color);
 
   &:hover {
-    background: $color-link;
-    color: $white !important;
+    background: var(--link-color);
+    color: $gray-100;
     text-decoration: none;
   }
 
   &:visited {
-    color: $color-link;
+    color: var(--link-color-visited);
+
+    &:hover {
+      background: var(--link-color-visited);
+      color: $gray-100;
+    }
   }
 }
 
@@ -67,8 +138,17 @@ img {
   vertical-align: middle;
 }
 
+#gblog-dark-mode {
+  cursor: pointer;
+
+  .icon {
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+}
+
 .fake-link {
-  background-image: linear-gradient($color-link, $color-link);
+  background-image: linear-gradient(var(--link-color), var(--link-color));
   background-position: 0 100%;
   background-size: 100% 1px;
   background-repeat: no-repeat;
@@ -100,10 +180,19 @@ img {
 }
 
 .gblog-header {
-  background: $main-color;
-  color: $white;
+  background: var(--header-background);
+  color: var(--header-font-color);
   padding: $padding-16 0;
 
+  &__col-1,
+  &__col-3 {
+    flex: 1 1 15%;
+  }
+
+  &__col-2 {
+    flex: 1 1 70%;
+  }
+
   &__link,
   &__link:visited {
     color: inherit;
@@ -116,11 +205,11 @@ img {
 }
 
 .gblog-brand {
-  font-size: $font-size-32 * 1.5;
+  font-size: $font-size-32;
 
   &__subtitle {
     margin-top: $padding-16;
-    font-size: $font-size-16 * 1.2;
+    font-size: $font-size-20;
     font-weight: bolder;
   }
 
@@ -133,7 +222,7 @@ img {
 
 .gblog-nav {
   background: $second-color;
-  color: $gray-200;
+  color: $gray-100;
   min-height: $padding-4;
 
   .container {
@@ -155,7 +244,8 @@ img {
     margin: $padding-4;
 
     &:hover,
-    &.is-active {
+    &.is-active,
+    &:visited:hover {
       background: lighten($second-color, 10%);
     }
 
@@ -193,7 +283,7 @@ img {
 
 .gblog-post {
   word-wrap: break-word;
-  border-top: 1px dashed $gray-600;
+  border-top: $border-2 dashed var(--accent-color-dark);
   padding: $padding-32 0;
 
   &__header {
@@ -210,7 +300,7 @@ img {
     a:hover {
       background: none;
       text-decoration: underline;
-      color: $body-font-color !important;
+      color: var(--body-font-color) !important;
     }
   }
 
@@ -221,6 +311,16 @@ img {
   &__readmore {
     margin: 1.5rem 0 $padding-32 0;
 
+    a:visited {
+      color: var(--link-color);
+    }
+
+    a:hover,
+    a:visited:hover {
+      background: var(--link-color);
+      color: $gray-100;
+    }
+
     a:after {
       font-family: GeekblogIcons;
       content: "\ea02";
@@ -240,15 +340,13 @@ img {
   }
 
   &__anchorwrap {
-    &:hover .gblog-post__anchor {
-      background: none;
-      color: $gray-500 !important;
+    &:hover .gblog-post__anchor .icon {
+      color: var(--control-icons);
     }
   }
 
   &__anchor {
     min-width: 30px;
-    color: transparent;
 
     &--left {
       position: absolute;
@@ -261,7 +359,14 @@ img {
     }
 
     .icon {
-      font-size: $font-size-16 * 1.3;
+      font-size: $font-size-20;
+      color: transparent;
+    }
+
+    &:hover,
+    &:visited:hover {
+      color: var(--control-icons);
+      background: none;
     }
   }
 
@@ -284,13 +389,14 @@ img {
       right: 0;
       padding: $padding-4;
       font-size: 0.8em;
-      color: $gray-200;
+      color: $gray-100;
       border-radius: $border-radius 0;
     }
 
     a:hover,
-    a:visited {
-      color: $gray-200 !important;
+    a:visited,
+    a:visited:hover {
+      color: $gray-100 !important;
     }
   }
 
@@ -305,7 +411,7 @@ img {
   &__figure {
     padding: $padding-4;
     margin: $padding-16 0;
-    background-color: $gray-300;
+    background-color: var(--accent-color);
     display: table;
     border-top-left-radius: $border-radius;
     border-top-right-radius: $border-radius;
@@ -313,7 +419,7 @@ img {
     figcaption {
       display: table-caption;
       caption-side: bottom;
-      background-color: $gray-300;
+      background-color: var(--accent-color);
       padding: 0 $padding-4 $padding-4;
       text-align: center;
       border-bottom-left-radius: $border-radius;
@@ -346,15 +452,16 @@ img {
   }
 
   &__link {
-    color: $color-link-footer;
+    color: var(--link-color-footer);
 
-    &:hover {
-      background: $color-link-footer;
-      color: $body-font-color !important;
+    &:hover,
+    &:visited:hover {
+      background: var(--link-color-footer);
+      color: $body-font-color;
     }
 
     &:visited {
-      color: $color-link-footer;
+      color: var(--link-color-footer);
     }
   }
 }
@@ -365,6 +472,16 @@ img {
   &__item {
     flex: 1 1 0;
 
+    a:visited {
+      color: var(--link-color);
+    }
+
+    a:hover,
+    a:visited:hover {
+      background: var(--link-color);
+      color: $gray-100;
+    }
+
     &--next {
       text-align: right;
 
@@ -394,12 +511,12 @@ img {
 
   .icon {
     font-size: $font-size-128;
-    color: $gray-700;
+    color: var(--body-font-color);
   }
 
   &__link,
   &__link:visited {
-    color: $color-link;
+    color: var(--link-color);
   }
 
   &__message {
@@ -411,7 +528,7 @@ img {
   }
 
   &__title {
-    font-size: $font-size-16 * 4;
+    font-size: $font-size-64;
   }
 
   &__code {
@@ -430,9 +547,15 @@ img {
     display: none;
   }
 
+  a:hover,
+  a:visited:hover {
+    background: var(--link-color);
+    color: $gray-100;
+  }
+
   a,
   a:visited {
-    color: $color-link;
+    color: var(--link-color);
     text-decoration: none;
   }
 }

src/sass/_chroma_base.scss

@@ -0,0 +1,72 @@
+@mixin chroma_base {
+  .chroma {
+    color: var(--code-font-color);
+  }
+  .chroma code {
+    background-color: var(--code-background);
+    display: block;
+    line-height: 1.45;
+    font-size: 0.85em;
+    border-radius: $border-radius;
+  }
+  .chroma .lntable {
+    max-height: var(--code-max-height);
+
+    code {
+      max-height: none;
+    }
+  }
+  .chroma .lntable td:first-child code {
+    border-radius: 0;
+    border-top-left-radius: $border-radius;
+    border-bottom-left-radius: $border-radius;
+  }
+  .chroma .lntable td:nth-child(2) code {
+    border-radius: 0;
+    border-top-right-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
+    padding-left: 0.5em;
+  }
+  .chroma .lntable td:nth-child(2) code .hl {
+    width: auto;
+    margin-left: -0.5em;
+    padding: 0 0.5em;
+  }
+
+  .highlight {
+    overflow: auto;
+    max-height: var(--code-max-height);
+
+    pre.chroma {
+      margin: 0;
+    }
+
+    > pre.chroma code {
+      padding: 1rem;
+      width: 100%;
+      overflow-x: auto;
+    }
+  }
+
+  /* LineTable */
+  .chroma .lntable {
+    border-spacing: 0;
+    padding: 0;
+    margin: 0;
+    border: 0;
+    width: 100%;
+    display: block;
+  }
+  .chroma .lntable td:first-child code {
+    background-color: var(--code-accent-color-lite);
+    border-right: $border-1 solid var(--code-accent-color);
+    padding: 0.5em 0;
+  }
+  .chroma .lntable td code {
+    padding: 0.5em 0;
+  }
+  .chroma .lntable td:nth-child(2) {
+    width: 100%;
+    margin-left: 2em;
+  }
+}

src/sass/_chroma_dark.scss

@@ -0,0 +1,341 @@
+@mixin chroma_dark {
+  /* Theme: Dracula */
+  /* Background */
+  @include chroma_base;
+
+  /* Other */
+  .chroma .x {
+    color: inherit;
+  }
+  /* Error */
+  .chroma .err {
+    color: inherit;
+  }
+  /* LineTableTD */
+  .chroma .lntd {
+    vertical-align: top;
+    padding: 0;
+    margin: 0;
+    border: 0;
+  }
+  /* LineHighlight */
+  .chroma .hl {
+    display: block;
+    width: 100%;
+    background-color: #4f1605;
+  }
+  /* LineNumbersTable */
+  .chroma .lnt {
+    padding: 0 0.8em;
+  }
+  /* LineNumbers */
+  .chroma .ln {
+    margin-right: 0.4em;
+    padding: 0 0.4em 0 0.4em;
+    color: #b3b3b3;
+  }
+  /* Keyword */
+  .chroma .k {
+    color: #ff79c6;
+  }
+  /* KeywordConstant */
+  .chroma .kc {
+    color: #ff79c6;
+  }
+  /* KeywordDeclaration */
+  .chroma .kd {
+    color: #8be9fd;
+    font-style: italic;
+  }
+  /* KeywordNamespace */
+  .chroma .kn {
+    color: #ff79c6;
+  }
+  /* KeywordPseudo */
+  .chroma .kp {
+    color: #ff79c6;
+  }
+  /* KeywordReserved */
+  .chroma .kr {
+    color: #ff79c6;
+  }
+  /* KeywordType */
+  .chroma .kt {
+    color: #8be9fd;
+  }
+  /* Name */
+  .chroma .n {
+    color: inherit;
+  }
+  /* NameAttribute */
+  .chroma .na {
+    color: #50fa7b;
+  }
+  /* NameBuiltin */
+  .chroma .nb {
+    color: #8be9fd;
+    font-style: italic;
+  }
+  /* NameBuiltinPseudo */
+  .chroma .bp {
+    color: inherit;
+  }
+  /* NameClass */
+  .chroma .nc {
+    color: #50fa7b;
+  }
+  /* NameConstant */
+  .chroma .no {
+    color: inherit;
+  }
+  /* NameDecorator */
+  .chroma .nd {
+    color: inherit;
+  }
+  /* NameEntity */
+  .chroma .ni {
+    color: inherit;
+  }
+  /* NameException */
+  .chroma .ne {
+    color: inherit;
+  }
+  /* NameFunction */
+  .chroma .nf {
+    color: #50fa7b;
+  }
+  /* NameFunctionMagic */
+  .chroma .fm {
+    color: inherit;
+  }
+  /* NameLabel */
+  .chroma .nl {
+    color: #8be9fd;
+    font-style: italic;
+  }
+  /* NameNamespace */
+  .chroma .nn {
+    color: inherit;
+  }
+  /* NameOther */
+  .chroma .nx {
+    color: inherit;
+  }
+  /* NameProperty */
+  .chroma .py {
+    color: inherit;
+  }
+  /* NameTag */
+  .chroma .nt {
+    color: #ff79c6;
+  }
+  /* NameVariable */
+  .chroma .nv {
+    color: #8be9fd;
+    font-style: italic;
+  }
+  /* NameVariableClass */
+  .chroma .vc {
+    color: #8be9fd;
+    font-style: italic;
+  }
+  /* NameVariableGlobal */
+  .chroma .vg {
+    color: #8be9fd;
+    font-style: italic;
+  }
+  /* NameVariableInstance */
+  .chroma .vi {
+    color: #8be9fd;
+    font-style: italic;
+  }
+  /* NameVariableMagic */
+  .chroma .vm {
+    color: inherit;
+  }
+  /* Literal */
+  .chroma .l {
+    color: inherit;
+  }
+  /* LiteralDate */
+  .chroma .ld {
+    color: inherit;
+  }
+  /* LiteralString */
+  .chroma .s {
+    color: #f1fa8c;
+  }
+  /* LiteralStringAffix */
+  .chroma .sa {
+    color: #f1fa8c;
+  }
+  /* LiteralStringBacktick */
+  .chroma .sb {
+    color: #f1fa8c;
+  }
+  /* LiteralStringChar */
+  .chroma .sc {
+    color: #f1fa8c;
+  }
+  /* LiteralStringDelimiter */
+  .chroma .dl {
+    color: #f1fa8c;
+  }
+  /* LiteralStringDoc */
+  .chroma .sd {
+    color: #f1fa8c;
+  }
+  /* LiteralStringDouble */
+  .chroma .s2 {
+    color: #f1fa8c;
+  }
+  /* LiteralStringEscape */
+  .chroma .se {
+    color: #f1fa8c;
+  }
+  /* LiteralStringHeredoc */
+  .chroma .sh {
+    color: #f1fa8c;
+  }
+  /* LiteralStringInterpol */
+  .chroma .si {
+    color: #f1fa8c;
+  }
+  /* LiteralStringOther */
+  .chroma .sx {
+    color: #f1fa8c;
+  }
+  /* LiteralStringRegex */
+  .chroma .sr {
+    color: #f1fa8c;
+  }
+  /* LiteralStringSingle */
+  .chroma .s1 {
+    color: #f1fa8c;
+  }
+  /* LiteralStringSymbol */
+  .chroma .ss {
+    color: #f1fa8c;
+  }
+  /* LiteralNumber */
+  .chroma .m {
+    color: #bd93f9;
+  }
+  /* LiteralNumberBin */
+  .chroma .mb {
+    color: #bd93f9;
+  }
+  /* LiteralNumberFloat */
+  .chroma .mf {
+    color: #bd93f9;
+  }
+  /* LiteralNumberHex */
+  .chroma .mh {
+    color: #bd93f9;
+  }
+  /* LiteralNumberInteger */
+  .chroma .mi {
+    color: #bd93f9;
+  }
+  /* LiteralNumberIntegerLong */
+  .chroma .il {
+    color: #bd93f9;
+  }
+  /* LiteralNumberOct */
+  .chroma .mo {
+    color: #bd93f9;
+  }
+  /* Operator */
+  .chroma .o {
+    color: #ff79c6;
+  }
+  /* OperatorWord */
+  .chroma .ow {
+    color: #ff79c6;
+  }
+  /* Punctuation */
+  .chroma .p {
+    color: inherit;
+  }
+  /* Comment */
+  .chroma .c {
+    color: #96a6d8;
+  }
+  /* CommentHashbang */
+  .chroma .ch {
+    color: #96a6d8;
+  }
+  /* CommentMultiline */
+  .chroma .cm {
+    color: #96a6d8;
+  }
+  /* CommentSingle */
+  .chroma .c1 {
+    color: #96a6d8;
+  }
+  /* CommentSpecial */
+  .chroma .cs {
+    color: #96a6d8;
+  }
+  /* CommentPreproc */
+  .chroma .cp {
+    color: #ff79c6;
+  }
+  /* CommentPreprocFile */
+  .chroma .cpf {
+    color: #ff79c6;
+  }
+  /* Generic */
+  .chroma .g {
+    color: inherit;
+  }
+  /* GenericDeleted */
+  .chroma .gd {
+    color: #d98f90;
+  }
+  /* GenericEmph */
+  .chroma .ge {
+    text-decoration: underline;
+  }
+  /* GenericError */
+  .chroma .gr {
+    color: inherit;
+  }
+  /* GenericHeading */
+  .chroma .gh {
+    font-weight: bold;
+    color: inherit;
+  }
+  /* GenericInserted */
+  .chroma .gi {
+    font-weight: bold;
+  }
+  /* GenericOutput */
+  .chroma .go {
+    color: #8f9ea8;
+  }
+  /* GenericPrompt */
+  .chroma .gp {
+    color: inherit;
+  }
+  /* GenericStrong */
+  .chroma .gs {
+    color: inherit;
+  }
+  /* GenericSubheading */
+  .chroma .gu {
+    font-weight: bold;
+  }
+  /* GenericTraceback */
+  .chroma .gt {
+    color: inherit;
+  }
+  /* GenericUnderline */
+  .chroma .gl {
+    text-decoration: underline;
+  }
+  /* TextWhitespace */
+  .chroma .w {
+    color: inherit;
+  }
+}

src/sass/_chroma_github.scss

@@ -1,376 +0,0 @@
-.chroma {
-  background-color: #ffffff;
-  color: #555;
-}
-.chroma code {
-  background-color: $color-code;
-  display: block;
-  line-height: 1.45;
-  font-size: 0.85em;
-  border-radius: $border-radius;
-}
-.chroma .lntable td:first-child code {
-  border-radius: 0;
-  border-top-left-radius: $border-radius;
-  border-bottom-left-radius: $border-radius;
-}
-.chroma .lntable td:nth-child(2) code {
-  border-radius: 0;
-  border-top-right-radius: $border-radius;
-  border-bottom-right-radius: $border-radius;
-  padding-left: 0.5em;
-}
-.chroma .lntable td:nth-child(2) code .hl {
-  width: auto;
-  margin-left: -0.5em;
-  padding: 0 0.5em;
-}
-
-.highlight {
-  pre.chroma {
-    margin: 0;
-  }
-
-  > pre.chroma code {
-    padding: 1rem;
-    width: 100%;
-    overflow-x: auto;
-  }
-}
-
-/* Error */
-.chroma .err {
-  color: #a61717;
-  background-color: #e3d2d2;
-}
-/* LineTableTD */
-.chroma .lntd {
-  vertical-align: top;
-  padding: 0;
-  margin: 0;
-  border: 0;
-}
-/* LineTable */
-.chroma .lntable {
-  border-spacing: 0;
-  padding: 0;
-  margin: 0;
-  border: 0;
-  width: 100%;
-  overflow: auto;
-  display: block;
-}
-.chroma .lntable td:first-child code {
-  background-color: $gray-200;
-  border-right: $border-1 solid #dcdfe3;
-  padding: 0.5em 0;
-}
-.chroma .lntable td code {
-  padding: 0.5em 0;
-}
-.chroma .lntable td:nth-child(2) {
-  width: 100%;
-  margin-left: 2em;
-}
-/* LineHighlight */
-.chroma .hl {
-  display: block;
-  width: 100%;
-  background-color: #ffffcc;
-}
-/* LineNumbersTable */
-.chroma .lnt {
-  padding: 0 0.8em;
-}
-/* LineNumbers */
-.chroma .ln {
-  margin-right: 0.4em;
-  padding: 0 0.4em 0 0.4em;
-}
-/* Keyword */
-.chroma .k {
-  color: #000000;
-  font-weight: bold;
-}
-/* KeywordConstant */
-.chroma .kc {
-  color: #000000;
-  font-weight: bold;
-}
-/* KeywordDeclaration */
-.chroma .kd {
-  color: #000000;
-  font-weight: bold;
-}
-/* KeywordNamespace */
-.chroma .kn {
-  color: #000000;
-  font-weight: bold;
-}
-/* KeywordPseudo */
-.chroma .kp {
-  color: #000000;
-  font-weight: bold;
-}
-/* KeywordReserved */
-.chroma .kr {
-  color: #000000;
-  font-weight: bold;
-}
-/* KeywordType */
-.chroma .kt {
-  color: #445588;
-  font-weight: bold;
-}
-/* NameAttribute */
-.chroma .na {
-  color: #008080;
-}
-/* NameBuiltin */
-.chroma .nb {
-  color: #0086b3;
-}
-/* NameBuiltinPseudo */
-.chroma .bp {
-  color: #999999;
-}
-/* NameClass */
-.chroma .nc {
-  color: #445588;
-  font-weight: bold;
-}
-/* NameConstant */
-.chroma .no {
-  color: #008080;
-}
-/* NameDecorator */
-.chroma .nd {
-  color: #3c5d5d;
-  font-weight: bold;
-}
-/* NameEntity */
-.chroma .ni {
-  color: #800080;
-}
-/* NameException */
-.chroma .ne {
-  color: #990000;
-  font-weight: bold;
-}
-/* NameFunction */
-.chroma .nf {
-  color: #990000;
-  font-weight: bold;
-}
-/* NameLabel */
-.chroma .nl {
-  color: #990000;
-  font-weight: bold;
-}
-/* NameNamespace */
-.chroma .nn {
-  color: #555555;
-}
-/* NameTag */
-.chroma .nt {
-  color: #000080;
-}
-/* NameVariable */
-.chroma .nv {
-  color: #008080;
-}
-/* NameVariableClass */
-.chroma .vc {
-  color: #008080;
-}
-/* NameVariableGlobal */
-.chroma .vg {
-  color: #008080;
-}
-/* NameVariableInstance */
-.chroma .vi {
-  color: #008080;
-}
-/* LiteralString */
-.chroma .s {
-  color: #dd1144;
-}
-/* LiteralStringAffix */
-.chroma .sa {
-  color: #dd1144;
-}
-/* LiteralStringBacktick */
-.chroma .sb {
-  color: #dd1144;
-}
-/* LiteralStringChar */
-.chroma .sc {
-  color: #dd1144;
-}
-/* LiteralStringDelimiter */
-.chroma .dl {
-  color: #dd1144;
-}
-/* LiteralStringDoc */
-.chroma .sd {
-  color: #dd1144;
-}
-/* LiteralStringDouble */
-.chroma .s2 {
-  color: #dd1144;
-}
-/* LiteralStringEscape */
-.chroma .se {
-  color: #dd1144;
-}
-/* LiteralStringHeredoc */
-.chroma .sh {
-  color: #dd1144;
-}
-/* LiteralStringInterpol */
-.chroma .si {
-  color: #dd1144;
-}
-/* LiteralStringOther */
-.chroma .sx {
-  color: #dd1144;
-}
-/* LiteralStringRegex */
-.chroma .sr {
-  color: #009926;
-}
-/* LiteralStringSingle */
-.chroma .s1 {
-  color: #dd1144;
-}
-/* LiteralStringSymbol */
-.chroma .ss {
-  color: #990073;
-}
-/* LiteralNumber */
-.chroma .m {
-  color: #009999;
-}
-/* LiteralNumberBin */
-.chroma .mb {
-  color: #009999;
-}
-/* LiteralNumberFloat */
-.chroma .mf {
-  color: #009999;
-}
-/* LiteralNumberHex */
-.chroma .mh {
-  color: #009999;
-}
-/* LiteralNumberInteger */
-.chroma .mi {
-  color: #009999;
-}
-/* LiteralNumberIntegerLong */
-.chroma .il {
-  color: #009999;
-}
-/* LiteralNumberOct */
-.chroma .mo {
-  color: #009999;
-}
-/* Operator */
-.chroma .o {
-  color: #000000;
-  font-weight: bold;
-}
-/* OperatorWord */
-.chroma .ow {
-  color: #000000;
-  font-weight: bold;
-}
-/* Comment */
-.chroma .c {
-  color: #999988;
-  font-style: italic;
-}
-/* CommentHashbang */
-.chroma .ch {
-  color: #999988;
-  font-style: italic;
-}
-/* CommentMultiline */
-.chroma .cm {
-  color: #999988;
-  font-style: italic;
-}
-/* CommentSingle */
-.chroma .c1 {
-  color: #999988;
-  font-style: italic;
-}
-/* CommentSpecial */
-.chroma .cs {
-  color: #999999;
-  font-weight: bold;
-  font-style: italic;
-}
-/* CommentPreproc */
-.chroma .cp {
-  color: #999999;
-  font-weight: bold;
-  font-style: italic;
-}
-/* CommentPreprocFile */
-.chroma .cpf {
-  color: #999999;
-  font-weight: bold;
-  font-style: italic;
-}
-/* GenericDeleted */
-.chroma .gd {
-  color: #000000;
-  background-color: #ffdddd;
-}
-/* GenericEmph */
-.chroma .ge {
-  color: #000000;
-  font-style: italic;
-}
-/* GenericError */
-.chroma .gr {
-  color: #aa0000;
-}
-/* GenericHeading */
-.chroma .gh {
-  color: #999999;
-}
-/* GenericInserted */
-.chroma .gi {
-  color: #000000;
-  background-color: #ddffdd;
-}
-/* GenericOutput */
-.chroma .go {
-  color: #888888;
-}
-/* GenericPrompt */
-.chroma .gp {
-  color: #555555;
-}
-/* GenericStrong */
-.chroma .gs {
-  font-weight: bold;
-}
-/* GenericSubheading */
-.chroma .gu {
-  color: #aaaaaa;
-}
-/* GenericTraceback */
-.chroma .gt {
-  color: #aa0000;
-}
-/* GenericUnderline */
-.chroma .gl {
-  text-decoration: underline;
-}
-/* TextWhitespace */
-.chroma .w {
-  color: #bbbbbb;
-}

src/sass/_chroma_light.scss

@@ -0,0 +1,360 @@
+@mixin chroma_github {
+  /* Theme: GitHub */
+  /* Background */
+  @include chroma_base;
+
+  /* Other */
+  .chroma .x {
+    color: inherit;
+  }
+  /* Error */
+  .chroma .err {
+    color: #a61717;
+    background-color: #e3d2d2;
+  }
+  /* LineTableTD */
+  .chroma .lntd {
+    vertical-align: top;
+    padding: 0;
+    margin: 0;
+    border: 0;
+  }
+  /* LineHighlight */
+  .chroma .hl {
+    display: block;
+    width: 100%;
+    background-color: #ffffcc;
+  }
+  /* LineNumbersTable */
+  .chroma .lnt {
+    padding: 0 0.8em;
+  }
+  /* LineNumbers */
+  .chroma .ln {
+    margin-right: 0.4em;
+    padding: 0 0.4em 0 0.4em;
+  }
+  /* Keyword */
+  .chroma .k {
+    color: #000000;
+    font-weight: bold;
+  }
+  /* KeywordConstant */
+  .chroma .kc {
+    color: #000000;
+    font-weight: bold;
+  }
+  /* KeywordDeclaration */
+  .chroma .kd {
+    color: #000000;
+    font-weight: bold;
+  }
+  /* KeywordNamespace */
+  .chroma .kn {
+    color: #000000;
+    font-weight: bold;
+  }
+  /* KeywordPseudo */
+  .chroma .kp {
+    color: #000000;
+    font-weight: bold;
+  }
+  /* KeywordReserved */
+  .chroma .kr {
+    color: #000000;
+    font-weight: bold;
+  }
+  /* KeywordType */
+  .chroma .kt {
+    color: #445588;
+    font-weight: bold;
+  }
+  /* Name */
+  .chroma .n {
+    color: inherit;
+  }
+  /* NameAttribute */
+  .chroma .na {
+    color: #006767;
+  }
+  /* NameBuiltin */
+  .chroma .nb {
+    color: #556165;
+  }
+  /* NameBuiltinPseudo */
+  .chroma .bp {
+    color: #676767;
+  }
+  /* NameClass */
+  .chroma .nc {
+    color: #445588;
+    font-weight: bold;
+  }
+  /* NameConstant */
+  .chroma .no {
+    color: #006767;
+  }
+  /* NameDecorator */
+  .chroma .nd {
+    color: #3c5d5d;
+    font-weight: bold;
+  }
+  /* NameEntity */
+  .chroma .ni {
+    color: #800080;
+  }
+  /* NameException */
+  .chroma .ne {
+    color: #990000;
+    font-weight: bold;
+  }
+  /* NameFunction */
+  .chroma .nf {
+    color: #990000;
+    font-weight: bold;
+  }
+  /* NameFunctionMagic */
+  .chroma .fm {
+    color: inherit;
+  }
+  /* NameLabel */
+  .chroma .nl {
+    color: #990000;
+    font-weight: bold;
+  }
+  /* NameNamespace */
+  .chroma .nn {
+    color: #555555;
+  }
+  /* NameOther */
+  .chroma .nx {
+    color: inherit;
+  }
+  /* NameProperty */
+  .chroma .py {
+    color: inherit;
+  }
+  /* NameTag */
+  .chroma .nt {
+    color: #000080;
+  }
+  /* NameVariable */
+  .chroma .nv {
+    color: #006767;
+  }
+  /* NameVariableClass */
+  .chroma .vc {
+    color: #006767;
+  }
+  /* NameVariableGlobal */
+  .chroma .vg {
+    color: #006767;
+  }
+  /* NameVariableInstance */
+  .chroma .vi {
+    color: #006767;
+  }
+  /* NameVariableMagic */
+  .chroma .vm {
+    color: inherit;
+  }
+  /* Literal */
+  .chroma .l {
+    color: inherit;
+  }
+  /* LiteralDate */
+  .chroma .ld {
+    color: inherit;
+  }
+  /* LiteralString */
+  .chroma .s {
+    color: #dd1144;
+  }
+  /* LiteralStringAffix */
+  .chroma .sa {
+    color: #dd1144;
+  }
+  /* LiteralStringBacktick */
+  .chroma .sb {
+    color: #dd1144;
+  }
+  /* LiteralStringChar */
+  .chroma .sc {
+    color: #dd1144;
+  }
+  /* LiteralStringDelimiter */
+  .chroma .dl {
+    color: #dd1144;
+  }
+  /* LiteralStringDoc */
+  .chroma .sd {
+    color: #dd1144;
+  }
+  /* LiteralStringDouble */
+  .chroma .s2 {
+    color: #dd1144;
+  }
+  /* LiteralStringEscape */
+  .chroma .se {
+    color: #dd1144;
+  }
+  /* LiteralStringHeredoc */
+  .chroma .sh {
+    color: #dd1144;
+  }
+  /* LiteralStringInterpol */
+  .chroma .si {
+    color: #dd1144;
+  }
+  /* LiteralStringOther */
+  .chroma .sx {
+    color: #dd1144;
+  }
+  /* LiteralStringRegex */
+  .chroma .sr {
+    color: #009926;
+  }
+  /* LiteralStringSingle */
+  .chroma .s1 {
+    color: #dd1144;
+  }
+  /* LiteralStringSymbol */
+  .chroma .ss {
+    color: #990073;
+  }
+  /* LiteralNumber */
+  .chroma .m {
+    color: #027e83;
+  }
+  /* LiteralNumberBin */
+  .chroma .mb {
+    color: #027e83;
+  }
+  /* LiteralNumberFloat */
+  .chroma .mf {
+    color: #027e83;
+  }
+  /* LiteralNumberHex */
+  .chroma .mh {
+    color: #027e83;
+  }
+  /* LiteralNumberInteger */
+  .chroma .mi {
+    color: #027e83;
+  }
+  /* LiteralNumberIntegerLong */
+  .chroma .il {
+    color: #027e83;
+  }
+  /* LiteralNumberOct */
+  .chroma .mo {
+    color: #027e83;
+  }
+  /* Operator */
+  .chroma .o {
+    color: #000000;
+    font-weight: bold;
+  }
+  /* OperatorWord */
+  .chroma .ow {
+    color: #000000;
+    font-weight: bold;
+  }
+  /* Punctuation */
+  .chroma .p {
+    color: inherit;
+  }
+  /* Comment */
+  .chroma .c {
+    color: #676765;
+    font-style: italic;
+  }
+  /* CommentHashbang */
+  .chroma .ch {
+    color: #676765;
+    font-style: italic;
+  }
+  /* CommentMultiline */
+  .chroma .cm {
+    color: #676765;
+    font-style: italic;
+  }
+  /* CommentSingle */
+  .chroma .c1 {
+    color: #676765;
+    font-style: italic;
+  }
+  /* CommentSpecial */
+  .chroma .cs {
+    color: #676767;
+    font-weight: bold;
+    font-style: italic;
+  }
+  /* CommentPreproc */
+  .chroma .cp {
+    color: #676767;
+    font-weight: bold;
+    font-style: italic;
+  }
+  /* CommentPreprocFile */
+  .chroma .cpf {
+    color: #676767;
+    font-weight: bold;
+    font-style: italic;
+  }
+  /* Generic */
+  .chroma .g {
+    color: inherit;
+  }
+  /* GenericDeleted */
+  .chroma .gd {
+    color: #000000;
+    background-color: #ffdddd;
+  }
+  /* GenericEmph */
+  .chroma .ge {
+    color: #000000;
+    font-style: italic;
+  }
+  /* GenericError */
+  .chroma .gr {
+    color: #aa0000;
+  }
+  /* GenericHeading */
+  .chroma .gh {
+    color: #676767;
+  }
+  /* GenericInserted */
+  .chroma .gi {
+    color: #000000;
+    background-color: #ddffdd;
+  }
+  /* GenericOutput */
+  .chroma .go {
+    color: #6f6f6f;
+  }
+  /* GenericPrompt */
+  .chroma .gp {
+    color: #555555;
+  }
+  /* GenericStrong */
+  .chroma .gs {
+    font-weight: bold;
+  }
+  /* GenericSubheading */
+  .chroma .gu {
+    color: #5f5f5f;
+  }
+  /* GenericTraceback */
+  .chroma .gt {
+    color: #aa0000;
+  }
+  /* GenericUnderline */
+  .chroma .gl {
+    text-decoration: underline;
+  }
+  /* TextWhitespace */
+  .chroma .w {
+    color: #bbbbbb;
+  }
+}

src/sass/_color_mode.scss

@@ -0,0 +1,103 @@
+@mixin light_mode {
+  @include chroma_github;
+
+  --header-background: #{$main-color};
+  --header-font-color: #{$white};
+
+  --body-background: #{$body-background};
+  --body-font-color: #{$body-font-color};
+
+  --mark-color: #{$mark-color};
+
+  --button-background: #{lighten($main-color, 2)};
+  --button-border-color: #{$main-color};
+
+  --link-color: #{$link-color};
+  --link-color-visited: #{$link-color-visited};
+  --link-color-footer: #{$link-color-footer};
+
+  --code-background: #{$code-background};
+  --code-accent-color: #{darken($code-background, 6)};
+  --code-accent-color-lite: #{darken($code-background, 2)};
+  --code-font-color: #{$code-font-color};
+
+  --code-copy-font-color: #{lighten($body-font-color, 24)};
+  --code-copy-border-color: #{lighten($body-font-color, 48)};
+  --code-copy-success-color: #{map.get($hint-colors, "ok")};
+
+  --accent-color-dark: #{$gray-600};
+  --accent-color: #{$gray-200};
+  --accent-color-lite: #{$gray-100};
+
+  --control-icons: #{lighten($body-font-color, 50)};
+
+  --footer-background: #{$second-color};
+  --footer-font-color: #{$white};
+  --footer-link-color: #{$link-color-footer};
+  --footer-link-color-visited: #{$link-color-footer};
+
+  .dark-mode-dim .gblog-markdown {
+    img {
+      filter: none;
+    }
+  }
+
+  .gblog-markdown {
+    .gblog-hint {
+      filter: none;
+    }
+  }
+}
+
+@mixin dark_mode {
+  @include chroma_dark;
+
+  --header-background: #{$main-color};
+  --header-font-color: #{$white};
+
+  --body-background: #{$body-background-dark};
+  --body-font-color: #{lighten($body-background-dark, 60)};
+
+  --mark-color: #{$mark-color};
+
+  --button-background: #{lighten($main-color, 2)};
+  --button-border-color: #{$main-color};
+
+  --link-color: #{$link-color-dark};
+  --link-color-visited: #{$link-color-visited-dark};
+  --link-color-footer: #{$link-color-footer};
+
+  --code-background: #{$code-background-dark};
+  --code-accent-color: #{darken($code-background-dark, 4)};
+  --code-accent-color-lite: #{darken($code-background-dark, 2)};
+  --code-font-color: #{$code-font-color-dark};
+
+  --code-copy-font-color: #{lighten($body-font-color, 48)};
+  --code-copy-border-color: #{lighten($body-font-color, 32)};
+  --code-copy-success-color: #{map.get($hint-colors, "ok")};
+
+  --accent-color-dark: #{darken($body-background-dark, 8)};
+  --accent-color: #{darken($body-background-dark, 4)};
+  --accent-color-lite: #{darken($body-background-dark, 2)};
+
+  --control-icons: #{lighten($body-font-color, 50)};
+
+  --footer-background: #{$second-color};
+  --footer-font-color: #{$white};
+  --footer-link-color: #{$link-color-footer};
+  --footer-link-color-visited: #{$link-color-footer};
+
+  .dark-mode-dim {
+    .gblog-post__feature picture,
+    .gblog-markdown img {
+      filter: brightness(0.75) grayscale(0.2);
+    }
+  }
+
+  .gblog-markdown {
+    .gblog-hint,
+    .gblog-post__codecopy--success {
+      filter: saturate(2.5) brightness(0.85);
+    }
+  }
+}

src/sass/_defaults.scss

@@ -17,8 +17,8 @@ $font-size-96: 6rem !default;
 $font-size-128: 8rem !default;
 
 $border-1: 1px !default;
-$border-2: 2px !default;
-$border-4: 4px !default;
+$border-2: 1.5px !default;
+$border-4: 3px !default;
 
 $border-radius: 0.15rem !default;
 
@@ -35,28 +35,46 @@ $gray-800: rgba(52, 58, 64, 1) !default;
 $gray-900: rgba(33, 37, 41, 1) !default;
 $black: rgba(0, 0, 0, 1) !default;
 
-$color-link: rgba(10, 83, 154, 1) !default;
-$color-link-visited: rgba(119, 73, 191, 1) !default;
-$color-link-footer: rgba(255, 163, 30, 1) !default;
-
-$color-code: rgba($gray-200, 0.5) !default;
+$link-color: rgba(10, 83, 154, 1) !default;
+$link-color-visited: rgba(119, 73, 191, 1) !default;
+$link-color-footer: rgba(255, 163, 30, 1) !default;
 
 $body-background: white !default;
 $body-font-color: $gray-800 !default;
 $body-font-weight: normal !default;
 $body-min-width: 20rem !default;
 
+$code-font-color: rgba(95, 95, 95, 1) !default;
+$code-font-color-dark: rgba(185, 185, 185, 1) !default;
+
+$body-background-dark: $gray-800 !default;
+$body-font-color-dark: $gray-100 !default;
+
 $container-max-width: 60rem !default;
 
 $main-color: rgba(65, 134, 201, 1) !default;
 $second-color: rgba(47, 51, 62, 1) !default;
+$mark-color: rgba(255, 171, 0, 1) !default;
 
-$sm-breakpoint: 45rem !default;
+$body-background-dark: mix(
+  invert($body-background, 75%),
+  $second-color
+) !default;
+$link-color-dark: rgba(110, 168, 212, 1) !default;
+$link-color-visited-dark: rgba(186, 142, 240) !default;
+
+$code-background: lighten($gray-200, 4) !default;
+$code-background-dark: darken($body-background-dark, 2) !default;
+
+$header-height: 3.5rem !default;
+$menu-width: 16rem !default;
+
+$sm-breakpoint: $menu-width + $body-min-width + 3rem !default;
 
 // Panel colors
 $hint-colors: (
-  info: rgba(102, 187, 255, 1),
-  ok: rgba(102, 255, 140, 1),
-  warning: rgba(255, 221, 102, 1),
-  danger: rgba(255, 102, 102, 1),
+  info: rgba(0, 145, 234, 1),
+  ok: rgba(0, 200, 83, 1),
+  warning: rgba(255, 171, 0, 1),
+  danger: rgba(213, 0, 0, 1),
 ) !default;

src/sass/_markdown.scss

@@ -19,17 +19,34 @@
     }
   }
 
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-weight: 600;
+
+    > code {
+      border-top: $border-4 solid var(--accent-color);
+      font-size: 0.75em !important;
+    }
+  }
+
+  h4,
+  h5,
+  h6 {
+    > code {
+      font-size: 0.8rem !important;
+    }
+  }
+
   b,
   optgroup,
   strong {
     font-weight: bolder;
   }
 
-  img {
-    max-width: 100%;
-    border-radius: $border-radius;
-  }
-
   &__link--raw {
     text-decoration: none !important;
     color: $body-font-color !important;
@@ -45,11 +62,16 @@
     }
   }
 
+  img {
+    max-width: 100%;
+    border-radius: $border-radius;
+  }
+
   blockquote {
     margin: $padding-16 0;
     padding: $padding-8 $padding-16 $padding-8 ($padding-16 - $padding-4); //to keep total left space 16dp
 
-    border-left: $border-4 solid $gray-200;
+    border-left: $border-4 solid var(--accent-color);
     border-radius: $border-radius;
 
     :first-child {
@@ -60,8 +82,7 @@
     }
   }
 
-  table {
-    overflow: auto;
+  table:not(.lntable) {
     display: table;
     border-spacing: 0;
     border-collapse: collapse;
@@ -71,7 +92,7 @@
     text-align: left;
 
     thead {
-      border-bottom: $border-2 solid $gray-200;
+      border-bottom: $border-4 solid var(--accent-color);
     }
 
     tr th,
@@ -80,18 +101,18 @@
     }
 
     tr {
-      border-bottom: $border-1 solid $gray-200;
+      border-bottom: $border-2 solid var(--accent-color);
     }
 
     tr:nth-child(2n) {
-      background: $gray-100;
+      background: var(--accent-color-lite);
     }
   }
 
   hr {
-    height: $padding-2;
+    height: $border-2;
     border: none;
-    background: $gray-200;
+    background: var(--accent-color);
   }
 
   ul,
@@ -115,9 +136,11 @@
   }
 
   code {
-    background-color: $color-code;
+    background-color: var(--code-background);
+    border-radius: $border-radius;
+    color: var(--code-font-color);
     font-size: 0.85em;
-    line-height: 1.45;
+    line-height: 1.45em;
     padding: 0.2em 0.4em;
   }
 
@@ -125,16 +148,15 @@
     display: block;
     padding: 1rem;
     width: 100%;
-    overflow: auto;
   }
 
   mark {
-    background-color: rgba(255, 221, 102, 1);
+    background-color: var(--mark-color);
   }
 
   section.footnotes {
     margin-top: 3rem;
-    color: $gray-600;
-    font-size: 0.9em;
+    color: var(--body-font-color);
+    font-size: $font-size-14;
   }
 }

src/sass/_mobile.scss

@@ -1,6 +1,20 @@
 @media screen and (max-width: $sm-breakpoint) {
+  .gblog-header__col-2.justify-center,
+  .gblog-header__col-2 .justify-center {
+    justify-content: flex-start;
+  }
+
   .gblog-brand {
-    font-size: $font-size-32 * 1.1;
+    font-size: $font-size-32;
+
+    &__subtitle {
+      font-size: $font-size-20;
+    }
+
+    &__img {
+      width: 40px;
+      height: 40px;
+    }
   }
 
   .gblog-nav {
@@ -26,6 +40,7 @@
       text-align: center;
 
       &:hover,
+      &:visited:hover,
       &.is-active {
         background: lighten($second-color, 5%);
       }
@@ -71,18 +86,22 @@
       width: 100%;
     }
   }
-}
 
-#menu-control:checked ~ .gblog-nav__list {
-  max-height: 100%;
-  visibility: visible;
-}
-
-#menu-control:checked ~ .gblog-nav__control {
-  .icon.gblog_menu {
+  .hidden-mobile {
     display: none;
   }
-  .icon.gblog_clear {
-    display: inline-block;
+
+  #menu-control:checked ~ .gblog-nav__list {
+    max-height: 100%;
+    visibility: visible;
+  }
+
+  #menu-control:checked ~ .gblog-nav__control {
+    .icon.gblog_menu {
+      display: none;
+    }
+    .icon.gblog_clear {
+      display: inline-block;
+    }
   }
 }

src/sass/_shortcodes.scss

@@ -3,13 +3,13 @@
   margin-top: $padding-16;
   margin-bottom: $padding-16;
 
-  border: $border-1 solid $gray-200;
+  border: $border-1 solid var(--accent-color);
   border-radius: $border-radius;
 
   overflow: hidden;
 
   &__head {
-    background: $gray-100;
+    background: var(--accent-color-lite);
     padding: $padding-8 $padding-16;
     cursor: pointer;
   }
@@ -23,7 +23,7 @@
     display: block;
   }
 
-  .gblog-page__anchor {
+  .gblog-post__anchor {
     display: none;
   }
 }
@@ -33,7 +33,7 @@
   margin-top: $padding-16;
   margin-bottom: $padding-16;
 
-  border: $border-1 solid $gray-200;
+  border: $border-1 solid var(--accent-color);
   border-radius: $border-radius;
 
   overflow: hidden;
@@ -51,17 +51,21 @@
   &__content {
     order: 999; //Move content blocks to the end
     width: 100%;
-    border-top: $border-1 solid $gray-100;
+    border-top: $border-1 solid var(--accent-color-lite);
     padding: $padding-16;
     display: none;
   }
 
   &__control:checked + &__label {
-    border-bottom: $border-1 solid $color-link;
+    border-bottom: $border-2 solid var(--link-color);
   }
   &__control:checked + &__label + &__content {
     display: block;
   }
+
+  .gblog-post__anchor {
+    display: none;
+  }
 }
 
 // {{< columns >}}
@@ -75,7 +79,7 @@
     padding: 0 $padding-16;
   }
 
-  .gblog-page__anchor {
+  .gblog-post__anchor {
     display: none;
   }
 }
@@ -85,8 +89,8 @@
   $root: &;
 
   display: inline-block;
-  color: $gray-700;
-  border: $border-1 solid $gray-500;
+  background: var(--accent-color-lite);
+  border: $border-1 solid var(--accent-color);
   border-radius: $border-radius;
   margin: $padding-8 0;
   cursor: pointer;
@@ -95,15 +99,11 @@
     display: inline-block;
     color: inherit !important;
     text-decoration: none !important;
-
-    &:hover {
-      background: none;
-    }
   }
 
   &:hover {
-    background: lighten($main-color, 2);
-    border-color: $main-color;
+    background: var(--button-background);
+    border-color: var(--button-border-color);
     color: $gray-100;
   }
 
@@ -129,9 +129,14 @@
   @each $name, $color in $hint-colors {
     &.#{$name} {
       border-left-color: $color;
-      background-color: rgba($color, 0.1);
+      background-color: scale-color($color, $lightness: 95%, $saturation: -30%);
+      color: $body-font-color;
     }
   }
+
+  .gblog-post__anchor {
+    display: none;
+  }
 }
 
 // {{< mermaid >}}

src/sass/_utils.scss

@@ -20,9 +20,9 @@
 
 .flex-grid {
   flex-direction: column;
-  border: $border-1 solid $gray-200;
+  border: $border-1 solid var(--accent-color);
   border-radius: $border-radius;
-  background-color: $color-code;
+  background: var(--accent-color-lite);
 }
 
 .justify-start {
@@ -67,3 +67,7 @@
   height: 0;
   overflow: hidden;
 }
+
+.table-wrap {
+  overflow: auto;
+}

src/sass/main.scss

@@ -1,4 +1,10 @@
+@use "sass:map";
+
 @import "_defaults";
+@import "_color_mode";
+@import "_chroma_base";
+@import "_chroma_light";
+@import "_chroma_dark";
 
 @import "_normalize";
 @import "_utils";
@@ -6,5 +12,4 @@
 @import "_base";
 
 @import "_markdown";
-@import "_chroma_github";
 @import "_shortcodes";