Welcome to mirror list, hosted at ThFree Co, Russian Federation.

github.com/thegeeklab/hugo-geekblog.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorRobert Kaussow <mail@thegeeklab.de>2022-06-02 15:01:56 +0300
committerGitHub <noreply@github.com>2022-06-02 15:01:56 +0300
commit29021a4cb8beb5d8dd87fe010fb9ff2ab132435d (patch)
treeb8baa33e9cd78466e30adf1cdd322beccaf87d18
parent77791d1f8e49dba6df7dc63b0ce7dcb10d29e48f (diff)
feat: add option `geekblogDarkModeCode` to enforce dark code blocks (#255)v0.19.0
Diffstat
-rw-r--r--exampleSite/content/posts/usage/configuration.md6
-rw-r--r--exampleSite/static/custom.css.example4
-rw-r--r--layouts/_default/baseof.html1
-rw-r--r--layouts/partials/site-header.html2
-rw-r--r--src/js/app.js2
-rw-r--r--src/js/colorTheme.js53
-rw-r--r--src/js/config.js8
-rw-r--r--src/js/darkmode.js53
-rw-r--r--src/js/mermaid.js9
-rw-r--r--src/sass/_asciidoc.scss2
-rw-r--r--src/sass/_base.scss30
-rw-r--r--src/sass/_color_mode.scss36
-rw-r--r--src/sass/_shortcodes.scss2
-rw-r--r--svgsprite.config.json2
14 files changed, 116 insertions, 94 deletions
diff --git a/exampleSite/content/posts/usage/configuration.md b/exampleSite/content/posts/usage/configuration.md
index 48e1d0c..6d0f173 100644
--- a/exampleSite/content/posts/usage/configuration.md
+++ b/exampleSite/content/posts/usage/configuration.md
@@ -121,6 +121,9 @@ enableRobotsTXT = true
# bright spots while using the dark mode.
geekblogDarkModeDim = false
+ # (Optional, default false) Enforce code blocks to always use the dark color theme.
+ geekblogDarkModeCode = false
+
# (Optional, default true) Display a "Back to top" link in the site footer.
geekblogBackToTop = true
@@ -250,6 +253,9 @@ params:
# bright spots while using the dark mode.
geekblogDarkModeDim: false
+ # (Optional, default false) Enforce code blocks to always use the dark color theme.
+ geekblogDarkModeCode: false
+
# (Optional, default true) Display a "Back to top" link in the site footer.
geekblogBackToTop: true
diff --git a/exampleSite/static/custom.css.example b/exampleSite/static/custom.css.example
index b9ae4f9..3134d16 100644
--- a/exampleSite/static/custom.css.example
+++ b/exampleSite/static/custom.css.example
@@ -6,7 +6,7 @@
/* Light mode theming */
:root,
-:root[color-mode="light"] {
+:root[color-theme="light"] {
--header-background: #4ec58a;
--header-font-color: #ffffff;
@@ -78,7 +78,7 @@
}
/* Dark mode theming */
-:root[color-mode="dark"] {
+:root[color-theme="dark"] {
--header-background: #4ec58a;
--header-font-color: #ffffff;
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 1d32640..6ddc4d4 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -4,6 +4,7 @@
itemtype="http://schema.org/WebPage"
lang="{{ .Site.Language.Lang }}"
class="color-toggle-hidden"
+ {{ if default false .Site.Params.GeekblogDarkModeCode }}code-theme="dark"{{ end }}
>
<head>
{{ partial "head/meta" . }}
diff --git a/layouts/partials/site-header.html b/layouts/partials/site-header.html
index 35fb1f0..3bbcc82 100644
--- a/layouts/partials/site-header.html
+++ b/layouts/partials/site-header.html
@@ -17,7 +17,7 @@
</a>
</div>
<div class="gblog-header__col-3 flex justify-end">
- <span id="gblog-dark-mode">
+ <span id="gblog-color-theme">
<svg class="gblog-icon gblog_brightness_dark">
<title>{{ i18n "button_toggle_dark" }}</title>
<use xlink:href="#gblog_brightness_dark"></use>
diff --git a/src/js/app.js b/src/js/app.js
index 50b5f4c..ee718a6 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -1,4 +1,4 @@
-const { applyTheme } = require("./darkmode")
+const { applyTheme } = require("./colorTheme")
const { createCopyButton } = require("./copycode.js")
const Clipboard = require("clipboard")
diff --git a/src/js/colorTheme.js b/src/js/colorTheme.js
new file mode 100644
index 0000000..e069e25
--- /dev/null
+++ b/src/js/colorTheme.js
@@ -0,0 +1,53 @@
+const Storage = require("store2")
+
+const { TOGGLE_COLOR_THEMES, THEME, COLOR_THEME_AUTO } = require("./config.js")
+
+document.addEventListener("DOMContentLoaded", (event) => {
+ const colorThemeToggle = document.getElementById("gblog-color-theme")
+
+ colorThemeToggle.onclick = function () {
+ let lstore = Storage.namespace(THEME)
+ let currentColorTheme = lstore.get("color-theme")
+ let nextColorTheme = toggle(TOGGLE_COLOR_THEMES, currentColorTheme)
+
+ lstore.set("color-theme", TOGGLE_COLOR_THEMES[nextColorTheme])
+ applyTheme(false)
+ }
+})
+
+export function applyTheme(init = true) {
+ if (Storage.isFake()) return
+
+ let lstore = Storage.namespace(THEME)
+ let html = document.documentElement
+ let currentColorTheme = TOGGLE_COLOR_THEMES.includes(lstore.get("color-theme"))
+ ? lstore.get("color-theme")
+ : COLOR_THEME_AUTO
+
+ html.setAttribute("class", "color-toggle-" + currentColorTheme)
+ lstore.set("color-theme", currentColorTheme)
+
+ if (currentColorTheme === COLOR_THEME_AUTO) {
+ html.removeAttribute("color-theme")
+ } else {
+ html.setAttribute("color-theme", currentColorTheme)
+ }
+
+ if (!init) {
+ // Reload required to re-initialise e.g. Mermaid with the new theme
+ // and re-parse the Mermaid code blocks.
+ location.reload()
+ }
+}
+
+function toggle(list = [], value) {
+ let current = list.indexOf(value)
+ let max = list.length - 1
+ let next = 0
+
+ if (current < max) {
+ next = current + 1
+ }
+
+ return next
+}
diff --git a/src/js/config.js b/src/js/config.js
index 93dfa50..0868077 100644
--- a/src/js/config.js
+++ b/src/js/config.js
@@ -1,5 +1,5 @@
-export const DARK_MODE = "dark"
-export const LIGHT_MODE = "light"
-export const AUTO_MODE = "auto"
+export const COLOR_THEME_DARK = "dark"
+export const COLOR_THEME_LIGHT = "light"
+export const COLOR_THEME_AUTO = "auto"
export const THEME = "hugo-geekblog"
-export const TOGGLE_MODES = [AUTO_MODE, DARK_MODE, LIGHT_MODE]
+export const TOGGLE_COLOR_THEMES = [COLOR_THEME_AUTO, COLOR_THEME_DARK, COLOR_THEME_LIGHT]
diff --git a/src/js/darkmode.js b/src/js/darkmode.js
deleted file mode 100644
index ecc070c..0000000
--- a/src/js/darkmode.js
+++ /dev/null
@@ -1,53 +0,0 @@
-const Storage = require("store2")
-
-const { TOGGLE_MODES, THEME, AUTO_MODE } = require("./config.js")
-
-document.addEventListener("DOMContentLoaded", (event) => {
- const darkModeToggle = document.getElementById("gblog-dark-mode")
-
- darkModeToggle.onclick = function () {
- let lstore = Storage.namespace(THEME)
- let currentMode = lstore.get("color-mode")
- let nextMode = toggle(TOGGLE_MODES, currentMode)
-
- lstore.set("color-mode", TOGGLE_MODES[nextMode])
- applyTheme(false)
- }
-})
-
-export function applyTheme(init = true) {
- if (Storage.isFake()) return
-
- let lstore = Storage.namespace(THEME)
- let html = document.documentElement
- let currentMode = TOGGLE_MODES.includes(lstore.get("color-mode"))
- ? lstore.get("color-mode")
- : AUTO_MODE
-
- html.setAttribute("class", "color-toggle-" + currentMode)
- lstore.set("color-mode", 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()
- }
-}
-
-function toggle(list = [], value) {
- let current = list.indexOf(value)
- let max = list.length - 1
- let next = 0
-
- if (current < max) {
- next = current + 1
- }
-
- return next
-}
diff --git a/src/js/mermaid.js b/src/js/mermaid.js
index b480c48..65ca8f8 100644
--- a/src/js/mermaid.js
+++ b/src/js/mermaid.js
@@ -1,14 +1,17 @@
const Storage = require("store2")
-const { DARK_MODE, THEME, AUTO_MODE } = require("./config.js")
+const { COLOR_THEME_DARK, THEME, COLOR_THEME_AUTO } = require("./config.js")
document.addEventListener("DOMContentLoaded", function (event) {
let lstore = Storage.namespace(THEME)
- let currentMode = lstore.get("color-mode")
+ let currentColorTheme = lstore.get("color-theme")
let darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)")
let darkMode = false
let theme = "default"
- if (currentMode === DARK_MODE || (currentMode === AUTO_MODE && darkModeQuery.matches)) {
+ if (
+ currentColorTheme === COLOR_THEME_DARK ||
+ (currentColorTheme === COLOR_THEME_AUTO && darkModeQuery.matches)
+ ) {
darkMode = true
theme = "dark"
}
diff --git a/src/sass/_asciidoc.scss b/src/sass/_asciidoc.scss
index 2589e59..b8bd4ad 100644
--- a/src/sass/_asciidoc.scss
+++ b/src/sass/_asciidoc.scss
@@ -48,7 +48,7 @@
@each $name, $icon in $hint-icons {
i.fa.icon-#{$name} {
- background-image: url(img/geekdoc-stack.svg##{$icon});
+ background-image: url(img/geekblog-stack.svg##{$icon});
}
}
}
diff --git a/src/sass/_base.scss b/src/sass/_base.scss
index 8199400..06b95ba 100644
--- a/src/sass/_base.scss
+++ b/src/sass/_base.scss
@@ -1,23 +1,31 @@
:root,
-:root[color-mode="light"] {
+:root[color-theme="light"] {
--code-max-height: none;
- @include light_mode;
+ @include color_theme_light;
+ @include code_theme_light;
}
@media (prefers-color-scheme: light) {
:root {
- @include light_mode;
+ @include color_theme_light;
+ @include code_theme_light;
}
}
-:root[color-mode="dark"] {
- @include dark_mode;
+:root[color-theme="dark"] {
+ @include color_theme_dark;
+ @include code_theme_dark;
+}
+
+:root[code-theme="dark"] {
+ @include code_theme_dark;
}
@media (prefers-color-scheme: dark) {
:root {
- @include dark_mode;
+ @include color_theme_dark;
+ @include code_theme_dark;
}
}
@@ -27,7 +35,7 @@ html {
scroll-behavior: smooth;
&.color-toggle-hidden {
- #gblog-dark-mode {
+ #gblog-color-theme {
.gblog_brightness_auto,
.gblog_brightness_dark,
.gblog_brightness_light {
@@ -37,7 +45,7 @@ html {
}
&.color-toggle-light {
- #gblog-dark-mode {
+ #gblog-color-theme {
.gblog_brightness_light {
display: inline-block;
}
@@ -49,7 +57,7 @@ html {
}
&.color-toggle-dark {
- #gblog-dark-mode {
+ #gblog-color-theme {
.gblog_brightness_dark {
display: inline-block;
}
@@ -61,7 +69,7 @@ html {
}
&.color-toggle-auto {
- #gblog-dark-mode {
+ #gblog-color-theme {
.gblog_brightness_light {
display: none;
}
@@ -141,7 +149,7 @@ img {
vertical-align: middle;
}
-#gblog-dark-mode {
+#gblog-color-theme {
cursor: pointer;
svg.gblog-icon {
diff --git a/src/sass/_color_mode.scss b/src/sass/_color_mode.scss
index 481aa4b..3db3b54 100644
--- a/src/sass/_color_mode.scss
+++ b/src/sass/_color_mode.scss
@@ -1,6 +1,4 @@
-@mixin light_mode {
- @include chroma_github;
-
+@mixin color_theme_light {
--header-background: #{$main-color};
--header-font-color: #{$white};
@@ -16,11 +14,6 @@
--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")};
@@ -49,9 +42,7 @@
}
}
-@mixin dark_mode {
- @include chroma_dark;
-
+@mixin color_theme_dark {
--header-background: #{$main-color};
--header-font-color: #{$white};
@@ -67,11 +58,6 @@
--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")};
@@ -107,3 +93,21 @@
}
}
}
+
+@mixin code_theme_dark {
+ @include chroma_dark;
+
+ --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};
+}
+
+@mixin code_theme_light {
+ @include chroma_github;
+
+ --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};
+}
diff --git a/src/sass/_shortcodes.scss b/src/sass/_shortcodes.scss
index cb756a9..4dc4e83 100644
--- a/src/sass/_shortcodes.scss
+++ b/src/sass/_shortcodes.scss
@@ -165,7 +165,7 @@
@each $name, $icon in $hint-icons {
i.fa.#{$name} {
- background-image: url(img/geekdoc-stack.svg##{$icon});
+ background-image: url(img/geekblog-stack.svg##{$icon});
}
}
diff --git a/svgsprite.config.json b/svgsprite.config.json
index 0d07292..45c68e8 100644
--- a/svgsprite.config.json
+++ b/svgsprite.config.json
@@ -28,7 +28,7 @@
},
"stack": {
"dest": "build/img/",
- "sprite": "geekdoc-stack.svg",
+ "sprite": "geekblog-stack.svg",
"bust": false
}
}
generated by cgit v1.2.3 (git 2.25.1) at 2024-06-07 00:47:43 +0300