Download the PHP package yepsua/filament-themes without Composer

Theme manager for filament

Configurable theme manager for filament.

We recommend reading the official documentation about how to create themes on the Filament web site

Features

• Change the filament theme color from the config file.
• Supports Mix and Vite bundlers

Installation

You can install the package via composer:

You can publish the config file with:

Usage

Notice: The next steps assume the .css file is located in the folder '/resources/css/app.css' but you can change the name and location of this file, just take into account if you copy and paste some code on this guide.

• Install the assets from the plugin:

• Configure the tailwind resource using css variables:

tailwind.config.js:

• Make sure you have in your resources/css/app.css the next content:

resources/css/app.css:

Steps for Laravel Mix

• Configure the postCss in the webpack.mix.js to use tailwindcss and autoprefixer

webpack.mix.js:

Steps for Laravel Vite

• If you are using vite instead of mix, you must set 'enable_vite' to true. The 'theme_public_path' will be rendered using vite() instead of mix()

config/filament-themes.php

• Configure the postCss in the postcss.config.js to use tailwindcss and autoprefixer

postcss.config.js:

• Configure the vite.config.js

vite.config.js

Last steps

• Update the config file to change the theme color:

config/filament-themes.php:

Available colors (based on the tailwind color pallet):

• slate: slate.css
• gray: gray.css
• zinc: zinc.css
• neutral neutral.css
• stone: stone.css
• red: red.css
• orange: orange.css
• amber: amber.css
• yellow: yellow.css
• lime: lime.css
• green: green.css
• emerald: emerald.css
• teal: teal.css
• cyan: cyan.css
• sky: sky.css
• blue: blue.css
• indigo: indigo.css
• violet: violet.css
• purple: purple.css
• fuchsia: fuchsia.css
• pink: pink.css

• rose: rose.css

• Compile the assets

__

Now, you should see the app using the color defined in your config file. You can change the color without recompiling the resources, just updating the config file.

Notice: The theme manager uses the Mix or Vite to import the css resources. If you need to change the default behavior, you can do it by the next way:

1) Disable the auto_register in the config file filament-themes.php:

2) Register the theme inside your AppServiceProvider

Notice:

Finally, as you can see, you don't need a package to get this functionality, You just need to configure tailwind using css variables and add new styles defining the primary color variables, however just installing this plugin is pretty easy to manage the themes colors from a config file.

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• Omar Yepez
• All Contributors

License

The MIT License (MIT). Please see License File for more information.