From c9224aa7739cdba7ecfdd9663835a40a3462cb61 Mon Sep 17 00:00:00 2001
From: Niraj Tolia <ntolia@users.noreply.github.com>
Date: Wed, 21 Sep 2022 23:50:26 -0700
Subject: [PATCH] Unify colors between docs and the website (#932)

## Description

Unify colors between docs and the website.

This PR also brings some more color to the homepage

## Type of change

<!--- Please check the type of change your PR introduces: --->
- [x] :sunflower: Feature
- [x] :world_map: Documentation

## Test Plan

- [x] :muscle: Manual
---
 docs/docusaurus.config.js                     |  2 +-
 docs/src/css/custom.scss                      | 41 ++++++++++++-------
 docs/src/pages/index.module.css               |  2 +
 .../src/assets/scss/custom/pages/_hero.scss   |  4 ++
 website/src/index.html                        |  4 +-
 5 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
index 1ac08680b..105927801 100644
--- a/docs/docusaurus.config.js
+++ b/docs/docusaurus.config.js
@@ -126,7 +126,7 @@ const config = {
       colorMode: {
         defaultMode: 'dark',
         disableSwitch: true,
-        respectPrefersColorScheme: true,
+        respectPrefersColorScheme: false,
       },
 
       zoom: {
diff --git a/docs/src/css/custom.scss b/docs/src/css/custom.scss
index 78bd1b6e1..6b0bb7e31 100644
--- a/docs/src/css/custom.scss
+++ b/docs/src/css/custom.scss
@@ -6,29 +6,42 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #2e8555;
-  --ifm-color-primary-dark: #29784c;
-  --ifm-color-primary-darker: #277148;
-  --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: #33925d;
-  --ifm-color-primary-lighter: #359962;
-  --ifm-color-primary-lightest: #3cad6e;
+  --ifm-color-primary: #1e204e;
+  --ifm-color-primary-dark: #1b1d46;
+  --ifm-color-primary-darker: #1a1b42;
+  --ifm-color-primary-darkest: #151637;
+  --ifm-color-primary-light: #212356;
+  --ifm-color-primary-lighter: #23255a;
+  --ifm-color-primary-lightest: #272a65;
   --ifm-code-font-size: 95%;
+
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: #21af90;
-  --ifm-color-primary-darker: #1fa588;
-  --ifm-color-primary-darkest: #1a8870;
-  --ifm-color-primary-light: #29d5b0;
-  --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
+  --ifm-color-primary: #cdd4f9;
+  --ifm-color-primary-dark: #a4b1f4;
+  --ifm-color-primary-darker: #90a0f2;
+  --ifm-color-primary-darkest: #536bea;
+  --ifm-color-primary-light: #f6f7fe;
+  --ifm-color-primary-lighter: #ffffff;
+  --ifm-color-primary-lightest: #ffffff;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
 
+html[data-theme='dark'] {
+  --ifm-background-color: #111629;
+}
+
+.navbar {
+  background-color: var(--ifm-background-color);
+}
+
+.footer {
+  --ifm-footer-background-color: #1b2131;
+}
+
 .guideImages {
   max-width: 650px;
   width: 100%;
diff --git a/docs/src/pages/index.module.css b/docs/src/pages/index.module.css
index 9f71a5da7..ce16907ce 100644
--- a/docs/src/pages/index.module.css
+++ b/docs/src/pages/index.module.css
@@ -8,6 +8,8 @@
   text-align: center;
   position: relative;
   overflow: hidden;
+  --ifm-hero-text-color: #ffffff;
+  --ifm-color-primary: #4f46e5;
 }
 
 @media screen and (max-width: 996px) {
diff --git a/website/src/assets/scss/custom/pages/_hero.scss b/website/src/assets/scss/custom/pages/_hero.scss
index 381c7bad2..0fcfc5a34 100644
--- a/website/src/assets/scss/custom/pages/_hero.scss
+++ b/website/src/assets/scss/custom/pages/_hero.scss
@@ -192,6 +192,10 @@
     @apply before:content-[''] before:absolute before:-top-[30%] before:-left-80 before:right-0 before:w-[140rem] before:h-[65rem] before:-rotate-12 before:bg-indigo-600/5 dark:before:bg-indigo-600/10 before:z-1;
 }
 
+.dark .home-wrapper::before {
+    background-color: #4f46e5;
+}
+
 @media (min-width: 769px) and (max-width: 1024px) {
     .home-wrapper {
         @apply before:-top-[50%];
diff --git a/website/src/index.html b/website/src/index.html
index 999b8fd2c..af7b07720 100644
--- a/website/src/index.html
+++ b/website/src/index.html
@@ -29,11 +29,11 @@
                 <div class="grid grid-cols-1 md:mt-44 mt-32 text-center">
                     <div class="wow animate__animated animate__fadeIn">
                         <h4 class="font-bold lg:leading-normal leading-normal text-4xl lg:text-5xl mb-5">Free, Secure, and Open-Source</br> Backup for Microsoft 365</h4>
-                        <p class="text-slate-400 text-lg max-w-xl mx-auto">The #1 open-source backup tool for Microsoft 365.</p>
+                        <p class="text-slate-300 text-xl max-w-xl mx-auto">The #1 open-source backup tool for Microsoft 365.</p>
                     </div>
 
                     <div class="mt-6">
-                        <a href="" class="text-2xl font-bold btn bg-indigo-600 hover:bg-indigo-700 border-indigo-600 hover:border-indigo-700 text-white rounded-md">Download Now</a>
+                        <a href="" class="text-2xl font-bold btn bg-indigo-800 hover:bg-indigo-900 border-indigo-800 hover:border-indigo-900 text-white rounded-md">Download Now</a>
                     </div>
 
                     <div class="home-dashboard mt-8 z-3 wow animate__animated animate__fadeIn">