Filament Custom Theme

Theme presets y utilidades para personalizar Filament v4 fácilmente.

Instalación

composer require cursosdesarrolloweb/filament-custom-theme

Uso Rápido

Aplica un tema prediseñado en tu PanelProvider:

use CursosDesarrolloWeb\CustomTheme\Themes\CorporateTheme;

public function panel(Panel $panel): Panel
{
    return CorporateTheme::make()->apply($panel);
}

Temas Disponibles

Personalizar un Preset

Todos los temas pueden personalizarse mediante métodos fluent:

use CursosDesarrolloWeb\CustomTheme\Themes\CorporateTheme;
use Filament\Enums\ThemeMode;

CorporateTheme::make()
    ->primaryColor('#3B82F6')
    ->dangerColor('#EF4444')
    ->grayColor('#64748B')
    ->logo(asset('images/logo.svg'))
    ->darkModeLogo(asset('images/logo-dark.svg'))
    ->favicon(asset('images/favicon.ico'))
    ->brandLogoHeight('2.5rem')
    ->themeMode(ThemeMode::Light)
    ->apply($panel);

Métodos Disponibles

Colores Personalizados

Puedes usar colores hex, RGB o las constantes de Tailwind:

use Filament\Support\Colors\Color;

// Hex
CorporateTheme::make()->primaryColor('#6366f1');

// RGB string
CorporateTheme::make()->primaryColor('rgb(99, 102, 241)');

// Tailwind Color
CorporateTheme::make()->primaryColor(Color::Purple);

Crear tu Propio Tema

Extiende BaseTheme para crear temas reutilizables:

<?php

namespace App\Themes;

use CursosDesarrolloWeb\CustomTheme\Themes\BaseTheme;
use Filament\Enums\ThemeMode;
use Filament\Support\Colors\Color;

class MiTema extends BaseTheme
{
    protected array|string $primaryColor = '#6366f1';
    protected array|string $dangerColor = Color::Red;
    protected array|string $grayColor = Color::Slate;
    protected array|string $infoColor = Color::Sky;
    protected array|string $successColor = Color::Green;
    protected array|string $warningColor = Color::Amber;
    
    protected ?string $logo = '/images/logo.svg';
    protected ?ThemeMode $themeMode = ThemeMode::System;
}

Úsalo en tu panel:

use App\Themes\MiTema;

public function panel(Panel $panel): Panel
{
    return MiTema::make()->apply($panel);
}

Usando el Trait HasTheme

Para una integración más limpia, usa el trait en tu PanelProvider:

use CursosDesarrolloWeb\CustomTheme\Concerns\HasTheme;
use CursosDesarrolloWeb\CustomTheme\Themes\CorporateTheme;

class AdminPanelProvider extends PanelProvider
{
    use HasTheme;

    public function panel(Panel $panel): Panel
    {
        return $this->applyTheme($panel, CorporateTheme::class);
    }
}

Generador de Colores OKLCH

El paquete incluye un generador de paletas OKLCH para crear colores personalizados:

use CursosDesarrolloWeb\CustomTheme\Support\ColorGenerator;

// Generar paleta completa desde hex
$palette = ColorGenerator::fromHex('#6366f1');
// Retorna: [50 => 'oklch(...)', 100 => 'oklch(...)', ... 950 => 'oklch(...)']

// Generar paleta desde RGB
$palette = ColorGenerator::fromRgb(99, 102, 241);

// Convertir hex a OKLCH
$oklch = ColorGenerator::hexToOklch('#6366f1');
// Retorna: 'oklch(0.541 0.245 264.052)'

Requisitos

• PHP 8.2+
• Laravel 11+
• Filament 4.x|5.x

Licencia

Propietario - Solo para suscriptores de CursosDesarrolloWeb.