Installation - DevDeia Docs

Install via Composer

composer require andreia/filament-ui-switcher

The package auto-registers via Laravel’s package discovery.

Publish assets

This package uses Filament’s asset management system:

php artisan filament:assets

This publishes the CSS to public/css/andreia/filament-ui-switcher/, where Filament loads and browser-caches it automatically.

Run php artisan filament:assets again after every package update to pick up the latest assets.

Publish the config (optional)

# Publish config
php artisan vendor:publish --tag=filament-ui-switcher-config

# Publish translations
php artisan vendor:publish --tag=filament-ui-switcher-translations

Creates config/ui-switcher.php — see Configuration for every option.

Publish the view (optional)

php artisan vendor:publish --tag=filament-ui-switcher-views

Add it to your Filament panel provider (e.g. app/Providers/Filament/AdminPanelProvider.php):

use Andreia\FilamentUiSwitcher\FilamentUiSwitcherPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        ->id('admin')
        ->path('admin')
        // ... other config
        ->plugin(FilamentUiSwitcherPlugin::make());
}

A ⚙️ settings icon now appears in your topbar.

Filament recommends a custom theme so its Tailwind classes get picked up. Add this package’s vendor directory to your theme’s theme.css (usually resources/css/filament/admin/theme.css):

@source '../../../../vendor/andreia/filament-ui-switcher';

Then rebuild:

npm run build

Customize icon position

By default, the settings icon appears before the user menu (USER_MENU_BEFORE) in the topbar. Point it at any Filament render hook instead:

use Andreia\FilamentUiSwitcher\FilamentUiSwitcherPlugin;
use Filament\View\PanelsRenderHook;

FilamentUiSwitcherPlugin::make()
    ->iconRenderHook(PanelsRenderHook::TOPBAR_END)

Available hooks for the icon: USER_MENU_BEFORE (default), USER_MENU_AFTER, TOPBAR_START, TOPBAR_END, GLOBAL_SEARCH_BEFORE, GLOBAL_SEARCH_AFTER, or any custom render hook you’ve defined.

Enable the mode switcher (optional)

The light/dark/system mode switcher is hidden by default. To include Filament’s native mode switcher inside the settings modal:

FilamentUiSwitcherPlugin::make()
    ->withModeSwitcher()

​Customize icon position

​Enable the mode switcher (optional)

Customize icon position

Enable the mode switcher (optional)