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: #303030;
+$dark-bg-color-2: #4F4F4F;
+$dark-text-color-1: #FFF;
+$dark-text-color-2: #3371e3;
+
 @import "size";
 
 ////////////////////////////////////////////////////////////////////////////////////////////////////
@@ -470,10 +479,10 @@ $feature-box-div-margin-bottom: 40px;
 section#cncf {
   padding-top: 60px;
   padding-bottom: 140px;
-  background-image: url(/images/cncf-color.svg);
-  background-position: center 100px;
-  background-repeat: no-repeat;
-  background-size: 300px;
+}
+
+.cncf-img{
+  width: 300px;
 }
 
 // OCEAN NODES
@@ -924,3 +933,41 @@ 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;
+
+    h3 a:hover, h4 a:hover, h5 a:hover {
+  	 text-decoration: underline;
+  	 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(#cncf) {
+    background-color: $dark-bg-color-2;
+  }
+}

assets/scss/_custom.scss

@@ -1,3 +1,5 @@
+//Enabled partial dark mode support only in the main page.
+
 $announcement-size-adjustment: 8px;
 
 /* GLOBAL */
@@ -1324,7 +1326,6 @@ div.alert > em.javascript-required {
     background: #326de6;
 }
 
-
 // Adjust Search-bar search-icon
 .search-bar {
   display: flex;
@@ -1353,8 +1354,24 @@ div.alert > em.javascript-required {
   border: none;
   outline: none;
   padding: .5em 0 .5em 0;
+}  
+
+//Home page dark-mode input [search and email]
+@media (prefers-color-scheme: dark) {
+  .search-bar {
+    background-color: #D3D3D3;
+  }
+
+  input.search-input, input.email {
+    background-color: #D3D3D3 !important;
+    color: #000 !important;
+  }
+
+  input.search-input::placeholder, input.email::placeholder{
+    color: #000;
+  }
 }
-
+    
 // PageFind Styles
 
 #search .pagefind-ui form input  {