Force home page to dark mode while allowing choice for other pages (#1810)

## Description

Force home page to dark mode while allowing choice for other pages

## Does this PR need a docs update or release note?

- [ ] ✅ Yes, it's included
- [ ] 🕐 Yes, but in a later PR
- [x] ⛔ No 

## Type of change

<!--- Please check the type of change your PR introduces: --->
- [x] 🌻 Feature
- [ ] 🐛 Bugfix
- [ ] 🗺️ Documentation
- [ ] 🤖 Test
- [ ] 💻 CI/Deployment
- [ ] 🐹 Trivial/Minor

## Issue(s)

## Test Plan

<!-- How will this be tested prior to merging.-->
- [x] 💪 Manual
- [ ] ⚡ Unit test
- [ ] 💚 E2E

website/docusaurus.config.js

@@ -145,8 +145,8 @@ const config = {
       },
       colorMode: {
         defaultMode: 'dark',
-        disableSwitch: true,
-        respectPrefersColorScheme: false,
+        disableSwitch: false,
+        respectPrefersColorScheme: true,
       },
 
       zoom: {

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>

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;

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>
   );