Add Preact, oraz przełącznika zmiany theme

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
     })

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",

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>
+  );
+}

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>

src/styles/base.css

@@ -1 +1,2 @@
 @import "./tailwind.css";
+@import "./theme.css";

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;
+}
+