diff --git a/exampleSite/content/en/usage/configuration.md b/exampleSite/content/en/usage/configuration.md index 8d497e0..3b16af7 100644 --- a/exampleSite/content/en/usage/configuration.md +++ b/exampleSite/content/en/usage/configuration.md @@ -106,6 +106,9 @@ enableRobotsTXT = true # bright spots while using the dark mode. geekdocDarkModeDim = false + # (Optional, default false) Enforce code blocks to always use the dark color theme. + geekdocDarkModeCode = false + # (Optional, default true) Display a "Back to top" link in the site footer. geekdocBackToTop = true @@ -225,6 +228,9 @@ params: # bright spots while using the dark mode. geekdocDarkModeDim: false + # (Optional, default false) Enforce code blocks to always use the dark color theme. + geekdocDarkModeCode: false + # (Optional, default true) Display a "Back to top" link in the site footer. geekdocBackToTop: true diff --git a/exampleSite/static/custom.css.example b/exampleSite/static/custom.css.example index 341a121..2c6c213 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; @@ -76,7 +76,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 071e30f..2c953f4 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,5 +1,9 @@ - + {{ partial "head/meta" . }} diff --git a/layouts/partials/site-header.html b/layouts/partials/site-header.html index 137e53f..5e88360 100644 --- a/layouts/partials/site-header.html +++ b/layouts/partials/site-header.html @@ -31,7 +31,7 @@ {{ end }} - <span id="gdoc-dark-mode"> + <span id="gdoc-color-theme"> <svg class="gdoc-icon gdoc_brightness_dark"> <title>{{ i18n "button_toggle_dark" }} diff --git a/src/js/app.js b/src/js/app.js index 571662c..cbbf070 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..386427d --- /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("gdoc-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 79f77a1..4647c2a 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-geekdoc" -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 6cd75e4..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("gdoc-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..178d029 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 currentMode = 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 ( + currentMode === COLOR_THEME_DARK || + (currentMode === COLOR_THEME_AUTO && darkModeQuery.matches) + ) { darkMode = true theme = "dark" } diff --git a/src/sass/_base.scss b/src/sass/_base.scss index 537e27c..5aa423c 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 { - #gdoc-dark-mode { + #gdoc-color-theme { .gdoc_brightness_auto, .gdoc_brightness_dark, .gdoc_brightness_light { @@ -37,7 +45,7 @@ html { } &.color-toggle-light { - #gdoc-dark-mode { + #gdoc-color-theme { .gdoc_brightness_light { display: inline-block; } @@ -49,7 +57,7 @@ html { } &.color-toggle-dark { - #gdoc-dark-mode { + #gdoc-color-theme { .gdoc_brightness_dark { display: inline-block; } @@ -61,7 +69,7 @@ html { } &.color-toggle-auto { - #gdoc-dark-mode { + #gdoc-color-theme { .gdoc_brightness_light { display: none; } @@ -131,7 +139,7 @@ img { vertical-align: middle; } -#gdoc-dark-mode { +#gdoc-color-theme { cursor: pointer; } diff --git a/src/sass/_color_mode.scss b/src/sass/_color_mode.scss index 4b8192e..164d1c1 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}; @@ -15,11 +13,6 @@ --link-color: #{$link-color}; --link-color-visited: #{$link-color-visited}; - --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")}; @@ -55,9 +48,7 @@ } } -@mixin dark_mode { - @include chroma_dark; - +@mixin color_theme_dark { --header-background: #{$main-color}; --header-font-color: #{$white}; @@ -77,10 +68,6 @@ --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: #{darken($body-background-dark, 4)}; --accent-color-lite: #{darken($body-background-dark, 2)}; @@ -111,3 +98,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}; +}