From ef65265a6c1b924871addfd97b3ee8771c1f25d7 Mon Sep 17 00:00:00 2001
From: pepaskopec-blip <skopecjosef10@sssvt.cz>
Date: Mon, 7 Sep 2026 09:56:35 +0200
Subject: [PATCH] Added light mode option

---
 404.html      | 27 +++++++++++++++--
 hardware.html | 29 +++++++++++++++---
 index.html    | 29 +++++++++++++++---
 privacy.html  | 27 +++++++++++++++--
 projects.html | 27 +++++++++++++++--
 script.js     | 31 +++++++++++++++++++
 style.css     | 84 ++++++++++++++++++++++++++++++++++++++++++++++-----
 7 files changed, 230 insertions(+), 24 deletions(-)

diff --git a/404.html b/404.html
index d594f45..18e6408 100644
--- a/404.html
+++ b/404.html
@@ -18,6 +18,16 @@
   <link rel="icon" href="favicon-32.png" sizes="32x32" type="image/png">
   <link rel="apple-touch-icon" href="apple-touch-icon.png">
   <meta name="theme-color" content="#07090d">
+  <script>
+    (function () {
+      try {
+        document.documentElement.dataset.theme =
+          localStorage.getItem("theme") === "light" ? "light" : "dark";
+      } catch (error) {
+        document.documentElement.dataset.theme = "dark";
+      }
+    })();
+  </script>
   <link rel="stylesheet" href="style.css">
 </head>
 <body>
@@ -26,14 +36,25 @@
   <header class="site-header">
     <div class="nav-inner">
       <a class="brand" href="index.html">Josef<span>.</span></a>
-      <button class="nav-toggle" type="button" aria-expanded="false" aria-controls="site-nav" aria-label="Open menu">
-        <span></span><span></span><span></span>
-      </button>
       <ul class="nav-links" id="site-nav">
         <li><a href="index.html">Home</a></li>
         <li><a href="projects.html">Projects</a></li>
         <li><a href="hardware.html">Hardware</a></li>
       </ul>
+      <div class="nav-actions">
+        <button class="theme-toggle" type="button" aria-label="Switch to light mode" aria-pressed="false" title="Toggle theme">
+          <svg class="icon-sun" viewBox="0 0 24 24" aria-hidden="true">
+            <circle cx="12" cy="12" r="4.2"></circle>
+            <path d="M12 2.6v2.2M12 19.2v2.2M4.2 12H2M22 12h-2.2M6.3 6.3 4.8 4.8M19.2 19.2l-1.5-1.5M17.7 6.3l1.5-1.5M4.8 19.2l1.5-1.5"></path>
+          </svg>
+          <svg class="icon-moon" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M20.5 14.3A8.6 8.6 0 0 1 9.7 3.5a8.6 8.6 0 1 0 10.8 10.8Z"></path>
+          </svg>
+        </button>
+        <button class="nav-toggle" type="button" aria-expanded="false" aria-controls="site-nav" aria-label="Open menu">
+          <span></span><span></span><span></span>
+        </button>
+      </div>
     </div>
   </header>
 
diff --git a/hardware.html b/hardware.html
index f005ed5..3f9f1d6 100644
--- a/hardware.html
+++ b/hardware.html
@@ -24,6 +24,16 @@
   <link rel="icon" href="favicon-32.png" sizes="32x32" type="image/png">
   <link rel="apple-touch-icon" href="apple-touch-icon.png">
   <meta name="theme-color" content="#07090d">
