PHPackages agenticmorf/fluxui-theme - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. agenticmorf/fluxui-theme ActiveLibrary agenticmorf/fluxui-theme ======================== FluxUI theme and appearance settings with color swatch pickers v1.0.0(1mo ago)01↓100%MITBladePHP ^8.2CI passing Since Apr 7Pushed 3w agoCompare [ Source](https://github.com/AgenticMorf/fluxui-theme)[ Packagist](https://packagist.org/packages/agenticmorf/fluxui-theme)[ Docs](https://github.com/AgenticMorf/fluxui-theme)[ RSS](/packages/agenticmorf-fluxui-theme/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (1)Dependencies (11)Versions (2)Used By (0) agenticmorf/fluxui-theme ======================== [](#agenticmorffluxui-theme) Documentation is available on [GitHub Pages](https://agenticmorf.github.io/fluxui-theme/). FluxUI theme and appearance settings with color swatch pickers for Laravel applications using [Livewire Flux](https://fluxui.dev). Installation ------------ [](#installation) ``` composer require agenticmorf/fluxui-theme ``` Run the migration: ``` php artisan migrate ``` The **App default** accent swatch and live preview use `config('fluxui-theme.defaults.accent')`. Publish or merge config so it matches your app’s CSS accent (for example `orange`). Requirements ------------ [](#requirements) - Laravel 11+ - Livewire 3+ - Livewire Flux 2+ - Livewire Volt 1+ Features -------- [](#features) - **Theme mode**: Light, dark, or system - **Accent color swatches**: 19 Flux accent colors - **Base color swatches**: 10 Flux base colors (slate, gray, zinc, neutral, stone, mauve, olive, mist, taupe) - User preferences stored in `appearance_preferences` JSON on User model Integration Guide ----------------- [](#integration-guide) ### 1. CSS Setup [](#1-css-setup) Your app must import Flux CSS and ensure base colors (slate, gray, zinc, neutral, stone, mauve, olive, mist, taupe) are available. Flux provides these via its dist; base color switching works by remapping `--color-zinc-*` to the chosen base. In `resources/css/app.css` (or equivalent): ``` @import 'tailwindcss'; @import '../../vendor/livewire/flux/dist/flux.css'; /* Flux stubs for component class discovery */ @source '../../vendor/livewire/flux/stubs/**/*.blade.php'; @custom-variant dark (&:where(.dark, .dark *)); ``` The package’s appearance component injects inline CSS when a non-zinc base is selected, redefining `--color-zinc-50` through `--color-zinc-950` to the chosen base (e.g. `--color-slate-50`, etc.). Flux’s `flux.css` must define those base color variables. ### 2. Blade: Layout Head [](#2-blade-layout-head) Include the appearance component **before** `@fluxAppearance` in your layout’s `` so theme and base color are applied before Flux initializes: ``` {{-- In resources/views/partials/head.blade.php or your main layout --}} @vite(['resources/css/app.css', 'resources/js/app.js']) @fluxAppearance ``` ### 3. Blade: Accent Color Wrapper [](#3-blade-accent-color-wrapper) Wrap your main app shell with `` so accent colors apply. Pass the effective accent from `AppearanceService`. **Set `id="flux-accent"`** on that component. Flux renders a plain `` with no id by default; the appearance settings page injects live preview CSS that targets `#flux-accent`, so without this id the swatch picker will not update the UI in real time. ``` @php $appearance = app(\AgenticMorf\FluxuiTheme\AppearanceService::class)->getEffective(auth()->user()); @endphp {{-- Your app content: sidebar, header, main, etc. --}} ``` Use this in layouts that render authenticated UI (e.g. `components/layouts/app/sidebar.blade.php`, `header.blade.php`, or a shared app layout). ### 4. Blade: Settings Navigation [](#4-blade-settings-navigation) Add a link to the appearance settings page in your settings layout. The route name is configurable (default `appearance.edit`): ``` {{ __('Appearance') }} ``` ### 5. Settings Layout [](#5-settings-layout) The appearance page expects a settings layout component that provides `$heading`, `$subheading`, and a `$slot`. For example: ``` {{-- x-settings.layout --}} {{-- ... other nav items ... --}} {{ __('Appearance') }} {{ $heading ?? '' }} {{ $subheading ?? '' }} {{ $slot }} ``` The Volt component optionally includes `partials.settings-heading` for a shared settings page header. Create it if you use a common settings layout: ``` {{-- resources/views/partials/settings-heading.blade.php --}} {{ __('Settings') }} {{ __('Manage your profile and account settings') }} ``` If the partial does not exist, it is skipped. ### 6. User Model [](#6-user-model) Add the cast for `appearance_preferences`: ``` protected $casts = [ 'appearance_preferences' => 'array', ]; ``` The migration adds the `appearance_preferences` column automatically when you run `php artisan migrate`. Configuration ------------- [](#configuration) Publish the config: ``` php artisan vendor:publish --tag=fluxui-theme-config ``` ### App Defaults Resolver [](#app-defaults-resolver) To use app-level defaults (e.g. from a settings table), set `appearance_resolver` in `config/fluxui-theme.php`: ``` 'appearance_resolver' => [App\Services\MorfSettings::class, 'getAppearance'], ``` The resolver should return `['accent' => string, 'base' => string, 'theme' => string]`. ### Route [](#route) By default the appearance page is at `settings/appearance` with route name `appearance.edit`. Override in config: ``` 'route' => 'settings/appearance', 'route_name' => 'appearance.edit', ``` Usage ----- [](#usage) Get effective appearance for the current user: ``` $appearance = app(\AgenticMorf\FluxuiTheme\AppearanceService::class)->getEffective(auth()->user()); // ['accent' => 'blue', 'base' => 'zinc', 'theme' => 'system'] ``` Existing Migrations ------------------- [](#existing-migrations) If your app already adds `appearance_preferences` to the `users` table, you can keep that migration: this package’s migration checks for the column before adding it, so running both is safe. If the column is missing at runtime, run `php artisan migrate` (see [installation](docs/installation.md#column-still-missing) for deploy notes). License ------- [](#license) MIT ### Health Score 39 — LowBetter than 86% of packages Maintenance95 Actively maintained with recent releases Popularity2 Limited adoption so far Community6 Small or concentrated contributor base Maturity46 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Unknown Total 1 Last Release 32d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/bdadda5dda1f5a9711517509d5e552a699cd17fdac70fcc0ce7d364697d9cf0f?d=identicon)[ChrisThompsonTLDR](/maintainers/ChrisThompsonTLDR) --- Top Contributors [![ChrisThompsonTLDR](https://avatars.githubusercontent.com/u/348801?v=4)](https://github.com/ChrisThompsonTLDR "ChrisThompsonTLDR (9 commits)") --- Tags laravellivewirethemefluxuiappearance ### Code Quality TestsPest ### Embed Badge ![Health badge](/badges/agenticmorf-fluxui-theme/health.svg) ``` [![Health](https://phpackages.com/badges/agenticmorf-fluxui-theme/health.svg)](https://phpackages.com/packages/agenticmorf-fluxui-theme) ``` ### Alternatives [livewire/flux The official UI component library for Livewire. 9385.0M85](/packages/livewire-flux)[mati365/ckeditor5-livewire CKEditor 5 integration for Laravel Livewire 413.9k](/packages/mati365-ckeditor5-livewire)[tomshaw/electricgrid A feature-rich Livewire package designed for projects that require dynamic, interactive data tables. 116.6k](/packages/tomshaw-electricgrid)[mwguerra/web-terminal A web-based terminal component for Filament/Laravel with command whitelisting and multiple connection types 251.1k](/packages/mwguerra-web-terminal) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)