• Why This Package?
• Screenshots
• Installation
• Basic Usage
• All 8 Official Themes
• Advanced: Custom Adaptive Colors
• Requirements
• License

The only Filament theme that changes colors between light and dark modes — just like Shadcn UI.

#Why This Package?

Filament's built-in themes keep the same colors in both light and dark modes. A blue button stays blue. Always.

Shadcn changes the game — the Default theme creates sophisticated contrast with inverted colors:

• Light mode: Dark charcoal buttons that command attention
• Dark mode: Light gray buttons that feel native

This is the Shadcn magic. Now available for Filament.

#Screenshots

Light Mode - Dark buttons on light background	Dark Mode - Light buttons on dark background
Orders List - With stats and filters	Perfect contrast - In both modes

#Installation

composer require openplain/filament-shadcn-theme

#Basic Usage

Add to your Panel Provider (e.g., app/Providers/Filament/AdminPanelProvider.php):

use Openplain\FilamentShadcnTheme\Color;
 
public function panel(Panel $panel): Panel
{
    return $panel
        ->colors([
            'primary' => Color::Default,  // The Shadcn effect
        ]);
}

#All 8 Official Themes

Color::Default  // Inverted grays (Shadcn's signature)
Color::Red      // Vibrant red
Color::Rose     // Soft rose
Color::Orange   // Warm orange
Color::Green    // Fresh green
Color::Blue     // Classic blue
Color::Yellow   // Bright yellow
Color::Violet   // Rich violet

Based on the official themes from ui.shadcn.com/themes.

#Advanced: Custom Adaptive Colors

Want your brand blue in light mode but teal in dark mode? Use the adaptive() method:

use Filament\Support\Colors\Color as FilamentColor;
 
'primary' => Color::adaptive(
    lightColor: FilamentColor::Blue,
    darkColor: FilamentColor::Teal
)

Perfect for:

• Brands requiring specific contrast ratios
• Seasonal color changes
• Multi-tenant applications with theme requirements

#Requirements

• PHP 8.1+
• Filament 4.0+

#License

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