From 32a41849d609b7271daa548b0363afe843d07b99 Mon Sep 17 00:00:00 2001
From: Tim Bannister <tim@scalefactory.com>
Date: Tue, 28 Jan 2025 17:58:51 +0000
Subject: [PATCH] Home page enable dark mode

Co-Authored-By: Tamilselvan Thangamony <20103020+tamilselvan1102@users.noreply.github.com>
---
 assets/scss/_custom.scss            | 29 +++++++++++++++++++++++++++++
 assets/scss/_variables_project.scss |  6 ++++++
 2 files changed, 35 insertions(+)

diff --git a/assets/scss/_custom.scss b/assets/scss/_custom.scss
index ec961ec07b..c8f4eb44b5 100644
--- a/assets/scss/_custom.scss
+++ b/assets/scss/_custom.scss
@@ -469,6 +469,35 @@ footer {
   }
 }
 
+// Home page dark-mode
+@media (prefers-color-scheme: dark) {
+  .cid-home main {
+    background-color: $dark-bg-color-2;
+        color:$dark-text-color-1;
+  }
+
+  .cid-home main section:not(#video) {
+    background-color: $dark-bg-color-1;
+    color:$dark-text-color-1;
+  }
+
+  .cid-home .feature-box div {
+    background-color: $dark-bg-color-2;
+    color:$dark-text-color-1;
+  }
+
+  .cid-home main section:is(#video) #desktopShowVideoButton {
+    background-color: $dark-bg-color-1;
+  }
+
+  .cid-home main section:is(#video) #desktopShowVideoButton:hover {
+    color: $dark-text-color-2;
+  }
+
+  .cid-home main section:is(#video) #desktopKCButton:hover {
+    background-color: $dark-bg-color-1;
+  }
+}
 
 /* COMMUNITY */
 
diff --git a/assets/scss/_variables_project.scss b/assets/scss/_variables_project.scss
index d1d5590be4..ab0b74c8cc 100644
--- a/assets/scss/_variables_project.scss
+++ b/assets/scss/_variables_project.scss
@@ -20,3 +20,9 @@ $tooltip-font-size: 1rem;
 $tooltip-padding: 5px 8px;
 $tooltip-border-radius: 6px;
 $tooltip-font-weight: 400;
+
+// light / dark mode support
+$dark-bg-color-1: #303030;
+$dark-bg-color-2: #4f4f4f;
+$dark-text-color-1: #ffffff;
+$dark-text-color-2: #3371e3;