Soft Theme

• Preview
• Installation
• Using the Soft Theme with the Compact Theme
• Colors
• Serif display type
• Features that suit the Soft Theme
  • Use a sidebar-only layout
• Customizing the theme
  • Changing the radius
  • Using sans-serif headings
  • Adding borders to fields
  • Changing the dark mode glow
• Support

The Soft Theme brings a warmer, more approachable character to Filament panels. Its rounded shapes, gentle colors and serif headings make it a good fit for lifestyle, creative and editorial products, or any app that should feel less like traditional admin software.

It includes carefully matched light and dark modes, filled inputs, soft shadows and pastel badges. A small set of customization tokens makes it easy to adjust the corners, colors, shadows and typography to suit your brand.

View live demo

#Preview

These previews follow your light or dark color scheme. Open the matching Soft + Compact version below each image.

Orders	Edit product
With Compact: Light · Dark	With Compact: Light · Dark
Project overview	Edit department
With Compact: Light · Dark	With Compact: Light · Dark

#Installation

After purchasing the Soft Theme, install it through Filament's Composer repository:

composer config repositories.filament composer https://packages.filamentphp.com/composer
composer config --auth http-basic.packages.filamentphp.com "YOUR_EMAIL_ADDRESS" "YOUR_LICENSE_KEY"
composer require filament/soft-theme

You can find your license key in your Filament Packages account.

Add the following imports to your panel's theme file, such as resources/css/filament/admin/theme.css:

@import '../../../../vendor/filament/soft-theme/resources/css/layers.css';
@import '../../../../vendor/filament/filament/resources/css/theme.css';
@import '../../../../vendor/filament/soft-theme/resources/css/theme.css';

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

Then rebuild your assets:

npm run build

The layers.css import must come before Filament's CSS. If the theme does not look right, run this in your browser console:

getComputedStyle(document.body).getPropertyValue('--soft-theme-layer-order')

The result should be ok.

#Using the Soft Theme with the Compact Theme

Install filament/compact-theme, then add its import after the Soft Theme:

@import '../../../../vendor/filament/soft-theme/resources/css/layers.css';
@import '../../../../vendor/filament/filament/resources/css/theme.css';
@import '../../../../vendor/filament/soft-theme/resources/css/theme.css';
@import '../../../../vendor/filament/compact-theme/resources/css/theme.css';

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

The order of the two theme imports does not matter.

#Colors

The Soft Theme uses the colors registered on your panel. It also includes the warm palettes used in the demo. You can register the complete set at once:

use Filament\SoftTheme\SoftThemeColor;

$panel->colors(SoftThemeColor::Colors)

To change or omit individual colors, register them separately:

use Filament\SoftTheme\SoftThemeColor;

$panel->colors([
    'gray' => SoftThemeColor::Gray,
    'primary' => SoftThemeColor::Primary,
    'danger' => SoftThemeColor::Danger,
    'warning' => SoftThemeColor::Warning,
    'success' => SoftThemeColor::Success,
    'info' => SoftThemeColor::Info,
])

The four status colors are quieter alternatives to Filament's defaults and are designed for Soft's warm light and Candlelit dark backgrounds. This is optional. Other Filament color palettes will work too.

#Serif display type

The Soft Theme uses your panel's serif font for headings and text-based brand names. Lora is recommended:

$panel->serifFont('Lora')

Other serif fonts will work too.

#Features that suit the Soft Theme

#Use a sidebar-only layout

You can hide the topbar to give page content more vertical space:

$panel->topbar(false)

Filament places global search, the user menu and database notifications in the sidebar by default when the topbar is hidden.

#Customizing the theme

Set the radius on :root. Set the other variables on .fi-body, after the theme imports:

:root {
    --soft-theme-radius: 1rem;
}

.fi-body {
    --soft-theme-input-border: var(--gray-300);
}

An override on .fi-body applies to both light and dark mode. To use a different value in dark mode, add a dark-mode override:

.fi-body {
    --soft-theme-ground: var(--gray-50);
}

.dark .fi-body {
    --soft-theme-ground: var(--gray-950);
}

The table shows the light-mode defaults. The Soft Theme sets dark-mode values where needed.

#Changing the radius

The default radius is 1.5rem. Smaller values make the theme less rounded, and 0 makes the corners square:

:root {
    --soft-theme-radius: 1rem;
}

#Using sans-serif headings

To use the panel's sans-serif font for headings:

.fi-body {
    --soft-theme-font-display: var(--font-sans);
}

#Adding borders to fields

Fields are borderless by default. You can add a border without changing their filled background:

.fi-body {
    --soft-theme-input-border: var(--gray-300);
}

#Changing the dark mode glow

The dark mode panel has a warm glow across the top. You can replace it with a color that suits your brand:

.dark .fi-body {
    --soft-theme-dark-glow: radial-gradient(
        circle at top,
        rgb(59 130 246 / 15%),
        transparent 65%
    );
}

Set --soft-theme-dark-glow to none to remove the glow.

#Support

If you encounter an issue or have a suggestion for improving the Soft Theme, please open an issue or discussion on the Soft Theme GitHub repository. You can get an invite by adding your GitHub username to your customer dashboard at packages.filamentphp.com. For account, purchase or license-related questions, email support@filamentphp.com.