How to dynamically change the icon attribute of the <x-filament::icon-button> based on the selected theme (light or dark or system)

[devhoussam1998]

theme-switcher.blade.php

<x-filament::dropdown>
    <x-slot name="trigger">
        <template x-if="theme === 'light'">
            <x-filament::icon-button
                size="lg"
                color="white"
                icon="heroicon-o-sun"
                icon-size="md"
                icon-position="before"
                x-ref="trigger"
            />
        </template>
        <template x-if="theme === 'dark'">
            <x-filament::icon-button
                size="lg"
                color="white"
                icon="heroicon-o-moon"
                icon-size="md"
                icon-position="before"
                x-ref="trigger"
            />
        </template>
        <template x-if="theme === 'system'">
            <x-filament::icon-button
                size="lg"
                color="white"
                icon="heroicon-o-computer-desktop"
                icon-size="md"
                icon-position="before"
                x-ref="trigger"
            />
        </template>
    </x-slot>
    <x-filament::dropdown.list
        class="flex flex-col gap-y-1"
        x-data="{ theme: null }"
        x-init="
        $watch('theme', () => {
            $dispatch('theme-changed', theme)
        })
        theme = localStorage.getItem('theme') || 'system';
        "
    >
        <x-filament::dropdown.list.item
            icon="heroicon-o-sun"
            icon-size="md"
            icon-color="white"
            icon-position="before"
            class="font-medium"
            x-on:click="(theme = 'light') && close()"
            x-bind:class="
                theme === 'light'
                ? 'bg-gray-50 text-primary-500 dark:bg-white/5 dark:text-primary-400'
                : 'text-gray-400 hover:text-gray-500 focus-visible:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400 dark:focus-visible:text-gray-400'
            "
        >
            <span
                x-bind:class="
                    theme === 'light'
                        ? 'text-primary-500 dark:text-primary-400'
                        : 'text-gray-950 dark:text-white'
                "
            >
                {{ __('Light') }}
            </span>
        </x-filament::dropdown.list.item>
        <x-filament::dropdown.list.item
            icon="heroicon-o-moon"
            icon-size="md"
            icon-color="white"
            icon-position="before"
            class="font-medium"
            x-on:click="(theme = 'dark') && close()"
            x-bind:class="
                theme === 'dark'
                ? 'bg-gray-50 text-primary-500 dark:bg-white/5 dark:text-primary-400'
                : 'text-gray-400 hover:text-gray-500 focus-visible:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400 dark:focus-visible:text-gray-400'
            "
        >
            <span
                x-bind:class="
                    theme === 'dark'
                        ? 'text-primary-500 dark:text-primary-400'
                        : 'text-gray-950 dark:text-white'
                "
            >
                {{ __('Dark') }}
            </span>
        </x-filament::dropdown.list.item>
        <x-filament::dropdown.list.item
            icon="heroicon-o-computer-desktop"
            icon-size="md"
            icon-color="white"
            icon-position="before"
            class="font-medium"
            x-on:click="(theme = 'system') && close()"
            x-bind:class="
                theme === 'system'
                ? 'bg-gray-50 text-primary-500 dark:bg-white/5 dark:text-primary-400'
                : 'text-gray-400 hover:text-gray-500 focus-visible:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400 dark:focus-visible:text-gray-400'
            "
        >
            <span
                x-bind:class="
                    theme === 'system'
                        ? 'text-primary-500 dark:text-primary-400'
                        : 'text-gray-950 dark:text-white'
                "
            >
                {{ __('System') }}
            </span>
        </x-filament::dropdown.list.item>
    </x-filament::dropdown.list>
</x-filament::dropdown>

[ekwoka]

just use css.

[devhoussam1998]

any help

[ekwoka]

hide it, and unhide it based on the theme....