From 14f4ef875aaad6471e9558da571f773fccb25621 Mon Sep 17 00:00:00 2001
From: Alexey Pyltsyn <lex61rus@gmail.com>
Date: Fri, 17 Apr 2020 14:19:55 +0300
Subject: [PATCH] feat(v2): add ability set dark mode by default (#2597)

* feat(v2): add ability set dark mode by default

* s/forceDarkMode/defaultDarkMode

Co-authored-by: Yangshun Tay <tay.yang.shun@gmail.com>
---
 packages/docusaurus-theme-classic/src/index.js | 15 ++++++++++-----
 website/docs/theme-classic.md                  | 12 ++++++++++++
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/index.js b/packages/docusaurus-theme-classic/src/index.js
index 47b2c2d274..4233540a82 100644
--- a/packages/docusaurus-theme-classic/src/index.js
+++ b/packages/docusaurus-theme-classic/src/index.js
@@ -11,7 +11,9 @@ const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin')
 // Need to be inlined to prevent dark mode FOUC
 // Make sure that the 'storageKey' is the same as the one in `/theme/hooks/useTheme.js`
 const storageKey = 'theme';
-const noFlash = `(function() {
+const noFlash = (defaultDarkMode) => `(function() {
+  var defaultDarkMode = ${defaultDarkMode};
+
   function setDataThemeAttribute(theme) {
     document.documentElement.setAttribute('data-theme', theme);
   }
@@ -30,7 +32,7 @@ const noFlash = `(function() {
   var preferredTheme = getPreferredTheme();
   if (preferredTheme !== null) {
     setDataThemeAttribute(preferredTheme);
-  } else if (darkQuery.matches) {
+  } else if (darkQuery.matches || defaultDarkMode) {
     setDataThemeAttribute('dark');
   }
 })();`;
@@ -39,8 +41,11 @@ module.exports = function (context, options) {
   const {
     siteConfig: {themeConfig},
   } = context;
-  const {disableDarkMode = false, prism: {additionalLanguages = []} = {}} =
-    themeConfig || {};
+  const {
+    disableDarkMode = false,
+    defaultDarkMode = false,
+    prism: {additionalLanguages = []} = {},
+  } = themeConfig || {};
   const {customCss} = options || {};
 
   return {
@@ -85,7 +90,7 @@ module.exports = function (context, options) {
             attributes: {
               type: 'text/javascript',
             },
-            innerHTML: noFlash,
+            innerHTML: noFlash(defaultDarkMode),
           },
         ],
       };
diff --git a/website/docs/theme-classic.md b/website/docs/theme-classic.md
index c36e90b823..c6d4ce8afb 100644
--- a/website/docs/theme-classic.md
+++ b/website/docs/theme-classic.md
@@ -25,6 +25,18 @@ module.exports = {
 };
 ```
 
+With the enabled `defaultDarkMode` option you could set dark mode by default. However, in this case, the user's preference will not be taken into account until they manually sets the desired mode via toggle in the navbar.
+
+```js {4} title="docusaurus.config.js"
+module.exports = {
+  // ...
+  themeConfig: {
+    defaultDarkMode: true,
+    // ...
+  },
+};
+```
+
 ### Meta image
 
 You can configure a default image that will be used for your meta tag, in particular `og:image` and `twitter:image`.