install

resources/views/vendor/filament-panels/components/theme-switcher/button.blade.php

@@ -0,0 +1,28 @@
+@props([
+    'icon',
+    'theme',
+])
+
+@php
+    $label = __("filament-panels::layout.actions.theme_switcher.{$theme}.label");
+@endphp
+
+<button
+    aria-label="{{ $label }}"
+    type="button"
+    x-on:click="(theme = @js($theme)) && close()"
+    x-tooltip="{
+        content: @js($label),
+        theme: $store.theme,
+    }"
+    x-bind:class="{ 'fi-active': theme === @js($theme) }"
+    class="fi-theme-switcher-btn"
+>
+    {{
+        \Filament\Support\generate_icon_html($icon, alias: match ($theme) {
+            'light' => \Filament\View\PanelsIconAlias::THEME_SWITCHER_LIGHT_BUTTON,
+            'dark' => \Filament\View\PanelsIconAlias::THEME_SWITCHER_DARK_BUTTON,
+            'system' => \Filament\View\PanelsIconAlias::THEME_SWITCHER_SYSTEM_BUTTON,
+        })
+    }}
+</button>

resources/views/vendor/filament-panels/components/theme-switcher/index.blade.php

@@ -0,0 +1,26 @@
+<div
+    x-data="{ theme: null }"
+    x-init="
+        $watch('theme', () => {
+            $dispatch('theme-changed', theme)
+        })
+
+        theme = localStorage.getItem('theme') || @js(filament()->getDefaultThemeMode()->value)
+    "
+    class="fi-theme-switcher"
+>
+    <x-filament-panels::theme-switcher.button
+        :icon="\Filament\Support\Icons\Heroicon::Sun"
+        theme="light"
+    />
+
+    <x-filament-panels::theme-switcher.button
+        :icon="\Filament\Support\Icons\Heroicon::Moon"
+        theme="dark"
+    />
+
+    <x-filament-panels::theme-switcher.button
+        :icon="\Filament\Support\Icons\Heroicon::ComputerDesktop"
+        theme="system"
+    />
+</div>