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

thegeeklab · Nov 2, 2022 · e9ece03 · e9ece03
1 parent d0a7f2b
commit e9ece03
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}"))