+  <script>
+    (function () {
+      try {
+        document.documentElement.dataset.theme =
+          localStorage.getItem("theme") === "light" ? "light" : "dark";
+      } catch (error) {
+        document.documentElement.dataset.theme = "dark";
+      }
+    })();
+  </script>
   <link rel="stylesheet" href="style.css">
   <script type="application/ld+json">
   {
@@ -42,14 +52,25 @@
   <header class="site-header">
     <div class="nav-inner">
       <a class="brand" href="index.html">Josef<span>.</span></a>
-      <button class="nav-toggle" type="button" aria-expanded="false" aria-controls="site-nav" aria-label="Open menu">
-        <span></span><span></span><span></span>
-      </button>
       <ul class="nav-links" id="site-nav">
         <li><a href="index.html">Home</a></li>
         <li><a href="projects.html">Projects</a></li>
         <li><a href="hardware.html" aria-current="page">Hardware</a></li>
       </ul>
+      <div class="nav-actions">
+        <button class="theme-toggle" type="button" aria-label="Switch to light mode" aria-pressed="false" title="Toggle theme">
+          <svg class="icon-sun" viewBox="0 0 24 24" aria-hidden="true">
+            <circle cx="12" cy="12" r="4.2"></circle>
+            <path d="M12 2.6v2.2M12 19.2v2.2M4.2 12H2M22 12h-2.2M6.3 6.3 4.8 4.8M19.2 19.2l-1.5-1.5M17.7 6.3l1.5-1.5M4.8 19.2l1.5-1.5"></path>
+          </svg>
+          <svg class="icon-moon" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M20.5 14.3A8.6 8.6 0 0 1 9.7 3.5a8.6 8.6 0 1 0 10.8 10.8Z"></path>
+          </svg>
+        </button>
+        <button class="nav-toggle" type="button" aria-expanded="false" aria-controls="site-nav" aria-label="Open menu">
+          <span></span><span></span><span></span>
+        </button>
+      </div>
     </div>
   </header>
 
@@ -102,7 +123,7 @@
           <li class="stack-item">
             <span class="tag">Server</span>
             <h3>Proxmox server</h3>
-            <p>Home lab box for VMs and containers — usually runs headless.If you need hosting, VM, VPS or a wesbsite dm me on IG or sent me an email, </p>
+            <p>Home lab box for VMs and containers — usually runs headless.If you need hosting, VM, VPS or a wesbsite dm me on IG or sent me an email. </p>
             <dl class="spec-list">
               <div><dt>CPU</dt><dd>Intel Xeon E5-2630L v4 — Broadwell-EP, 14 nm, 10C/20T, 1.8–2.9 GHz, 25 MB L3, 55 W TDP, LGA 2011-3, DDR4 ECC</dd></div>
               <div><dt>GPU</dt><dd>NVIDIA GeForce GT 440 — Fermi GF108-class entry GPU (~96 CUDA, ~65 W); used only for BIOS, then headless</dd></div>
diff --git a/index.html b/index.html
index f331d17..0a5d0af 100644
--- a/index.html
+++ b/index.html
@@ -24,6 +24,16 @@
   <link rel="icon" href="favicon-32.png" sizes="32x32" type="image/png">
   <link rel="apple-touch-icon" href="apple-touch-icon.png">
   <meta name="theme-color" content="#07090d">
+  <script>
+    (function () {
+      try {
+        document.documentElement.dataset.theme =
+          localStorage.getItem("theme") === "light" ? "light" : "dark";
+      } catch (error) {
+        document.documentElement.dataset.theme = "dark";
+      }
+    })();
+  </script>
   <link rel="stylesheet" href="style.css">
   <script type="application/ld+json">
   {
@@ -123,14 +133,25 @@
   <header class="site-header">
     <div class="nav-inner">
       <a class="brand" href="index.html">Josef<span>.</span></a>
-      <button class="nav-toggle" type="button" aria-expanded="false" aria-controls="site-nav" aria-label="Open menu">
-        <span></span><span></span><span></span>
-      </button>
       <ul class="nav-links" id="site-nav">
         <li><a href="index.html" aria-current="page">Home</a></li>
         <li><a href="projects.html">Projects</a></li>
         <li><a href="hardware.html">Hardware</a></li>
       </ul>
+      <div class="nav-actions">
+        <button class="theme-toggle" type="button" aria-label="Switch to light mode" aria-pressed="false" title="Toggle theme">
+          <svg class="icon-sun" viewBox="0 0 24 24" aria-hidden="true">
+            <circle cx="12" cy="12" r="4.2"></circle>
+            <path d="M12 2.6v2.2M12 19.2v2.2M4.2 12H2M22 12h-2.2M6.3 6.3 4.8 4.8M19.2 19.2l-1.5-1.5M17.7 6.3l1.5-1.5M4.8 19.2l1.5-1.5"></path>
+          </svg>
+          <svg class="icon-moon" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M20.5 14.3A8.6 8.6 0 0 1 9.7 3.5a8.6 8.6 0 1 0 10.8 10.8Z"></path>
+          </svg>
+        </button>
+        <button class="nav-toggle" type="button" aria-expanded="false" aria-controls="site-nav" aria-label="Open menu">
+          <span></span><span></span><span></span>
+        </button>
+      </div>
     </div>
   </header>
 
@@ -149,7 +170,7 @@
         <div class="meta-row">
           <span><strong>School</strong> SSŠVT</span>
           <span><strong>Focus</strong> Developement, Tinkering &amp; web</span>
-          <span><strong>OS</strong> Linux</span>
+          <span><strong>OS</strong> Linux & MacOS</span>
           <span><strong>Home Lab</strong> Proxmox</span>
           <span><strong>Gym</strong> 5× / week · UL/PPL</span>
           <span><strong>Hobby</strong> Airsoft, Gym</span>
diff --git a/privacy.html b/privacy.html
index 9234d4c..b7a65ad 100644
--- a/privacy.html
+++ b/privacy.html
@@ -23,6 +23,16 @@
   <link rel="icon" href="favicon-32.png" sizes="32x32" type="image/png">
   <link rel="apple-touch-icon" href="apple-touch-icon.png">
   <meta name="theme-color" content="#07090d">
+  <script>
+    (function () {
+      try {
+        document.documentElement.dataset.theme =
+          localStorage.getItem("theme") === "light" ? "light" : "dark";
+      } catch (error) {
+        document.documentElement.dataset.theme = "dark";
+      }
+    })();
+  </script>
   <link rel="stylesheet" href="style.css">
   <script type="application/ld+json">
   {
@@ -41,14 +51,25 @@
   <header class="site-header">
     <div class="nav-inner">
       <a class="brand" href="index.html">Josef<span>.</span></a>
-      <button class="nav-toggle" type="button" aria-expanded="false" aria-controls="site-nav" aria-label="Open menu">
-        <span></span><span></span><span></span>
-      </button>
       <ul class="nav-links" id="site-nav">
         <li><a href="index.html">Home</a></li>
         <li><a href="projects.html">Projects</a></li>
         <li><a href="hardware.html">Hardware</a></li>
       </ul>
+      <div class="nav-actions">
+        <button class="theme-toggle" type="button" aria-label="Switch to light mode" aria-pressed="false" title="Toggle theme">
+          <svg class="icon-sun" viewBox="0 0 24 24" aria-hidden="true">
+            <circle cx="12" cy="12" r="4.2"></circle>
+            <path d="M12 2.6v2.2M12 19.2v2.2M4.2 12H2M22 12h-2.2M6.3 6.3 4.8 4.8M19.2 19.2l-1.5-1.5M17.7 6.3l1.5-1.5M4.8 19.2l1.5-1.5"></path>
+          </svg>
+          <svg class="icon-moon" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M20.5 14.3A8.6 8.6 0 0 1 9.7 3.5a8.6 8.6 0 1 0 10.8 10.8Z"></path>
+          </svg>
+        </button>
+        <button class="nav-toggle" type="button" aria-expanded="false" aria-controls="site-nav" aria-label="Open menu">
+          <span></span><span></span><span></span>
+        </button>
+      </div>
     </div>
   </header>
 
diff --git a/projects.html b/projects.html
index 5b5ed39..c3f1bca 100644
--- a/projects.html
+++ b/projects.html
@@ -24,6 +24,16 @@
   <link rel="icon" href="favicon-32.png" sizes="32x32" type="image/png">
   <link rel="apple-touch-icon" href="apple-touch-icon.png">
   <meta name="theme-color" content="#07090d">
+  <script>
+    (function () {
+      try {
+        document.documentElement.dataset.theme =
+          localStorage.getItem("theme") === "light" ? "light" : "dark";
+      } catch (error) {
+        document.documentElement.dataset.theme = "dark";
+      }
+    })();
+  </script>
   <link rel="stylesheet" href="style.css">
   <script type="application/ld+json">
   {
@@ -42,14 +52,25 @@
   <header class="site-header">
     <div class="nav-inner">
       <a class="brand" href="index.html">Josef<span>.</span></a>
-      <button class="nav-toggle" type="button" aria-expanded="false" aria-controls="site-nav" aria-label="Open menu">
-        <span></span><span></span><span></span>
-      </button>
       <ul class="nav-links" id="site-nav">
         <li><a href="index.html">Home</a></li>
         <li><a href="projects.html" aria-current="page">Projects</a></li>
         <li><a href="hardware.html">Hardware</a></li>
       </ul>
+      <div class="nav-actions">
+        <button class="theme-toggle" type="button" aria-label="Switch to light mode" aria-pressed="false" title="Toggle theme">
+          <svg class="icon-sun" viewBox="0 0 24 24" aria-hidden="true">
+            <circle cx="12" cy="12" r="4.2"></circle>
+            <path d="M12 2.6v2.2M12 19.2v2.2M4.2 12H2M22 12h-2.2M6.3 6.3 4.8 4.8M19.2 19.2l-1.5-1.5M17.7 6.3l1.5-1.5M4.8 19.2l1.5-1.5"></path>
+          </svg>
+          <svg class="icon-moon" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M20.5 14.3A8.6 8.6 0 0 1 9.7 3.5a8.6 8.6 0 1 0 10.8 10.8Z"></path>
+          </svg>
+        </button>
+        <button class="nav-toggle" type="button" aria-expanded="false" aria-controls="site-nav" aria-label="Open menu">
+          <span></span><span></span><span></span>
+        </button>
+      </div>
     </div>
   </header>
 
diff --git a/script.js b/script.js
index 37df83f..922a102 100644
--- a/script.js
+++ b/script.js
@@ -5,6 +5,37 @@
     node.textContent = year;
   });
 
+  const root = document.documentElement;
+  const themeToggle = document.querySelector(".theme-toggle");
+  const themeMeta = document.querySelector('meta[name="theme-color"]');
+  const themeColors = { dark: "#07090d", light: "#f6f7f9" };
+
+  const applyTheme = (theme) => {
+    root.dataset.theme = theme;
+    if (themeMeta) themeMeta.setAttribute("content", themeColors[theme]);
+    if (themeToggle) {
+      themeToggle.setAttribute(
+        "aria-label",
+        theme === "dark" ? "Switch to light mode" : "Switch to dark mode"
+      );
+      themeToggle.setAttribute("aria-pressed", theme === "light" ? "true" : "false");
+    }
+  };
+
+  applyTheme(root.dataset.theme === "light" ? "light" : "dark");
+
+  if (themeToggle) {
+    themeToggle.addEventListener("click", () => {
+      const next = root.dataset.theme === "light" ? "dark" : "light";
+      applyTheme(next);
+      try {
+        localStorage.setItem("theme", next);
+      } catch (error) {
+        /* storage unavailable — theme resets to dark on reload */
+      }
+    });
+  }
+
   const toggle = document.querySelector(".nav-toggle");
   const nav = document.querySelector("#site-nav");
 
diff --git a/style.css b/style.css
index df27bfb..e14ce5e 100644
--- a/style.css
+++ b/style.css
@@ -1,4 +1,4 @@
-/* skopec.dev — cool workshop / signal aesthetic (dark) */
+/* skopec.dev — cool workshop / signal aesthetic (dark by default) */
 :root {
   --bg: #07090d;
   --bg-deep: #0c1018;
@@ -12,6 +12,11 @@
   --accent: #ff4a1c;
   --accent-ink: #ff7a52;
   --glow: rgba(255, 74, 28, 0.22);
+  --glow-cool: rgba(60, 100, 160, 0.12);
+  --header-bg: rgba(7, 9, 13, 0.82);
+  --menu-bg: rgba(12, 16, 24, 0.97);
+  --sheen: rgba(255, 255, 255, 0.06);
+  color-scheme: dark;
   --radius: 2px;
   --nav-h: 4.25rem;
   --font-display: "Syne", sans-serif;
@@ -20,6 +25,26 @@
   --max: 72rem;
 }
 
+:root[data-theme="light"] {
+  --bg: #f6f7f9;
+  --bg-deep: #e7eaef;
+  --ink: #11151c;
+  --ink-soft: #333d4b;
+  --muted: #5b6675;
+  --line: rgba(17, 21, 28, 0.1);
+  --line-strong: rgba(17, 21, 28, 0.2);
+  --surface: rgba(17, 21, 28, 0.03);
+  --surface-solid: #ffffff;
+  --accent: #dc3c11;
+  --accent-ink: #b32f08;
+  --glow: rgba(255, 74, 28, 0.16);
+  --glow-cool: rgba(60, 100, 160, 0.1);
+  --header-bg: rgba(246, 247, 249, 0.85);
+  --menu-bg: rgba(255, 255, 255, 0.97);
+  --sheen: rgba(17, 21, 28, 0.05);
+  color-scheme: light;
+}
+
 *,
 *::before,
 *::after {
@@ -40,10 +65,10 @@ body {
   background-color: var(--bg);
   background-image:
     radial-gradient(ellipse 90% 55% at 8% -10%, var(--glow), transparent 55%),
-    radial-gradient(ellipse 70% 45% at 100% 0%, rgba(60, 100, 160, 0.12), transparent 50%),
+    radial-gradient(ellipse 70% 45% at 100% 0%, var(--glow-cool), transparent 50%),
     linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
   background-attachment: fixed;
-  color-scheme: dark;
+  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
 }
 
 body::before {
@@ -105,7 +130,7 @@ a:hover {
   display: flex;
   align-items: center;
   backdrop-filter: blur(14px) saturate(1.2);
-  background: rgba(7, 9, 13, 0.82);
+  background: var(--header-bg);
   border-bottom: 1px solid var(--line);
 }
 
@@ -141,10 +166,16 @@ a:hover {
   align-items: center;
   gap: 0.35rem;
   list-style: none;
-  margin: 0;
+  margin: 0 0 0 auto;
   padding: 0;
 }
 
+.nav-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
 .nav-links a {
   display: inline-flex;
   align-items: center;
@@ -190,6 +221,45 @@ a:hover {
   background: var(--ink);
 }
 
+.theme-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0;
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius);
+  background: var(--surface-solid);
+  color: var(--ink-soft);
+  cursor: pointer;
+  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
+}
+
+.theme-toggle:hover {
+  color: var(--accent);
+  border-color: var(--ink);
+}
+
+.theme-toggle svg {
+  width: 1.1rem;
+  height: 1.1rem;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.6;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.theme-toggle .icon-moon,
+:root[data-theme="light"] .theme-toggle .icon-sun {
+  display: none;
+}
+
+:root[data-theme="light"] .theme-toggle .icon-moon {
+  display: block;
+}
+
 /* —— Layout —— */
 .page {
   position: relative;
@@ -252,7 +322,7 @@ a:hover {
   height: min(52vw, 34rem);
   border-radius: 50%;
   background:
-    radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.06), transparent 55%),
+    radial-gradient(circle at 35% 35%, var(--sheen), transparent 55%),
     conic-gradient(from 210deg at 50% 50%, transparent 0 55%, var(--glow) 70%, transparent 100%);
   border: 1px solid var(--line);
   opacity: 0.85;
@@ -886,7 +956,7 @@ a:hover {
     align-items: stretch;
     gap: 0.25rem;
     padding: 0.75rem 1.25rem 1rem;
-    background: rgba(12, 16, 24, 0.97);
+    background: var(--menu-bg);
     border-bottom: 1px solid var(--line);
     backdrop-filter: blur(12px);
   }