diff options
author | Robert Kaussow <mail@thegeeklab.de> | 2022-11-02 17:48:45 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-11-02 17:48:45 +0300 |
commit | e9ece033884993a2cffa67f0dd190889930c66ec (patch) | |
tree | a849e24792d8bbb8095902a232b7f70b705d29ba | |
parent | d0a7f2bb609d7603c58ab8953488f5c1c623463c (diff) |
feat: add option to enable or disable the dark mode toggle button (#529)v0.36.0
-rw-r--r-- | exampleSite/content/en/usage/configuration.md | 8 | ||||
-rw-r--r-- | layouts/partials/head/others.html | 3 | ||||
-rw-r--r-- | src/js/app.js | 5 | ||||
-rw-r--r-- | src/js/colorTheme.js | 7 | ||||
-rw-r--r-- | src/sass/_base.scss | 6 | ||||
-rw-r--r-- | webpack.config.js | 1 |
6 files changed, 18 insertions, 12 deletions
diff --git a/exampleSite/content/en/usage/configuration.md b/exampleSite/content/en/usage/configuration.md index 3b16af7..094c4b7 100644 --- a/exampleSite/content/en/usage/configuration.md +++ b/exampleSite/content/en/usage/configuration.md @@ -102,6 +102,10 @@ enableRobotsTXT = true # See https://developer.mozilla.org/de/docs/Web/HTML/Element/base. geekdocOverwriteHTMLBase = false + # (Optional, default true) Enable or disable the JavaScript based color theme toggle switch. The CSS based + # user preference mode still works. + geekdocDarkModeToggle = false + # (Optional, default false) Auto-decrease brightness of images and add a slightly grayscale to avoid # bright spots while using the dark mode. geekdocDarkModeDim = false @@ -224,6 +228,10 @@ params: # See https://developer.mozilla.org/de/docs/Web/HTML/Element/base. geekdocOverwriteHTMLBase: false + # (Optional, default true) Enable or disable the JavaScript based color theme toggle switch. The CSS based + # user preference mode still works. + geekdocDarkModeToggle: false + # (Optional, default false) Auto-decrease brightness of images and add a slightly grayscale to avoid # bright spots while using the dark mode. geekdocDarkModeDim: false diff --git a/layouts/partials/head/others.html b/layouts/partials/head/others.html index a9c9f34..8d0a6d4 100644 --- a/layouts/partials/head/others.html +++ b/layouts/partials/head/others.html @@ -1,3 +1,6 @@ +{{- if default true .Site.Params.GeekdocDarkModeToggle }} + <script src="{{ index (index .Site.Data.assets "colortheme.js") "src" | relURL }}"></script> +{{- end }} <script src="{{ index (index .Site.Data.assets "main.js") "src" | relURL }}"></script> <link diff --git a/src/js/app.js b/src/js/app.js index cbbf070..1bd0bde 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -1,11 +1,6 @@ -const { applyTheme } = require("./colorTheme") const { createCopyButton } = require("./copycode.js") const Clipboard = require("clipboard") -;(() => { - applyTheme() -})() - document.addEventListener("DOMContentLoaded", function (event) { let clipboard = new Clipboard(".clip") diff --git a/src/js/colorTheme.js b/src/js/colorTheme.js index e874299..e0c9077 100644 --- a/src/js/colorTheme.js +++ b/src/js/colorTheme.js @@ -1,7 +1,10 @@ const Storage = require("store2") - const { TOGGLE_COLOR_THEMES, THEME, COLOR_THEME_AUTO } = require("./config.js") +;(() => { + applyTheme() +})() + document.addEventListener("DOMContentLoaded", (event) => { const colorThemeToggle = document.getElementById("gdoc-color-theme") @@ -15,7 +18,7 @@ document.addEventListener("DOMContentLoaded", (event) => { } }) -export function applyTheme(init = true) { +function applyTheme(init = true) { if (Storage.isFake()) return let lstore = Storage.namespace(THEME) diff --git a/src/sass/_base.scss b/src/sass/_base.scss index 23c93e4..9dec059 100644 --- a/src/sass/_base.scss +++ b/src/sass/_base.scss @@ -36,11 +36,7 @@ html { &.color-toggle-hidden { #gdoc-color-theme { - .gdoc_brightness_auto, - .gdoc_brightness_dark, - .gdoc_brightness_light { - display: none; - } + display: none; } } diff --git a/webpack.config.js b/webpack.config.js index 09d8085..392f47c 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -18,6 +18,7 @@ var config = { path.resolve("src", "sass", "print.scss") ], main: path.resolve("src", "js", "app.js"), + colortheme: path.resolve("src", "js", "colorTheme.js"), mermaid: path.resolve("src", "js", "mermaid.js"), katex: [path.resolve("src", "js", "katex.js")].concat( glob.sync(path.join(nodeModulesPath, "katex", "dist", "fonts", "*.{woff,woff2}")) |