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. # See https://developer.mozilla.org/de/docs/Web/HTML/Element/base.
geekdocOverwriteHTMLBase = false 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 # (Optional, default false) Auto-decrease brightness of images and add a slightly grayscale to avoid
# bright spots while using the dark mode. # bright spots while using the dark mode.
geekdocDarkModeDim = false geekdocDarkModeDim = false
@ -224,6 +228,10 @@ params:
# See https://developer.mozilla.org/de/docs/Web/HTML/Element/base. # See https://developer.mozilla.org/de/docs/Web/HTML/Element/base.
geekdocOverwriteHTMLBase: false 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 # (Optional, default false) Auto-decrease brightness of images and add a slightly grayscale to avoid
# bright spots while using the dark mode. # bright spots while using the dark mode.
geekdocDarkModeDim: false 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> <script src="{{ index (index .Site.Data.assets "main.js") "src" | relURL }}"></script>
<link <link

View file

@ -1,11 +1,6 @@
const { applyTheme } = require("./colorTheme")
const { createCopyButton } = require("./copycode.js") const { createCopyButton } = require("./copycode.js")
const Clipboard = require("clipboard") const Clipboard = require("clipboard")
;(() => {
applyTheme()
})()
document.addEventListener("DOMContentLoaded", function (event) { document.addEventListener("DOMContentLoaded", function (event) {
let clipboard = new Clipboard(".clip") let clipboard = new Clipboard(".clip")

View file

@ -1,7 +1,10 @@
const Storage = require("store2") const Storage = require("store2")
const { TOGGLE_COLOR_THEMES, THEME, COLOR_THEME_AUTO } = require("./config.js") const { TOGGLE_COLOR_THEMES, THEME, COLOR_THEME_AUTO } = require("./config.js")
;(() => {
applyTheme()
})()
document.addEventListener("DOMContentLoaded", (event) => { document.addEventListener("DOMContentLoaded", (event) => {
const colorThemeToggle = document.getElementById("gdoc-color-theme") 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 if (Storage.isFake()) return
let lstore = Storage.namespace(THEME) let lstore = Storage.namespace(THEME)

View file

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

View file

@ -18,6 +18,7 @@ var config = {
path.resolve("src", "sass", "print.scss") path.resolve("src", "sass", "print.scss")
], ],
main: path.resolve("src", "js", "app.js"), main: path.resolve("src", "js", "app.js"),
colortheme: path.resolve("src", "js", "colorTheme.js"),
mermaid: path.resolve("src", "js", "mermaid.js"), mermaid: path.resolve("src", "js", "mermaid.js"),
katex: [path.resolve("src", "js", "katex.js")].concat( katex: [path.resolve("src", "js", "katex.js")].concat(
glob.sync(path.join(nodeModulesPath, "katex", "dist", "fonts", "*.{woff,woff2}")) glob.sync(path.join(nodeModulesPath, "katex", "dist", "fonts", "*.{woff,woff2}"))