diff --git a/exampleSite/content/posts/usage/configuration.md b/exampleSite/content/posts/usage/configuration.md
index 82577d6..e83f895 100644
--- a/exampleSite/content/posts/usage/configuration.md
+++ b/exampleSite/content/posts/usage/configuration.md
@@ -114,6 +114,10 @@ enableRobotsTXT = true
   # See https://developer.mozilla.org/de/docs/Web/HTML/Element/base.
   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.
   geekblogTagsToMenu = true
 
@@ -250,6 +254,10 @@ params:
   # See https://developer.mozilla.org/de/docs/Web/HTML/Element/base.
   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.
   geekblogTagsToMenu: true
 
diff --git a/layouts/partials/head/others.html b/layouts/partials/head/others.html
index 3e1ab23..825f72f 100644
--- a/layouts/partials/head/others.html
+++ b/layouts/partials/head/others.html
@@ -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>
 
 <link
diff --git a/src/js/app.js b/src/js/app.js
index ee718a6..4cacf32 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 5460b07..edca610 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("gblog-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 0da5684..330378c 100644
--- a/src/sass/_base.scss
+++ b/src/sass/_base.scss
@@ -36,11 +36,7 @@ html {
 
   &.color-toggle-hidden {
     #gblog-color-theme {
-      .gblog_brightness_auto,
-      .gblog_brightness_dark,
-      .gblog_brightness_light {
-        display: none;
-      }
+      display: none;
     }
   }
 
diff --git a/webpack.config.js b/webpack.config.js
index 4f50af5..19e09f0 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}"))