README

A Material 3 Design theme plugin for Laravel Filament v5, bringing Google's latest design system to your admin panels.

This plugin applies the Material 3 Design System to your Filament admin panels, providing a modern, accessible, and visually appealing interface with comprehensive color palettes and built-in dark mode support.

Features

Multiple Color Themes: Choose from predefined themes (Blue, Green, Red, Yellow)
Type-Safe Configuration: Uses PHP Enum for color theme selection
Fluent API Only: Configure directly in your panel provider
Material 3 Color System: Full implementation of Material 3 tonal palettes
Dark Mode: Built-in dark mode support (uses Filament's dark mode config)
Filament v5 Compatibility: Built specifically for Filament v5

Installation

Install the package via Composer:

composer require manusiakemos/filament-material-3

Add the theme CSS entries to your vite.config.js:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'vendor/manusiakemos/filament-material-3/resources/css/material-3-blue.css',
                'vendor/manusiakemos/filament-material-3/resources/css/material-3-green.css',
                'vendor/manusiakemos/filament-material-3/resources/css/material-3-red.css',
                'vendor/manusiakemos/filament-material-3/resources/css/material-3-yellow.css',
            ],
            refresh: true,
        }),
        tailwindcss(),
    ],
});

Build your assets:

pnpm run build

Usage

Basic Setup

use Manusiakemos\FilamentMaterial3\FilamentMaterial3Plugin;

public function panel(Panel $panel): Panel
{
    return $panel
        // Use Filament's built-in config for dark mode, fonts, etc.
        ->darkMode()
        ->font('Roboto')
        ->plugin(FilamentMaterial3Plugin::make());
}

Color Themes

Theme	Enum Value	Description	Filament Color
Blue	`ColorTheme::Blue`	Blue (default)	Blue
Green	`ColorTheme::Green`	Green	Lime
Red	`ColorTheme::Red`	Red/Orange	Red
Yellow	`ColorTheme::Yellow`	Yellow/Amber	Amber

Theme Selection

Use the fluent API in your panel provider:

use Manusiakemos\FilamentMaterial3\FilamentMaterial3Plugin;
use Manusiakemos\FilamentMaterial3\Enums\ColorTheme;
use Filament\Support\Colors\Color;

// Default blue theme
$panel->plugin(FilamentMaterial3Plugin::make());

// Green theme using enum (recommended)
$panel->plugin(
    FilamentMaterial3Plugin::make()
        ->colorTheme(ColorTheme::Green)
);

// Red theme using string
$panel->plugin(
    FilamentMaterial3Plugin::make()
        ->colorTheme('red')
);

// Yellow theme with custom color overrides
$panel->plugin(
    FilamentMaterial3Plugin::make()
        ->colorTheme(ColorTheme::Yellow)
        ->colors([
            'primary' => Color::Amber,
        ])
);

// Blue theme with all options
$panel->plugin(
    FilamentMaterial3Plugin::make()
        ->colorTheme(ColorTheme::Blue)
        ->primaryColor('#769CDF')
        ->colors([
            'primary' => Color::Blue,
        ])
);

Complete Example

use Manusiakemos\FilamentMaterial3\FilamentMaterial3Plugin;
use Manusiakemos\FilamentMaterial3\Enums\ColorTheme;
use Filament\Support\Colors\Color;

public function panel(Panel $panel): Panel
{
    return $panel
        ->default()
        ->id('admin')
        ->path('admin')
        ->login()
        // Filament's built-in config
        ->darkMode()
        ->font('Inter')
        // Material 3 theme plugin
        ->plugin(
            FilamentMaterial3Plugin::make()
                ->colorTheme(ColorTheme::Green)
                ->colors([
                    'primary' => Color::Lime,
                ])
        )
        ->discoverResources(in: app_path('Filament/Resources'), for: 'App\Filament\Resources')
        ->discoverPages(in: app_path('Filament/Pages'), for: 'App\Filament\Pages')
        ->discoverWidgets(in: app_path('Filament/Widgets'), for: 'App\Filament\Widgets');
}

Available Methods

Method	Description
`colorTheme(ColorTheme\|string $theme)`	Set the color theme (accepts enum or string: 'blue', 'green', 'red', 'yellow')
`colors(array $colors)`	Override Filament colors (merged with theme defaults)
`primaryColor(string $hex)`	Set the primary/source color

Runtime Access

use Manusiakemos\FilamentMaterial3\FilamentMaterial3Plugin;
use Manusiakemos\FilamentMaterial3\Enums\ColorTheme;

// Get current theme
$theme = FilamentMaterial3Plugin::get()->getColorTheme();

// Check theme
if ($theme === ColorTheme::Green) {
    // Theme-specific logic
}

ColorTheme Enum

use Manusiakemos\FilamentMaterial3\Enums\ColorTheme;

// Get all available themes
$themes = ColorTheme::cases();

// Get all theme values
$values = ColorTheme::values(); // ['blue', 'green', 'red', 'yellow']

// Get default theme
$default = ColorTheme::default(); // ColorTheme::Blue

// Get theme info
$label = ColorTheme::Green->getLabel();        // 'Green'
$description = ColorTheme::Green->getDescription(); // 'Green color scheme'
$cssPath = ColorTheme::Green->getCssPath();    // 'vendor/.../material-3-green.css'
$filamentColor = ColorTheme::Green->getFilamentColor(); // array of color shades

Dark Mode

Use Filament's built-in dark mode configuration:

public function panel(Panel $panel): Panel
{
    return $panel
        // Enable dark mode
        ->darkMode()
        // Or force dark mode
        // ->darkMode(true)
        // Or disable
        // ->darkMode(false)
        ->plugin(FilamentMaterial3Plugin::make());
}

Fonts

Use Filament's built-in font configuration:

public function panel(Panel $panel): Panel
{
    return $panel
        ->font('Inter')
        // Or with provider
        // ->font('Inter', provider: 'google')
        ->plugin(FilamentMaterial3Plugin::make());
}

Creating Custom Themes

Create a new CSS file in resources/css/themes/your-theme.css
Define your Material 3 color variables for both light and dark modes
Create an entry file resources/css/material-3-your-theme.css:

/* material-3-your-theme.css */
@import './material-3-base.css';
@import './themes/your-theme.css';

Add the entry to your vite.config.js
Add the new case to ColorTheme enum

Testing

composer test

Requirements

PHP 8.2 or higher
Laravel 10.0 or 11.0 or 12.0
Filament 4.0 or 5.0 or higher

License

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

Credits

Support

If you discover any security related issues, please email manusiakemos@gmail.com instead of using the issue tracker.

Star the Project

If you find this package useful, please consider giving it a star on GitHub!

⭐ Star on GitHub

manusiakemos / filament-material-3

Maintainers

Details