From 728aefed31062dcd61d181b2f7d4f435ed84a702 Mon Sep 17 00:00:00 2001
From: dm <dm@dariuszm.eu>
Date: Fri, 21 Nov 2025 03:39:33 +0100
Subject: [PATCH] =?UTF-8?q?Add=20Preact,=20oraz=20prze=C5=82=C4=85cznika?=
 =?UTF-8?q?=20zmiany=20theme?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 astro.config.mjs                |  2 ++
 package.json                    |  5 +++-
 src/islands/ThemeToggle.jsx     | 42 +++++++++++++++++++++++++++++++++
 src/layouts/DefaultLayout.astro |  6 +++++
 src/styles/base.css             |  1 +
 src/styles/theme.css            | 28 ++++++++++++++++++++++
 6 files changed, 83 insertions(+), 1 deletion(-)
 create mode 100644 src/islands/ThemeToggle.jsx
 create mode 100644 src/styles/theme.css

diff --git a/astro.config.mjs b/astro.config.mjs
index 23a41a2..820afde 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,6 +1,7 @@
 import { defineConfig } from 'astro/config';
 import tailwind from '@astrojs/tailwind';
 import node from '@astrojs/node';
+import preact from "@astrojs/preact";
 
 export default defineConfig({
   output: 'server',
@@ -12,6 +13,7 @@ export default defineConfig({
     port: parseInt(process.env.PORT || '4321'),
   },
   integrations: [
+    preact(),
     tailwind({
       applyBaseStyles: true
     })
diff --git a/package.json b/package.json
index d40fb73..982c1a6 100644
--- a/package.json
+++ b/package.json
@@ -9,8 +9,11 @@
   },
   "dependencies": {
     "@astrojs/node": "^9.5.1",
+    "@astrojs/preact": "^4.1.3",
+    "@preact/signals": "^2.5.1",
     "astro": "^5.16.0",
-    "js-yaml": "^4.1.0"
+    "js-yaml": "^4.1.0",
+    "preact": "^10.27.2"
   },
   "devDependencies": {
     "@astrojs/tailwind": "^5.0.0",
diff --git a/src/islands/ThemeToggle.jsx b/src/islands/ThemeToggle.jsx
new file mode 100644
index 0000000..62718f4
--- /dev/null
+++ b/src/islands/ThemeToggle.jsx
@@ -0,0 +1,42 @@
+import { useEffect, useState } from "preact/hooks";
+
+export default function ThemeToggle() {
+  const [isDark, setIsDark] = useState(false);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    // unikamy SSR, działamy dopiero po stronie klienta
+    if (typeof window === "undefined") return;
+
+    const saved = localStorage.getItem("theme");
+    const systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+    const dark = saved === "dark" || (!saved && systemPrefersDark);
+
+    setIsDark(dark);
+    document.documentElement.classList.toggle("dark", dark);
+
+    setMounted(true);
+  }, []);
+
+  const toggleTheme = () => {
+    const newDark = !isDark;
+    setIsDark(newDark);
+
+    document.documentElement.classList.toggle("dark", newDark);
+    localStorage.setItem("theme", newDark ? "dark" : "light");
+  };
+
+  if (!mounted) return null;
+
+  return (
+    <button
+      type="button"
+      onClick={toggleTheme}
+      class="theme-toggle-btn"
+      aria-label="Zmień motyw"
+    >
+      {isDark ? "🌙" : "🌞"}
+    </button>
+  );
+}
diff --git a/src/layouts/DefaultLayout.astro b/src/layouts/DefaultLayout.astro
index d3c1719..6ef7b7e 100644
--- a/src/layouts/DefaultLayout.astro
+++ b/src/layouts/DefaultLayout.astro
@@ -3,6 +3,8 @@ import "../styles/base.css";
 import BaseHead from "./BaseHead.astro";
 import Header from "../components/layout/Header.astro";
 import Footer from "../components/layout/Footer.astro";
+import ThemeToggle from "../islands/ThemeToggle.jsx";
+
 
 const { seo } = Astro.props;
 ---
@@ -18,5 +20,9 @@ const { seo } = Astro.props;
     </main>
 
     <Footer />
+
+     <div class="fixed right-4 bottom-4 z-50">
+      <ThemeToggle client:load />
+    </div>
   </body>
 </html>
diff --git a/src/styles/base.css b/src/styles/base.css
index d5d0738..bef0574 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -1 +1,2 @@
 @import "./tailwind.css";
+@import "./theme.css";
\ No newline at end of file
diff --git a/src/styles/theme.css b/src/styles/theme.css
new file mode 100644
index 0000000..dfd07b3
--- /dev/null
+++ b/src/styles/theme.css
@@ -0,0 +1,28 @@
+:root {
+  --fuz-bg: #ffffff;
+  --fuz-text: #1a1a1a;
+  --fuz-accent: #0066ff;
+}
+
+:root.dark {
+  --fuz-bg: #0d1117;
+  --fuz-text: #e6edf3;
+  --fuz-accent: #58a6ff;
+}
+
+/* Ustawienia bazowe motywu */
+body {
+  background-color: var(--fuz-bg);
+  color: var(--fuz-text);
+}
+
+/* Przycisk przełącznika */
+.theme-toggle-btn {
+  @apply text-xl p-2 rounded-full cursor-pointer transition-colors;
+  color: var(--fuz-text);
+}
+
+.theme-toggle-btn:hover {
+  opacity: 0.8;
+}
+