diff --git a/packages/create-docusaurus/templates/classic-typescript/docusaurus.config.ts b/packages/create-docusaurus/templates/classic-typescript/docusaurus.config.ts
index 1ef4506097..671bab5472 100644
--- a/packages/create-docusaurus/templates/classic-typescript/docusaurus.config.ts
+++ b/packages/create-docusaurus/templates/classic-typescript/docusaurus.config.ts
@@ -71,6 +71,9 @@ const config: Config = {
   themeConfig: {
     // Replace with your project's social card
     image: 'img/docusaurus-social-card.jpg',
+    colorMode: {
+      respectPrefersColorScheme: true,
+    },
     navbar: {
       title: 'My Site',
       logo: {
diff --git a/packages/create-docusaurus/templates/classic/docusaurus.config.js b/packages/create-docusaurus/templates/classic/docusaurus.config.js
index 124755d17f..be91f221b4 100644
--- a/packages/create-docusaurus/templates/classic/docusaurus.config.js
+++ b/packages/create-docusaurus/templates/classic/docusaurus.config.js
@@ -79,6 +79,9 @@ const config = {
     ({
       // Replace with your project's social card
       image: 'img/docusaurus-social-card.jpg',
+      colorMode: {
+        respectPrefersColorScheme: true,
+      },
       navbar: {
         title: 'My Site',
         logo: {