Add theme picker UI to admin settings

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-20 22:00:02 +02:00
parent 56d16e27e4
commit 4f42b64f24
1 changed files with 18 additions and 0 deletions
@@ -105,6 +105,24 @@
            </div>
        </div>

+        {{-- Design / Theme --}}
+        <div class="bg-white rounded shadow p-6">
+            <h3 class="font-semibold mb-4">Design</h3>
+            <p class="text-sm text-gray-500 mb-4">Wählen Sie die Hauptfarbe Ihres Shops. Die Änderung wird sofort nach dem Speichern aktiv.</p>
+            <input type="hidden" name="theme_name" id="theme_name" value="{{ $settings['theme_name'] ?: 'default' }}">
+            <div class="flex flex-wrap gap-3">
+                @foreach(config('themes') as $key => $theme)
+                <button type="button"
+                    onclick="document.getElementById('theme_name').value='{{ $key }}'; document.querySelectorAll('.theme-btn').forEach(b=>b.classList.remove('ring-2','ring-offset-2','ring-gray-800')); this.classList.add('ring-2','ring-offset-2','ring-gray-800');"
+                    class="theme-btn flex items-center gap-2 px-4 py-2 rounded border text-sm font-medium transition
+                           {{ ($settings['theme_name'] ?: 'default') === $key ? 'ring-2 ring-offset-2 ring-gray-800' : '' }}">
+                    <span class="w-5 h-5 rounded-full inline-block border border-gray-300" style="background:{{ $theme['primary'] }}"></span>
+                    {{ $theme['name'] }}
+                </button>
+                @endforeach
+            </div>
+        </div>
+
        <div class="flex gap-3">
            <button type="submit" class="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700">Einstellungen speichern</button>
            <a href="{{ route('admin.shipping.index') }}" class="border px-6 py-2 rounded hover:bg-gray-50 text-sm">Versandkosten verwalten →</a>