diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index fd5605789..1a05fc499 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -145,8 +145,8 @@ const config = {
       },
       colorMode: {
         defaultMode: 'dark',
-        disableSwitch: true,
-        respectPrefersColorScheme: false,
+        disableSwitch: false,
+        respectPrefersColorScheme: true,
       },
 
       zoom: {
diff --git a/website/src/components/parts/Demo.js b/website/src/components/parts/Demo.js
index c06bbe6c6..6981a1f4e 100644
--- a/website/src/components/parts/Demo.js
+++ b/website/src/components/parts/Demo.js
@@ -18,6 +18,7 @@ export default function Demo() {
                 borderLeft: "2px solid #e5e7eb",
                 borderRight: "2px solid #e5e7eb",
                 borderBottom: "2px solid #e5e7eb",
+                backgroundColor: "#121831",
               }}
             >
               <video className="w-full" poster="assets/images/corso_demo_thumbnail.png" muted loop autoPlay playsInline>
diff --git a/website/src/css/custom.scss b/website/src/css/custom.scss
index 4c71d692c..c90e8327a 100644
--- a/website/src/css/custom.scss
+++ b/website/src/css/custom.scss
@@ -11,6 +11,13 @@ CUSTOM TO THE NEW HOME PAGE
 html{
   scroll-behavior: smooth !important;
 }
+
+.plugin-pages {
+  .colorModeToggle_---node_modules-\@docusaurus-theme-classic-lib-theme-Navbar-Content-styles-module {
+    display: none;
+  }
+}
+
 .accordion-button-custom::after {
   -ms-flex-shrink: 0;
   flex-shrink: 0;
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index 9777020dd..193f1bd37 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -1,6 +1,24 @@
-import React from "react";
+import React, { useEffect } from "react";
 import Layout from "@theme/Layout";
 import { MainComp } from "@site/src/components/parts/MainComp";
+import { useColorMode } from '@docusaurus/theme-common';
+
+const ThemeColor = () => {
+  const { colorMode, setColorMode } = useColorMode();
+
+  useEffect(function () {
+    if (window.location.pathname === '/') {
+      if (colorMode !== 'dark') {
+        //force dark theme to home page without overriding user settings
+        setColorMode('dark', { persist: false })
+      }
+    } else {
+      setColorMode(localStorage.getItem('theme'))
+    }
+  });
+
+  return null
+};
 
 export default function Home() {
   return (
@@ -8,6 +26,7 @@ export default function Home() {
       title="Free, Secure, and Open-Source Backup for Microsoft 365"
       description="Intro, docs, and blog for Corso, an open-source tool, that protects Microsoft 365 data by securely and efficiently backing up all business-critical data to object storage."
     >
+      <ThemeColor />
       <MainComp />
     </Layout>
   );