all repos — website @ 66f067a81f933698a7e7e3b577b86ea977274e52

personal website hosted at prithu.xyz, built using hugo 

dark mode complete?
Prithu Goswami prithugoswami524@gmail.com
Sat, 30 Jan 2021 23:02:27 +0530
commit

66f067a81f933698a7e7e3b577b86ea977274e52

parent

62a35bd5e4076fc3597d2590ec28369716099d5b

7 files changed, 59 insertions(+), 9 deletions(-)

jump to
M layouts/index.html → layouts/index.html 
@@ -1,6 +1,6 @@ 
 {{ partial "head.html" . }}
 
-<body class=theme-dark>
+<body class=theme-auto>
 
   {{ partial "nav.html" }}
M layouts/partials/footer.html → layouts/partials/footer.html 
@@ -32,9 +32,17 @@ document.body.classList.add(`theme-${theme}`);
   }
 
 document.addEventListener("DOMContentLoaded", () => {
-  document.querySelector("#theme").addEventListener("change", function() {
+  const savedTheme = localStorage.getItem("theme") || "auto";
+
+  applyTheme(savedTheme);
+
+  for (const optionElement of document.querySelectorAll("#theme option")) {
+    optionElement.selected = savedTheme === optionElement.value;
+  }
+
+  document.querySelector("#theme").addEventListener("change", function () {
+    localStorage.setItem("theme", this.value);
     applyTheme(this.value);
   });
 });
 </script>
-
M layouts/posts/list.html → layouts/posts/list.html 
@@ -1,5 +1,5 @@ 
 {{ partial "head.html" . }}
-<body class=theme-dark>
+<body class=theme-auto>
   {{ partial "nav.html" }}
   <div class="bcontainer">
     <div class="bcontent" id=blist>
M layouts/posts/single.html → layouts/posts/single.html 
@@ -1,5 +1,5 @@ 
 {{ partial "head.html" . }}
-<body class="theme-dark">
+<body class="theme-auto">
   {{ partial "nav.html" }}
   <div class="bcontainer">
     <div class="bcontent">
M layouts/snippets/list.html → layouts/snippets/list.html 
@@ -1,11 +1,12 @@ 
 {{ partial "head.html" . }}
-<body class="theme-light">
+<body class="theme-auto">
   {{ partial "nav.html" }}
-</body>
   <div class='container'>
     <div class='post-text'>
       {{ .Content }}
     </div>
   </div>
+</body>
 </html>
 
+{{ partial "footer.html" . }}
M static/css/blog.css → static/css/blog.css 
@@ -113,6 +113,7 @@ 
 .post-text{
     font-family: Inter, sans-serif;
     font-size: 16px;
+    color: var(--text-primary);
 }
M static/css/main.css → static/css/main.css 
@@ -44,7 +44,7 @@ --light-pre-bg: #0000003d;
     --light-pre-border-color: #ffffff1c;
 }
 
-body.theme-light{
+body.theme-light, body.theme-auto{
     --bg: var(--light-bg);
     --text: var(--light-text);
     --text-primary: var(--light-text-primary);

@@ -58,11 +58,29 @@ --pre-bg: #0000000f;
     --pre-border-color: var(--light-pre-border);
 }
 
+@media (prefers-color-scheme: dark) {
+    body.theme-auto{
+        --bg: var(--dark-bg);
+        --text: var(--dark-text);
+        --text-secondary: var(--dark-text);
+        --text-primary: #ffffffcc;
+        --quote-bar: #ffffff61;
+        --card-bg: var(--dark-card-bg);
+        --card-head: var(--dark-card-head);
+        --card-text: var(--dark-card-text);
+        --logo-top: var(--dark-logo-top);
+        --logo-bottom: var(--dark-logo-bottom);
+        --pre-bg: var(--dark-pre-bg);
+        --pre-border-color: var(--dark-pre-border);
+        --scrollbar: #ffffff11;
+    }
+}
+
 body.theme-dark{
     --bg: var(--dark-bg);
     --text: var(--dark-text);
     --text-secondary: var(--dark-text);
-    --text-primary: var(--dark-text-primary);
+    --text-primary: #ffffffcc;
     --quote-bar: #ffffff61;
     --card-bg: var(--dark-card-bg);
     --card-head: var(--dark-card-head);

@@ -101,6 +119,27 @@ }
 
 .nav-group > *:not(:first-child) {
     margin-left: 4rem;
+}
+
+nav select {
+    align-self: flex-end;
+    text-decoration: none;
+    text-transform: uppercase;
+    background: none;
+    color: var(--text-primary);
+    font-family: "Roboto Mono";
+    font-size: inherit;
+    font-weight: 700;
+    border: none;
+}
+
+nav select:active,
+nav select:focus {
+    outline: none;
+}
+
+nav option {
+    color: black;
 }
 
 

@@ -578,3 +617,4 @@ top: 1.5rem;
     }
 
 }
+