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 }} > {{ 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 @@
- + {{ i18n "button_toggle_dark" }} 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 } }