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`.