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

This commit is contained in:
Robert Kaussow 2022-12-21 11:41:23 +01:00 committed by GitHub
parent 890df329dc
commit b11460f532
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 18 additions and 12 deletions

View File

@ -114,6 +114,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.
geekblogOverwriteHTMLBase = false geekblogOverwriteHTMLBase = false
# (Optional, default true) Enable or disable the JavaScript based color theme toggle switch. The CSS based
# user preference mode still works.
geekblogDarkModeToggle = false
# (Optional, default true) Enable or disable adding tags automatically to the main menu. # (Optional, default true) Enable or disable adding tags automatically to the main menu.
geekblogTagsToMenu = true geekblogTagsToMenu = true
@ -250,6 +254,10 @@ params:
# See https://developer.mozilla.org/de/docs/Web/HTML/Element/base. # See https://developer.mozilla.org/de/docs/Web/HTML/Element/base.
geekblogOverwriteHTMLBase: false geekblogOverwriteHTMLBase: false
# (Optional, default true) Enable or disable the JavaScript based color theme toggle switch. The CSS based
# user preference mode still works.
geekblogDarkModeToggle: false
# (Optional, default true) Enable or disable adding tags automatically to the main menu. # (Optional, default true) Enable or disable adding tags automatically to the main menu.
geekblogTagsToMenu: true geekblogTagsToMenu: true

View File

@ -1,3 +1,6 @@
{{- if default true .Site.Params.GeekblogDarkModeToggle }}
<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("gblog-color-theme") const colorThemeToggle = document.getElementById("gblog-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,13 +36,9 @@ html {
&.color-toggle-hidden { &.color-toggle-hidden {
#gblog-color-theme { #gblog-color-theme {
.gblog_brightness_auto,
.gblog_brightness_dark,
.gblog_brightness_light {
display: none; display: none;
} }
} }
}
&.color-toggle-light { &.color-toggle-light {
#gblog-color-theme { #gblog-color-theme {

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