feat: add option to enable or disable the dark mode toggle button (#529)

This commit is contained in:
Robert Kaussow 2022-11-02 15:48:45 +01:00 committed by GitHub
parent d0a7f2bb60
commit e9ece03388
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 18 additions and 12 deletions

View File

@ -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

View File

@ -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

View File

@ -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")

View File

@ -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)

View File

@ -36,13 +36,9 @@ html {
&.color-toggle-hidden {
#gdoc-color-theme {
.gdoc_brightness_auto,
.gdoc_brightness_dark,
.gdoc_brightness_light {
display: none;
}
}
}
&.color-toggle-light {
#gdoc-color-theme {

View File

@ -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}"))