feat: add dark mode (#109)
GitHub
parent
9b2a28d7b5
commit
472b50ca22
40 changed files with 1592 additions and 496 deletions
|
Before Width: | Height: | Size: 12 KiB |
@ -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 --> |
||||
|
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! |
||||
|
||||
[](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. |
||||
|
After Width: | Height: | Size: 350 KiB |
@ -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; |
||||
} |
||||
} |
||||
|
Before Width: | Height: | Size: 252 KiB After Width: | Height: | Size: 180 KiB |
|
Before Width: | Height: | Size: 190 KiB |
|
Before Width: | Height: | Size: 187 KiB After Width: | Height: | Size: 507 KiB |
|
Before Width: | Height: | Size: 117 KiB After Width: | Height: | Size: 108 KiB |
@ -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 -}} |
||||
|
||||
|
After Width: | Height: | Size: 381 B |
|
After Width: | Height: | Size: 422 B |
|
After Width: | Height: | Size: 357 B |
|
After Width: | Height: | Size: 475 B |
|
After Width: | Height: | Size: 523 B |
|
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; |
||||
} |
||||
@ -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< | ||||