Home page enable dark mode

Co-Authored-By: Tamilselvan Thangamony <[email protected]>

Author: Tim Bannister

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 */
 

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;