Respect site.json for darkmode config

yihao03 · yihao03 · commit cd774d68b64f · 2026-03-20T11:53:29.000+08:00
darkmode is set to be opt in for now until mature
However, if user's device is on dark mode, bootstrap will default to
dark mode until javascript loads, then switch it to white mode
diff --git a/packages/core/src/Page/index.ts b/packages/core/src/Page/index.ts
@@ -167,6 +167,7 @@ export class Page {
       title,
       enableSearch: this.siteConfig.enableSearch,
       codeTheme: this.siteConfig.style.codeTheme,
+      darkMode: this.siteConfig.darkMode,
     };
   }
 
diff --git a/packages/core/src/Page/page.njk b/packages/core/src/Page/page.njk
@@ -1,8 +1,10 @@
 <!DOCTYPE html>
 <html>
 <head>
+    {% if darkMode %}
     <script>
       (function() {
+        window.__MARKBIND_DARK_MODE__ = true;
         const storageKey = 'markbind-theme';
         const darkTheme = 'dark';
         const lightTheme = 'light';
@@ -27,6 +29,7 @@
         window.__MARKBIND_THEME__ = resolvedTheme;
       }());
     </script>
+    {% endif %}
     {%- if asset.headTop %}
     {%- for headContent in asset.headTop %}
     {{ headContent }}
@@ -83,9 +86,11 @@
 <script src="{{ asset.vue }}"></script>
 <script src="{{ asset.markBindJs }}"></script>
 <script src="{{ asset.pageVueRenderJs }}"></script>
+{% if darkMode %}
 <script>
   document.body.setAttribute('data-code-theme', window.__MARKBIND_THEME__ || '{{ codeTheme }}');
 </script>
+{% endif %}
 <script>
   {% if enableSearch %}MarkBind.setupWithSearch(){% else %}MarkBind.setup(){% endif %}
 </script>
diff --git a/packages/core/src/Site/SiteConfig.ts b/packages/core/src/Site/SiteConfig.ts
@@ -64,6 +64,8 @@ export class SiteConfig {
 
   plantumlCheck: boolean;
 
+  darkMode: boolean;
+
   /**
    * @param siteConfigJson The raw json read from the site configuration file
    * @param cliBaseUrl As read from the --baseUrl option
@@ -103,6 +105,8 @@ export class SiteConfig {
     // TODO this should probably be in pluginsContext
     this.plantumlCheck = siteConfigJson.plantumlCheck !== undefined
       ? siteConfigJson.plantumlCheck : true; // check PlantUML's prerequisite by default
+
+    this.darkMode = siteConfigJson.darkMode === true;
   }
 
   /**
diff --git a/packages/vue-components/src/DarkModeToggle.vue b/packages/vue-components/src/DarkModeToggle.vue
@@ -1,5 +1,6 @@
 <template>
   <button
+    v-if="enabled"
     type="button"
     class="btn btn-sm btn-outline-secondary dark-mode-toggle"
     :aria-label="buttonLabel"
@@ -50,6 +51,7 @@ function isStoredTheme(theme) {
 export default {
   data() {
     return {
+      enabled: typeof window !== 'undefined' && window.__MARKBIND_DARK_MODE__ === true,
       resolvedTheme: LIGHT_THEME,
       themePreference: null,
       mediaQueryList: null,
@@ -63,6 +65,9 @@ export default {
     },
   },
   mounted() {
+    if (!this.enabled) {
+      return;
+    }
     this.themePreference = this.getStoredThemePreference();
     this.applyTheme(this.themePreference);
 

Original file line number	Diff line number	Diff line change
`@@ -167,6 +167,7 @@ export class Page {`
`167`	`167`	`title,`
`168`	`168`	`enableSearch: this.siteConfig.enableSearch,`
`169`	`169`	`codeTheme: this.siteConfig.style.codeTheme,`
	`170`	`+ darkMode: this.siteConfig.darkMode,`
`170`	`171`	`};`
`171`	`172`	`}`
`172`	`173`