Prepare site main page for dark mode

Co-authored-by: Tamilselvan Thangamony <[email protected]>
kubernetes · Jan 28, 2025 · d59fe98 · d59fe98
1 parent 7c0ac65
commit d59fe98
Showing 1 changed file with 65 additions and 28 deletions.
diff --git a/assets/scss/_custom.scss b/assets/scss/_custom.scss
@@ -439,41 +439,78 @@ footer {
 
 // Home page dark-mode
 @media (prefers-color-scheme: dark) {
-  .cid-home main {
-    background-color: $dark-bg-color-2;
-    color:$dark-text-color-1;
-  }
+  body.cid-home {
+    main {
+      background-color: $dark-bg-color-2;
+      color:$dark-text-color-1;
+
+      section:not(#video):not(#cncf) {
+        background-color: $dark-bg-color-1;
+        color:$dark-text-color-1;
+      }
 
-  .cid-home main section:not(#video):not(#cncf) {
-    background-color: $dark-bg-color-1;
-    color:$dark-text-color-1;
-  }
+      section#video #desktopShowVideoButton {
+        background-color: $dark-bg-color-1;
+      }
 
-  .cid-home .feature-box div {
-    background-color: $dark-bg-color-2;
-    color:$dark-text-color-1;
-  }
+      section#video #desktopShowVideoButton {
+        color: $white;
+        background-color: $primary;
 
-  .cid-home main section:is(#video) #desktopShowVideoButton {
-    background-color: $dark-bg-color-1;
-  }
+        &:hover {
+          color: $primary;
+          background-color: $white;
+        }
 
-  .cid-home main section:is(#video) #desktopShowVideoButton:hover {
-    color: $dark-text-color-2;
-  }
+        &::before {
+          border-color: transparent transparent transparent $white;
+        }
 
-  .cid-home main section:is(#video) #desktopKCButton:hover {
-    background-color: $dark-bg-color-1;
-  }
+        &:hover::before {
+          border-color: transparent transparent transparent $primary;
+        }
+      }
 
-  .cid-home main section:is(#talkToUs) img {
-    filter: invert(100%);
-    -webkit-filter: invert(100%);
-  }
+      section#video #desktopKCButton:hover {
+        background-color: $dark-bg-color-1;
+      }
+
+      section#cncf {
+        background-color: $dark-bg-color-2;
+      }
+
+      section.features-container > div > .feature-box {
+        background-color: $dark-bg-color-2;
+        color:$dark-text-color-1;
+
+        h3 a:hover, h4 a:hover, h5 a:hover {
+          color: $dark-text-color-1;
+          text-decoration: underline;
+        }
+      }
+
+      .search-bar {
+        background-color: #d3d3d3;
+        color: #ffffff;
+        > * {
+          color: #ffffff;
+        }
+      }
+
+      input.search-input, input.email {
+        background-color: #D3D3D3 !important;
+        color: #000 !important;
+      }
 
-  .cid-home main section:is(#cncf) {
-    background-color: $dark-bg-color-2;
-    background-image: url(/images/cncf-white.png);
+      input.search-input::placeholder, input.email::placeholder{
+        color: #000;
+      }
+
+      #mc_embed_signup_scroll input.email {
+        color: #ffffff !important;
+        background-color: #a9a9a9 !important;
+      }
+    }
   }
 }