Filament PHP Cappuccino Theme Logo

#Filament Cappuccino Theme

Designed for extended screen time, this warm and neutral Filament light theme combines a compact UI with a soothing palette of cream, sand, and gold.

#Video

Check out how the theme looks when applied to Filament demo project:

#Features

Compact UI
Pleasant cappuccino inspired colors
Per-panel scoping
Customizable primary color palette
Optional mail layouts using the same theme

#Requirements

PHP 8.3+
Filament v4 or v5
Custom Filament panel theme

#Installation

#Purchase and Activation on AnyStack

Capopuccino Theme is a commercial software and uses Anystack to handle payment, licensing, and distribution. You can buy it here.

During the purchasing process, AnyStack will provide you with a license key. Once your license key is activated, you can proceed with the Composer installation described below.

If you encounter any issues related to this, you can contact me via email at andreiabohner@gmail.com.

#Installing with Composer

Add the Filament Cappuccino package to the repositories section of your composer.json file:

{
    "repositories": [
        {
            "type": "composer",
            "url": "https://filament-cappuccino-theme.composer.sh"
        }
    ]
}

Once the repository has been added to the composer.json file, you can install like any other Composer package using the composer require command:

composer require dev-deia/filament-cappuccino-theme

Next, you will be prompted to provide your username and password.

Loading composer repositories with package information
Authentication required (filament-cappuccino.composer.sh):
Username: [license-email]
Password: [license-key]

Your username will be your email address and the password will be your license key. For example, let's say we have the following email and license activation:

Contact email: your@email.com
License key: 04c21df8f-4890-7024-y2vk-6bny143ta642

You will need to enter the above information as follows when prompted for your credentials:

Loading composer repositories with package information
Authentication required (filament-cappuccino.composer.sh):
Username: your@email.com
Password: 04c21df8f-4890-7024-y2vk-6bny143ta642

#Publish the assets

php artisan filament:assets

This command copies the pre-built stylesheet into your public/ directory. Re-run after every composer update or add it to your Composer post update commands hook to automatically execute it after every update.

#Register the plugin

use DevDeia\FilamentCappuccinoTheme\CappuccinoThemePlugin;
use Filament\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugin(CappuccinoThemePlugin::make());
}

That's it, you're all set!

#Optional density settings

The theme enables Filament's dense schema spacing and compact supported components by default. You can disable either behavior per panel:

use DevDeia\FilamentCappuccinoTheme\CappuccinoThemePlugin;

CappuccinoThemePlugin::make()
    ->dense(false)
    ->compact(false)

Or publish and edit the config:

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

#Primary palette

You can pass any 50–950 array (hex or oklch) to ->primaryColor() method to override the Cappuccino gold primary palette:

CappuccinoThemePlugin::make()
    ->primaryColor([
        50  => '#fdf6e3',
        100 => '#f9e9b0',
        // ...
        600 => '#b5963a',
        // ...
        950 => '#1e1806',
    ]);

Use shade 600 for solid buttons and accents — that is also the shade baked into the mail theme when you run cappuccino-theme:install-mail.

#Markdown mail theme

App emails can use the same cream canvas and gold accents as the panel. Publish Laravel’s markdown mail components (layout, header, button, panel, table, footer) plus a Cappuccino CSS theme with:

php artisan cappuccino-theme:install-mail

Files land in resources/views/vendor/mail/. The installer reads shade 600 from the plugin’s primary palette (primaryColor() when set, otherwise the default gold). Pick a panel explicitly when more than one Cappuccino panel exists:

php artisan cappuccino-theme:install-mail --panel=admin

A custom primary color can be passed with:

php artisan cappuccino-theme:install-mail --primary=#b5963a

Add --force to replace files that were published earlier. Because the color is written into the CSS at install time, run the command again after you change the panel primary.

Apply the theme to all emails in config/mail.php:

'markdown' => [
    'theme' => 'cappuccino',
    // ...
],

Or only on selected mailables:

return $this->markdown('mail.welcome')->theme('cappuccino');

#Branding

Default logos come from these env vars:

CAPPUCCINO_MAIL_LOGO=https://example.com/logo.png
CAPPUCCINO_MAIL_LOGO_DARK=https://example.com/logo-dark.png

For tenant-specific mail, pass the same keys as view data on the mailable. They are stored with the job, so queued mail keeps the correct brand:

return new Content(
    markdown: 'mail.welcome',
    with: [
        'logo' => $this->tenant->logo_url,
        'logoDark' => $this->tenant->logo_dark_url,
        'brand' => $this->tenant->name,
        'brandUrl' => $this->tenant->url,
    ],
);

When set, brand replaces config('app.name') for the header label, footer copyright, document title, and logo alt text. brandUrl replaces config('app.url') as the header link.

#Clients & dark mode

Apple Mail, iOS Mail, and Outlook.com respect prefers-color-scheme and can show the dark variant (including CAPPUCCINO_MAIL_LOGO_DARK when provided). Gmail and Outlook desktop often recolor messages on their own; the light layout — cream outer background and white content card — remains the reliable baseline there.