Editorial Theme by Jefferson Gonçalves

• Compatibility
• Screenshots
• Starter kits
• Installation
• Usage
  • Options
  • Terminal login
• Gotchas
• Requirements
• Testing
• Changelog
• Contributing
• Security Vulnerabilities
• Credits
• License

Editorial Terminal — a paper + terminal theme for Filament 3, 4 and 5, the one behind jeffersongoncalves.dev.br.

• Fraunces (display), DM Sans (UI) and JetBrains Mono (code), bundled — no Google Fonts request
• Ink / paper / amber palette with dark (default) and light schemes driven by semantic tokens
• Paper-grain overlay, amber scrollbars, sidebar layout fixes for Livewire morphing
• Footer and sidebar-status partials, external links opened in a new tab
• Optional terminal-style login with a light/dark toggle

#Compatibility

1.0.0 was a Filament 5 build published before the branches were split — on Filament 5 require ^3.0.

#Screenshots

Screenshot	Light	Dark
Login
Dashboard
Resource list
Resource edit

#Starter kits

Start a new project with the theme already wired in: admin, app and guest panels, multi-auth, terminal login and developer logins.

#Installation

composer require jeffersongoncalves/filament-editorial-theme:"^3.0"

The theme ships as CSS that your panel's Vite theme imports. If the panel has no custom theme yet, create one with php artisan make:filament-theme, then make resources/css/filament/admin/theme.css look like this:

@import '../../../../vendor/filament/filament/resources/css/theme.css';
@import '../../../../vendor/jeffersongoncalves/filament-editorial-theme/resources/css/theme.css';

/* Tailwind v4 only keeps utilities found in @source files: include the theme's partials. */
@source '../../../../vendor/jeffersongoncalves/filament-editorial-theme/resources/views';

@source '../../../../app/Filament';
@source '../../../../resources/views/filament';

/* Your overrides below */

Make sure the file is a Vite input and the panel uses it (->viteTheme('resources/css/filament/admin/theme.css')), then build with pnpm run build (or npm run build).

#Usage

use JeffersonGoncalves\FilamentEditorialTheme\EditorialThemePlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        ->viteTheme('resources/css/filament/admin/theme.css')
        ->plugin(
            EditorialThemePlugin::make()
                ->logo(fn () => asset('img/logo.svg'))
                ->brandName('Acme Inc.')
                ->terminalLogin(),
        );
}

#Options

Everything else is a CSS token: override --surface-*, --text-*, --accent, the fonts (--font-serif, --font-sans, --font-mono in an @theme block) and the rest below the @import in your theme file.

#Terminal login

->terminalLogin() swaps the panel login for the bundled page. To customize it, extend it and point the panel at your class:

namespace App\Filament\Admin\Pages\Auth;

class Login extends \JeffersonGoncalves\FilamentEditorialTheme\Pages\Auth\Login
{
    protected function getCredentialsFromFormData(array $data): array
    {
        return [...parent::getCredentialsFromFormData($data), 'status' => true];
    }
}

$panel->login(\App\Filament\Admin\Pages\Auth\Login::class);

Behind the terminal you can show a blurred preview of any view (your public homepage, for instance) — publish the config and set login.preview_view:

php artisan vendor:publish --tag=filament-editorial-theme-config

The login and status strings ship in 19 languages (ar, az, de, en, es, fa, fr, hi, it, ja, nl, pl, pt, pt_BR, ru, tr, uk, uz, zh_CN).

#Gotchas

The theme includes layout fixes that look unusual but exist for concrete reasons — keep them if you copy the CSS:

• Sidebar layout fixes are desktop-only (@media (min-width: 1024px)): on mobile the sidebar is a drawer; pinning the wrapper to 81px would leave an empty gutter.
• min-height: 0 on .fi-sidebar-nav is what lets overflow-y: auto clip — without it the sidebar footer scrolls off-screen.
• --text-on-accent is #fff in the light scheme because amber-600 is too dark for ink text to read well.
• Outlined primary buttons keep currentColor icons instead of --text-on-accent, so the icon matches the label on a transparent background.
• Scrollbars use tokens (--accent on --surface-base) — they're part of the visual identity.

#Requirements

• PHP 8.2 or higher
• Filament 5.x

#Testing

composer test

#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

• Jefferson Gonçalves
• All Contributors

#License

The MIT License (MIT). Please see License File for more information. The bundled fonts are licensed under the SIL Open Font License 1.1 — see resources/fonts/OFL.md.