Added day night mode;

bhatshakran · bhatshakran · commit e29f5e5fefa3 · 2021-10-20T11:47:42.000+05:30
diff --git a/Clock/bhatshakran/index.html b/Clock/bhatshakran/index.html
@@ -11,25 +11,14 @@
 <body>
     <div class="main__wrapper">
         <div class="heading">Tim<span>eon</span></div>
+        <div class="switch">Day</div>
         <div class="row">
             <div class="three columns left__wrapper">
                 <div class="menu">
                     <div class="digital">Digital
-                            <!-- <svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    >
-    <path
-        d="M15.0378 6.34317L13.6269 7.76069L16.8972 11.0157L3.29211 11.0293L3.29413 13.0293L16.8619 13.0157L13.6467 16.2459L15.0643 17.6568L20.7079 11.9868L15.0378 6.34317Z"
-        fill="currentColor"
-    />
-    </svg>-->
                     </div> 
                     <div class="analog">Analog</div>
-                    <div class="stopwatch">Stopwatch</div>
+                    <!-- <div class="stopwatch">Stopwatch</div> -->
                 </div>
             </div>
             <div class="nine columns right__wrapper">
diff --git a/Clock/bhatshakran/main.js b/Clock/bhatshakran/main.js
@@ -7,6 +7,7 @@ const analogBtn = document.querySelector(".analog");
 const stopwatchBtn = document.querySelector(".stopwatch");
 const digitalClock = document.querySelector(".digital__clock");
 const analogClock = document.querySelector(".clock");
+const switchBtn = document.querySelector(".switch");
 
 function setDate() {
   const now = new Date();
@@ -33,10 +34,35 @@ setDate();
 
 digitalBtn.addEventListener("click", () => {
   digitalClock.style.display = "block";
+  digitalBtn.style.color = "#fff";
+  analogBtn.style.color = "#d5d5d569";
   analogClock.style.display = "none";
 });
 
 analogBtn.addEventListener("click", () => {
   digitalClock.style.display = "none";
+  analogBtn.style.color = "#fff";
+  digitalBtn.style.color = "#d5d5d569";
   analogClock.style.display = "block";
 });
+
+switchBtn.addEventListener("click", () => {
+  if (
+    window
+      .getComputedStyle(document.documentElement)
+      .getPropertyValue("--main--color") == "#1F441E"
+  ) {
+    document.documentElement.style.setProperty("--main--color", "black");
+    document.documentElement.style.setProperty("--primary-color", "#fff");
+    document.documentElement.style.setProperty(
+      "--secondary-color",
+      "lightgrey"
+    );
+    switchBtn.textContent = "Night";
+  } else {
+    document.documentElement.style.setProperty("--main--color", "#1F441E");
+    document.documentElement.style.setProperty("--primary-color", "#CEE6B4");
+    document.documentElement.style.setProperty("--secondary-color", "#9ECCA4");
+    switchBtn.textContent = "Day";
+  }
+});
diff --git a/Clock/bhatshakran/style.css b/Clock/bhatshakran/style.css
@@ -4,9 +4,9 @@
     box-sizing: border-box;
 }
 :root{
-    --main--color:#053742;
-    --primary-color:#a2dbfa8c;
-    --secondary-color:#4f808a;
+    --main--color:#1F441E;
+    --primary-color:#CEE6B4;
+    --secondary-color:#9ECCA4;
 }
 body{
     background: var(--main--color);
@@ -30,6 +30,22 @@ span{
     font-size: 8rem !important; 
 }
 
+.switch{
+  border: 1px solid var(--primary-color);
+  width: 80px;
+  text-align: center;
+  font-family: 'Gill Sans';
+  font-size: 3rem;
+  margin-left: 4rem;
+  color:#fff;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -webkit-touch-callout: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
 .left__wrapper{
     height: 80vh;
     position: relative;
@@ -55,6 +71,11 @@ span{
 
 }
 
+
+.menu .analog{
+  color: #fff;
+}
+
 .menu > div:hover{
     color: white;
     transition: all 0.25s ease-in-out;
