diff --git a/layouts/partials/css.html b/layouts/partials/css.html
index 1644f8cfef249..bc4d5785d6ac5 100644
--- a/layouts/partials/css.html
+++ b/layouts/partials/css.html
@@ -29,8 +29,35 @@
     padding-left: 15px;
     padding-right: 15px;
   }
+}
+
+body.dark {background-color: #000;} /* #292c35*/
+#oceanNodes.dark, #features.dark, #talkToUs.dark, #cncf.dark, #kubeweekly.dark {background-color: #000;}
+body.dark .content, body.dark .main-section, body.dark h1 {color: #fff;}
+
+.checkbox-dark {
+  opacity: 0;
+  position: absolute;
+}
 
+.checkbox-label {
+  background-color: #111;
+  width: 46px;
+  height: 22px;
+  border-radius: 50px;
+  position: relative;
+  padding: 5px;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
+
+.fa-moon {color: #f1c40f;}
+
+.fa-sun {color: #f39c12;}
+
+
 </style>
 <!--end splitter-->
 
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
index 1c8dce0d65df9..0d7fa78544b62 100644
--- a/layouts/partials/scripts.html
+++ b/layouts/partials/scripts.html
@@ -42,6 +42,22 @@
     }
   }
 
+  const checkboxDark = document.getElementById("checkbox-dark")
+  checkboxDark.addEventListener("change", () => {
+    document.body.classList.toggle("dark")
+    $("#oceanNodes").toggleClass("dark");
+    $("#features").toggleClass("dark");
+    $("#talkToUs").toggleClass("dark");
+    $("#cncf").toggleClass("dark");
+    $("#kubeweekly").toggleClass("dark");
+  })
+
+  var pathName=window.location.pathname;
+  $("#div-darkmode").hide();
+  if(pathName == "" || pathName == "/"){
+  	$("#div-darkmode").show();
+  }
+
   const screenWidthMediaQuery = window.matchMedia("(min-width: 768px)");
 
   const eleNav = document.getElementById("sidebarnav");