Home page enable dark mode

assets/scss/_base.scss

@@ -1,3 +1,5 @@
+//Enabled partial dark mode support only in the main page.
+
 @import "reset";
 
 // header
@@ -34,6 +36,13 @@ $vendor-strip-font-size: 16px;
 // video
 $video-section-height: 200px;
 
+//Dark mode
+
+$dark-bg-color-1: #040505;
+$dark-bg-color-2: #151818;
+$dark-text-color-1: #FFF;
+$dark-text-color-2: #3371e3;
+
 @import "size";
 
 ////////////////////////////////////////////////////////////////////////////////////////////////////
@@ -918,3 +927,43 @@ section#cncf {
     border-top-left-radius: 0;
   }
 }
+
+//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):not(#cncf) {
+    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;
+  }
+
+  .cid-home main section:is(#talkToUs) img {
+    filter: invert(100%);
+    -webkit-filter: invert(100%);
+  }
+
+  .cid-home main section:is(#cncf) {
+    background-color: $dark-bg-color-2;
+    background-image: url(/images/cncf-white.png);
+  }
+}

assets/scss/_custom.scss

@@ -1,3 +1,5 @@
+//Enabled partial dark mode support only in the main page.
+
 $announcement-size-adjustment: 8px;
 
 /* GLOBAL */