v1.0.0

src/resources/views/components/theme-toggle.blade.php

@@ -0,0 +1,35 @@
+<div
+    x-data="{
+        theme: localStorage.getItem('theme') || 'auto',
+        open: false,
+        icon() { return this.theme === 'light' ? 'light_mode' : this.theme === 'dark' ? 'dark_mode' : 'brightness_auto' },
+        apply(t) {
+            this.theme = t
+            localStorage.setItem('theme', t)
+            let systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+            document.documentElement.setAttribute('data-theme', t === 'auto' ? (systemDark ? 'dark' : 'light') : t)
+            this.open = false
+        }
+    }"
+    @click.outside="open = false"
+    style="position:relative;display:inline-block"
+>
+    <button type="button" class="btn btn-secondary btn-icon" @click="open = !open">
+        <span class="material-symbols-outlined" x-text="icon()"></span>
+    </button>
+    <div
+        x-show="open"
+        x-cloak
+        style="position:absolute;top:100%;right:0;margin-top:6px;background:var(--color-surface);border:1px solid var(--color-divider);border-radius:8px;box-shadow:var(--shadow-md);min-width:150px;overflow:hidden;z-index:20"
+    >
+        <button type="button" class="theme-toggle-option" @click="apply('light')">
+            <span class="material-symbols-outlined" style="font-size:16px">light_mode</span>Jasny
+        </button>
+        <button type="button" class="theme-toggle-option" @click="apply('dark')">
+            <span class="material-symbols-outlined" style="font-size:16px">dark_mode</span>Ciemny
+        </button>
+        <button type="button" class="theme-toggle-option" @click="apply('auto')">
+            <span class="material-symbols-outlined" style="font-size:16px">brightness_auto</span>Auto
+        </button>
+    </div>
+</div>