Noir Theme

• Preview
• Installation
• Using the Noir Theme with the Compact Theme
• Colors
  • Changing the focus color
  • Starting in dark mode
• Features that suit the Noir Theme
  • Use a sidebar-only layout
• Customizing the theme
  • Changing the radius
  • Changing the authentication glow
• Support

The Noir Theme gives Filament panels a focused, refined look through near-black surfaces, crisp light actions and carefully limited color. It is a good fit for media, analytics and technical products, or brands that want the interface to stay quiet while their content stands out.

It includes a matching light mode, subtle depth between surfaces and quieter status colors. Customization tokens let you tune the corners, surfaces, focus treatment and background blur, while optional color palettes help the whole panel keep the same restrained character.

The Noir Theme uses Filament's default Heroicons and does not require an icon package.

View live demo

#Preview

These previews follow your light or dark color scheme. Open the matching Noir + 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 Noir 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/noir-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/noir-theme/resources/css/layers.css';
@import '../../../../vendor/filament/filament/resources/css/theme.css';
@import '../../../../vendor/filament/noir-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('--noir-theme-layer-order')

The result should be ok.

#Using the Noir Theme with the Compact Theme

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

@import '../../../../vendor/filament/noir-theme/resources/css/layers.css';
@import '../../../../vendor/filament/filament/resources/css/theme.css';
@import '../../../../vendor/filament/noir-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 Noir Theme includes its recommended monochrome palette and quieter status colors. You can register the complete set at once:

use Filament\NoirTheme\NoirThemeColor;

$panel->colors(NoirThemeColor::Colors)

To change or omit individual colors, register them separately:

use Filament\NoirTheme\NoirThemeColor;

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

Gray and Primary both use Zinc to give the theme its monochrome look. You can use another primary color if you want to keep your brand color. All of these colors are optional; Filament's defaults work too.

#Changing the focus color

Focus indicators use the primary color by default. Register a focus color to change them without changing your primary color:

use Filament\NoirTheme\NoirThemeColor;
use Filament\Support\Colors\Color;

$panel->colors([
    ...NoirThemeColor::Colors,
    'focus' => Color::Teal,
])

#Starting in dark mode

You can make dark mode the default while keeping Filament's theme switcher:

use Filament\Enums\ThemeMode;

$panel->defaultThemeMode(ThemeMode::Dark)

This ignores the user's system preference until they choose light, dark or system mode themselves. Filament remembers that choice in their browser.

#Features that suit the Noir 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 {
    --noir-theme-radius: 0.25rem;
}

.fi-body {
    --noir-theme-band: transparent;
}

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 {
    --noir-theme-ground: var(--gray-50);
}

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

The table shows the light-mode defaults. The Noir Theme sets matching dark-mode values for the same variables.

#Changing the radius

The default radius is 0.375rem. Use a smaller value for sharper corners or 0 for square corners:

:root {
    --noir-theme-radius: 0.25rem;
}

Values up to Filament's default 0.5rem work best.

#Changing the authentication glow

Use any CSS color to retune the glow behind authentication pages. Set it to transparent to remove the glow:

.fi-body {
    --noir-theme-auth-glow: transparent;
}

#Support

If you encounter an issue or have a suggestion for improving the Noir Theme, please open an issue or discussion on the Noir 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.