FIX theme toggle

assets/scss/index.scss

@@ -1,6 +1,35 @@
 $font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 $width: 680px;
 
+$lightBg: white;
+$lightText: black;
+$darkBg: #383838;
+$darkText: white;
+
+:root {
+  color-scheme: light dark;
+}
+
+body {
+  background-color: $darkBg;
+  color: $darkText;
+}
+body.light {
+  background-color: $lightBg;
+  color: $lightText;
+}
+
+@media (prefers-color-scheme: light) {
+  body {
+    background-color: $lightBg;
+    color: $lightText;
+  }
+  body.dark {
+    background-color: $darkBg;
+    color: $darkText;
+  }
+}
+
 * {
   box-sizing: border-box;
   word-break: break-word;
@@ -10,6 +39,11 @@ html {
   scroll-behavior: smooth;
 }
 
+header, footer {
+  background-color: black;
+  color: white;
+}
+
 html, body {
   height: 100%;
 }
@@ -18,7 +52,6 @@ body {
   margin: 0;
   display: flex;
   flex-direction: column;
-  color: #333;
   font-family: $font;
   font-weight: 400;
   font-style: normal;
@@ -76,6 +109,10 @@ a {
   float: left;
 }
 
+.rotate-45 {-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}
+.rotate-90 {-webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg);}
+.rotate-180 { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);}
+
 .row {
   display: flex;
   flex-wrap: wrap;
@@ -195,7 +232,7 @@ a {
 }
 
 .section-even {
-  background-color: #eee;
+  // background-color: #eee;
 }
 
 .section-highlight {
@@ -243,7 +280,7 @@ a {
   border-bottom: 3px solid {{ .Site.Params.color.primary }};
 }
 
-.hero-content div {
+.hero-content > div {
   flex-grow: 1;
   display: flex;
   flex-direction: column;
@@ -251,6 +288,21 @@ a {
   padding-inline-start: 25px;
 }
 
+.hero-content .social {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.hero-content .social i {
+  font-size: x-large;
+}
+
+.hero-content .social a {
+  padding-inline: 6px;
+  color: {{ .Site.Params.color.primary }};
+}
+
 /* Buttons */
 
 button {
@@ -304,6 +356,5 @@ img {
   border-radius: 50%;
   border: 3px solid {{ .Site.Params.color.primary }};
   object-fit: cover;
-  margin: 0 auto;
   width: 150px;
 }

layouts/partials/components/icon.html

@@ -0,0 +1,6 @@
+<!--
+type: string - default: link
+text: string (optional)
+url: string
+-->
+<a href="{{ .url }}"><i class="{{ if .type }} icon-{{ .type }} {{ else }} icon-link {{ end }}"></i>{{ if .text }} {{ .text }}{{ end }}</a>

layouts/partials/components/image.html

@@ -3,5 +3,8 @@ type: string - default
 url: string
 alt: string
 -->
+
 {{ $avatar := "avatar"}}
 <img class="{{if eq .type $avatar}} avatar {{end}}" alt="{{ .alt }}" src="{{ .url }}">
+
+{{/*  https://www.brycewray.com/posts/2023/05/better-code-image-processing-hugo-render-hook-edition/  */}}

layouts/partials/footer.html

@@ -3,7 +3,7 @@
     {{ if .social }}
       <div class="social">
         {{ range .social }}
-          <a href="{{ .url }}"><i class="{{ if .type }} icon-{{ .type }} {{ else }} icon-link {{ end }}"></i>{{ if .text }}{{ .text }}{{ end }}</a>
+          {{ partial "components/icon.html" . }}
         {{ end }}
       </div>
     {{ end }}

layouts/partials/head.html

@@ -4,6 +4,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
   <meta http-equiv="x-ua-compatible" content="ie=edge">
+  <meta name="color-scheme" content="dark light">
   <title>{{ if .Title }}{{ .Title }}{{ else }}{{ .Site.Title }}{{ end }}</title>
   {{ block "opengraph" . }}
     <meta property="og:type" content="website" />
@@ -39,6 +40,6 @@
     {{ $index := $template | resources.ExecuteAsTemplate "css/index.scss" . | resources.ToCSS (dict "outputStyle" "compressed") | fingerprint }}
     <link rel="stylesheet" type="text/css" href="{{ $index.RelPermalink }}">
   {{ end }}
-  <link id="dark-mode-theme" rel="stylesheet" href="/css/dark.css">
   <link rel="stylesheet" type="text/css" href="/icons/fontawesome.css">
+  <script src="/js/theme.js"></script>
 </head>

layouts/partials/header.html

@@ -1,13 +1,15 @@
 {{ with .Site.Params.header }}
-  <header id="header" class="header">
+  <header id="header">
-    <a class="home" href="/#"><i class="icon-home"></i></a>
+    <div class="header">
-    <div class="items">
+      <a class="home" href="/#"><i class="icon-home"></i></a>
-      {{ if .links }}
+      <div class="items">
-        {{ range .links }}
+        {{ if .links }}
-          <a class="item" href="{{ .url }}">{{ .text }}</a>
+          {{ range .links }}
+            <a class="item" href="{{ .url }}">{{ .text }}</a>
+          {{ end }}
         {{ end }}
-      {{ end }}
+      </div>
+      <a id="theme-toggler" href="#"><i class="icon-adjust"></i></a>
     </div>
-    <a href="/#"><i class="icon-adjust"></i></a>
   </header>
 {{ end }}

layouts/partials/hero.html

@@ -4,7 +4,7 @@ odd: 0 or 1
 hero:
   avatar: image
   greeting: string
-  social: array
+  social: icon
     type: string
     url: string
 content: string
@@ -19,6 +19,13 @@ content: string
         <div>
           <h1>{{ .greeting }}</h1>
           <h3>{{ .introduction }}</h3>
+          {{ if .social }}
+            <div class="social">
+              {{ range .social }}
+                {{ partial "components/icon.html" . }}
+              {{ end }}
+            </div>
+          {{ end }}
         </div>
       </div>
     {{ end }}

static/css/dark.css

@@ -1,18 +0,0 @@
-html {
-  background-color: #383838 !important;
-}
-html {
-  filter: invert(100%) hue-rotate(180deg) brightness(105%) contrast(85%);
-  -webkit-filter: invert(100%) hue-rotate(180deg) brightness(105%) contrast(85%);
-}
-body {
-  background-color: #FFF !important;
-}
-img,
-video,
-body * [style*="background-image"] {
-  filter: hue-rotate(180deg) contrast(100%) invert(100%);
-  -webkit-filter: hue-rotate(180deg) contrast(100%) invert(100%);
-}
-
-/* https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/ */

static/js/theme.js

@@ -0,0 +1,25 @@
+window.onload = (event) => {
+  const btn = document.getElementById("theme-toggler");
+  const darkTheme = window.matchMedia("(prefers-color-scheme: dark)");
+  const currentTheme = localStorage.getItem("theme");
+
+  if (currentTheme == "dark") {
+    document.body.classList.toggle("dark");
+  } else if (currentTheme == "light") {
+    document.body.classList.toggle("light");
+    btn.classList.toggle("rotate-180");
+  }
+
+  btn.addEventListener("click", function () {
+    btn.classList.toggle("rotate-180");
+    var theme = "dark";
+    if (darkTheme.matches) {
+      document.body.classList.toggle("light");
+      theme = document.body.classList.contains("light") ? "light" : "dark";
+    } else {
+      document.body.classList.toggle("dark");
+      theme = document.body.classList.contains("dark") ? "dark" : "light";
+    }
+    localStorage.setItem("theme", theme);
+  });
+}