Fixed time issues

css/style.css

@@ -3,10 +3,13 @@
   --fsm: 85px;
   --fss: 30px;
   --fses: 18px;
-  --bg: #1f2229;
+  --accent: #3F8CC9;
-  --fg: #d8dee9;
+  --darkbg: #1E1F21;
-  --qbg: #2c323d;
+  --darksbg: #2C2D31;
-  --accent: #5e81ac; }
+  --darkfg: #d8dee9;
+  --lightbg: #FFFFFF;
+  --lightsbg: #F9FAFA;
+  --lightfg: #000000; }
   @media only screen and (max-width: 68.75em) {
     :root {
       --fsg: 100px;
@@ -18,14 +21,14 @@
   padding: 0;
   box-sizing: border-box;
   font-family: 'Proxima nova', monospace;
-  color: var(--fg);
+  color: var(--darkfg);
   font-size: 13.5px;
   transition: 0.2s ease-in-out; }
 
 body {
   width: 100vw;
   height: 100vh;
-  background-color: var(--bg);
+  background-color: var(--darkbg);
   display: flex;
   align-items: center;
   justify-content: center; }
@@ -46,7 +49,7 @@ body {
     width: 100%; }
 
 .card {
-  background-color: var(--qbg);
+  background-color: var(--darksbg);
   box-shadow: 0 5px 7px rgba(0, 0, 0, 0.35);
   border-radius: 5px; }
   .card:hover {
@@ -146,7 +149,7 @@ body {
     justify-content: center;
     align-items: center;
     width: 100%;
-    background-color: var(--qbg);
+    background-color: var(--darksbg);
     box-shadow: 0 5px 7px rgba(0, 0, 0, 0.35);
     border-radius: 5px; }
     .qlink__link-1 {
@@ -169,9 +172,10 @@ body {
       grid-column: 3; }
     .qlink__link:hover {
       background-color: var(--accent);
-      transform: translateY(-0.3rem); }
+      transform: translateY(-0.3rem);
+      box-shadow: 0 20px 30px rgba(0, 0, 0, 0.35); }
       .qlink__link:hover svg {
-        stroke: var(--bg); }
+        stroke: var(--darkbg); }
 
 .qlist {
   display: flex;
@@ -200,4 +204,4 @@ body {
     font-weight: bold; }
     .qlist__link:hover {
       background-color: var(--accent);
-      color: var(--bg); }
+      color: var(--darkbg); }

js/theme.js

@@ -0,0 +1,23 @@
+let dark = document.getElementById('dark');
+let light = document.getElementById('light');
+let body = document.body;
+let theme = localStorage.getItem('theme');
+let toggleTheme = document.getElementById('toggleTheme');
+
+toggleTheme.addEventListener('click', function() {
+    if (body.classList.contains('light')) {
+        body.classList.remove('light');
+        toggleTheme.textContent = 'Dark';
+        localStorage.setItem('theme', 'dark');
+    } else {
+        body.classList.add('light');
+        toggleTheme.textContent = 'Light';
+        localStorage.setItem('theme', 'light');
+  }
+});
+
+function getTheme() {
+    body.classList.add(theme)
+    toggleTheme.textContent = theme;
+}
+getTheme();

js/time.js

@@ -35,5 +35,8 @@ function displayClock() {
     document.getElementById('separator').innerHTML = ' : ';
     document.getElementById('minutes').innerText = min + ampm;
 
+    document.getElementById('month').innerText = mm;
+    document.getElementById('day').innerText = dd;
+
     setTimeout(displayClock, 1000);
 }

sass/main.scss

@@ -6,14 +6,25 @@ $bp-small: 37.5em;
 $bp-smallest: 31.25em;
 
 :root {
+    // Fonts
     --fsg: 150px;
     --fsm: 85px;
     --fss: 30px;
     --fses: 18px;
-    --bg: #1f2229;
+
-    --fg: #d8dee9;
+    // C O L O R S
-    --qbg: #2c323d;
+
-    --accent: #5e81ac;
+    --accent: #3F8CC9;
+
+    // Colors Dark theme
+    --darkbg: #1E1F21;
+    --darksbg: #2C2D31;
+    --darkfg: #d8dee9;
+
+    // Colors White theme
+    --lightbg: #FFFFFF;
+    --lightsbg: #F9FAFA;
+    --lightfg: #000000;
 
     @media only screen and (max-width: $bp-large) {
         --fsg: 100px;
@@ -27,7 +38,7 @@ $bp-smallest: 31.25em;
     padding: 0;
     box-sizing: border-box;
     font-family: 'Proxima nova', monospace;
-    color: var(--fg);
+    color: var(--darkfg);
     font-size: 13.5px;
 
     transition: 0.2s ease-in-out;
@@ -36,7 +47,7 @@ $bp-smallest: 31.25em;
 body {
     width: 100vw;
     height: 100vh;
-    background-color: var(--bg);
+    background-color: var(--darkbg);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -62,7 +73,7 @@ body {
 }
 
 .card {
-    background-color: var(--qbg);
+    background-color: var(--darksbg);
     box-shadow: 0 5px 7px rgba(#000000, 0.35);
     border-radius: 5px;
 
@@ -190,7 +201,7 @@ body {
         justify-content: center;
         align-items: center;
         width: 100%;
-        background-color: var(--qbg);
+        background-color: var(--darksbg);
         box-shadow: 0 5px 7px rgba(#000000, 0.35);
         border-radius: 5px;
         &-1 {
@@ -222,8 +233,10 @@ body {
             background-color: var(--accent);
             transform: translateY(-0.3rem);
 
+        box-shadow: 0 20px 30px rgba(#000000, 0.35);
+
             & svg {
-                stroke: var(--bg);
+                stroke: var(--darkbg);
             }
         }
     }
@@ -262,7 +275,7 @@ body {
 
         &:hover {
             background-color: var(--accent);
-            color: var(--bg);
+            color: var(--darkbg);
         }
     }
 }