added theme button

sass/header.scss

@@ -22,6 +22,8 @@ header {
         a {
             margin-right: 0.5rem;
         }
+        display: flex;
+        flex-wrap: wrap;
     }
 
     padding-bottom: 1em;

sass/theme-button.scss

@@ -0,0 +1,59 @@
+
+.no-theme-transition,
+.no-theme-transition * {
+  transition: none !important;
+}
+
+.theme-toggle {
+    width: 2em;
+    height: 2em;
+    display: inline-grid;
+    place-items: center;
+    border-radius: 7px;
+
+    border: 1px solid var(--grey-light);
+    background: var(--bg-1);
+    color: var(--fg-0);
+    cursor: pointer;
+    padding: 0px;
+    transition: transform 120ms ease, background-color var(--theme-transition-time) ease, 
+        border-color var(--theme-transition-time) ease;
+}
+
+.theme-toggle:hover {
+    color: var(--fg-1);
+}
+
+.theme-toggle:active {
+    transform: scale(0.96);
+}
+
+.theme-toggle .icon {
+    width: calc(1.6em - 2px);
+    height: calc(1.6em - 2px);
+    grid-area: 1 / 1;
+    transition: transform var(--theme-transition-time) ease, opacity var(--theme-transition-time) ease;
+    transform-origin: 50% 50%;
+}
+
+.theme-toggle .icon-sun {
+    opacity: 1;
+    transform: rotate(0deg) scale(1);
+}
+
+.theme-toggle .icon-moon {
+    opacity: 0;
+    transform: rotate(-25deg) scale(0.85);
+    transform: translateY(1em);
+}
+
+:root[data-theme="dark"] .theme-toggle .icon-sun {
+    opacity: 0;
+    transform: rotate(25deg) scale(0.85);
+    transform: translateY(1em)
+}
+
+:root[data-theme="dark"] .theme-toggle .icon-moon {
+    opacity: 1;
+    transform: rotate(0deg) scale(1);
+}

sass/theme.scss

@@ -1,34 +1,33 @@
+@use "theme-button.scss";
+
 @media (prefers-color-scheme: dark) {
     * {
-        color-scheme: dark!important;
+        color-scheme: dark !important;
     }
 }
+
 :root[data-theme="dark"] {
     * {
-        color-scheme: dark!important;
+        color-scheme: dark !important;
     }
 }
 
 @media (prefers-color-scheme: light) {
     * {
-        color-scheme: light!important;
+        color-scheme: light !important;
     }
 }
+
 :root[data-theme="light"] {
     * {
-        color-scheme: light!important;
+        color-scheme: light !important;
     }
 }
 
-* {
-    transition: color linear 0.25s;
-    transition: background-color linear 0.25s;
-}
-
-.giallo{
-    background-color: var(--bg-1)!important;
-    overflow: auto; 
-    border-radius: 5px; 
+.giallo {
+    background-color: var(--bg-1) !important;
+    overflow: auto;
+    border-radius: 5px;
 }
 
 .giallo-l {
@@ -36,6 +35,7 @@
     min-height: 1lh;
     width: 100%;
 }
+
 .giallo-ln {
     display: inline-block;
     user-select: none;
@@ -47,19 +47,23 @@
 }
 
 :root {
+    --theme-transition-time: 0.25s;
+
     --bg-0: light-dark(#fff, #1d1d1d);
     --bg-1: light-dark(#eee, #131313);
 
     --grey-light: light-dark(#a4a4a4, #777);
     --grey-dark: light-dark(#969696, #24292E);
-    
+
     --fg-0: light-dark(#111, #eee);
     --fg-1: light-dark(#333, #ccc);
     --fg-2: light-dark(#555, #999);
 
     --primary: light-dark(#ffd979, #daa520);
-    --text-highlight:  color-mix(in srgb-linear, var(--primary) 50%, transparent);
+    --text-highlight: color-mix(in srgb-linear, var(--primary) 50%, transparent);
 }
 
-
-
+* {
+    transition: color linear var(--theme-transition-time);
+    transition: background-color linear var(--theme-transition-time);
+}

templates/partials/header.html

@@ -8,4 +8,60 @@
     <a href="{{ get_url(path='@/pictures/_index.md') }}">Pictures</a>
     <a href="{{ get_url(path='tags') }}">Tags</a>
     <a href="{{ get_url(path='category') }}">Categories</a>
-</nav>
+    <button
+        class="theme-toggle"
+        type="button"
+        aria-label="Toggle theme"
+        aria-pressed="false"
+        >
+        <!-- Sun (light) -->
+        <svg class="icon icon-sun" viewBox="0 0 24 24" aria-hidden="true">
+            <path
+            d="M12 18a6 6 0 1 0 0-12a6 6 0 0 0 0 12Zm0-16v2m0 16v2M4 12H2m20 0h-2M5.64 5.64 4.22 4.22m15.56 15.56 1.42 1.42M18.36 5.64l1.42-1.42M4.22 19.78l1.42-1.42"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            />
+        </svg>
+
+        <!-- Moon (dark) -->
+        <svg class="icon icon-moon" viewBox="1 1 24 20" aria-hidden="true">
+            <path
+            d="M21 14.5A8.5 8.5 0 0 1 9.5 3a7 7 0 1 0 11.5 11.5Z"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linejoin="round"
+            stroke-linecap="round"
+            />
+        </svg>
+    </button>
+</nav>
+
+<script>
+  (function setupThemeToggle() {
+    const root = document.documentElement;
+    const btn = document.querySelector(".theme-toggle");
+    const mql = window.matchMedia("(prefers-color-scheme: dark)");
+    const systemTheme = () => (mql.matches ? "dark" : "light");
+    const getTheme = () => localStorage.theme ?? root.dataset.theme ?? systemTheme();
+
+    const applyTheme = (theme, { manual = false } = {}) => {
+      root.dataset.theme = theme;
+      localStorage.theme = theme;
+      btn.setAttribute("aria-pressed", theme === "dark" ? "true" : "false");
+    };
+    
+    document.documentElement.classList.add("no-theme-transition");
+    applyTheme(getTheme());
+    requestAnimationFrame(() => {
+        document.documentElement.classList.remove("no-theme-transition");
+    });
+
+    btn.addEventListener("click", () => {
+      const next = getTheme() === "dark" ? "light" : "dark";
+      applyTheme(next);
+    });
+  })();
+</script>