From a7a0ebf01751e1b95980af8bb66bcc0f38f2590f Mon Sep 17 00:00:00 2001
From: Georgi Matev <gmatev@alcion.ai>
Date: Wed, 14 Dec 2022 09:23:22 -0800
Subject: [PATCH] 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?

- [ ] :white_check_mark: Yes, it's included
- [ ] :clock1: Yes, but in a later PR
- [x] :no_entry: No

## Type of change

<!--- Please check the type of change your PR introduces: --->
- [x] :sunflower: Feature
- [ ] :bug: Bugfix
- [ ] :world_map: Documentation
- [ ] :robot: Test
- [ ] :computer: CI/Deployment
- [ ] :hamster: Trivial/Minor

## Issue(s)

## Test Plan

<!-- How will this be tested prior to merging.-->
- [x] :muscle: Manual
- [ ] :zap: Unit test
- [ ] :green_heart: E2E
---
 website/docusaurus.config.js         |  4 ++--
 website/src/components/parts/Demo.js |  1 +
 website/src/css/custom.scss          |  7 +++++++
 website/src/pages/index.js           | 21 ++++++++++++++++++++-
 4 files changed, 30 insertions(+), 3 deletions(-)

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