Courses

Filament 3 From Scratch: Practical Course

Change Colors, Fonts, Themes

You're reading a FREE PREVIEW of a PREMIUM course.
Summary of this lesson:
- Customizing colors and fonts
- Managing theme settings
- Understanding available theme options
- Working with Tailwind colors

If you want to change the appearance of Filament panel designs, there are small things you can change easily, and creating your own themes is possible. Let's explore the possibilities.


Changing colors

All the colors of all elements you see on the Filament pages are taken from the list of six colors. Each has its name and default values:

  • primary (amber)
  • success (emerald)
  • info (blue)
  • warning (orange)
  • danger (rose)
  • gray (gray)

You can see those names being used in various components:

So, if you want to use a "success" style instead of a "primary" class, you can change it in one of the methods for specific components.

For example, in the...

The full lesson is only for Premium Members.
Want to access all 24 lessons of this course? (101 min read)

You also get:

  • 76 courses
  • Premium tutorials
  • Access to repositories
  • Private Discord