feat: add dark mode (#109)

pull/112/head
Robert Kaussow 9 months ago committed by GitHub
parent 9b2a28d7b5
commit 472b50ca22
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 1
      assets/sprites/geekblog.svg
  2. 1
      exampleSite/config.yaml
  3. 101
      exampleSite/content/posts/features/code-blocks.md
  4. BIN
      exampleSite/content/posts/features/dark-mode/images/geekblog-dark.png
  5. 19
      exampleSite/content/posts/features/dark-mode/index.md
  6. BIN
      exampleSite/content/posts/features/theming/images/theme-example.png
  7. 20
      exampleSite/content/posts/features/theming/index.md
  8. 2
      exampleSite/content/posts/post-with-images/index.md
  9. 14
      exampleSite/content/posts/usage/configuration.md
  10. 1
      exampleSite/content/posts/usage/getting-started.md
  11. 4
      exampleSite/static/custom.css
  12. 150
      exampleSite/static/custom.css.example
  13. BIN
      images/readme.png
  14. BIN
      images/screenshot-plain.png
  15. BIN
      images/screenshot.png
  16. BIN
      images/tn.png
  17. 2
      layouts/_default/baseof.html
  18. 5
      layouts/partials/content.html
  19. 2
      layouts/partials/head/others.html
  20. 39
      layouts/partials/site-header.html
  21. 1
      src/iconfont/uEA1C-brightness_auto.svg
  22. 1
      src/iconfont/uEA1D-brightness_dark.svg
  23. 1
      src/iconfont/uEA1E-brightness_light.svg
  24. 5
      src/icons/brightness_auto.svg
  25. 5
      src/icons/brightness_dark.svg
  26. 5
      src/icons/brightness_light.svg
  27. 51
      src/js/darkmode.js
  28. 10
      src/js/mermaid-loader.js
  29. 201
      src/sass/_base.scss
  30. 72
      src/sass/_chroma_base.scss
  31. 341
      src/sass/_chroma_dark.scss
  32. 376
      src/sass/_chroma_github.scss
  33. 360
      src/sass/_chroma_light.scss
  34. 103
      src/sass/_color_mode.scss
  35. 42
      src/sass/_defaults.scss
  36. 60
      src/sass/_markdown.scss
  37. 41
      src/sass/_mobile.scss
  38. 37
      src/sass/_shortcodes.scss
  39. 8
      src/sass/_utils.scss
  40. 7
      src/sass/main.scss

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 12 KiB

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

@ -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 -->

Binary file not shown.

After

Width:  |  Height:  |  Size: 462 KiB

@ -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.

Binary file not shown.

After

Width:  |  Height:  |  Size: 350 KiB

@ -8,11 +8,23 @@ tags:
- Features
---
Personalize the look of your site.
{{< toc >}}
<!--more-->
## Color Scheme
{{< toc >}}
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
@ -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!

@ -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 -->

@ -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:

@ -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/)

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

@ -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;
}
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 252 KiB

After

Width:  |  Height:  |  Size: 180 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 190 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 187 KiB

After

Width:  |  Height:  |  Size: 507 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 117 KiB

After

Width:  |  Height:  |  Size: 108 KiB

@ -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">

@ -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 -}}

@ -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">

@ -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">

@ -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>

After

Width:  |  Height:  |  Size: 381 B

@ -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>

After

Width:  |  Height:  |  Size: 422 B

@ -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>

After

Width:  |  Height:  |  Size: 357 B

@ -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>

After

Width:  |  Height:  |  Size: 475 B

@ -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>

After

Width:  |  Height:  |  Size: 523 B

@ -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>

After

Width:  |  Height:  |  Size: 457 B

@ -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;
}

@ -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",

@ -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;
}
}

@ -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;
}
}

@ -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<