The Filament PHP ecosystem just got a fresh new look! I'm excited to introduce the Nord Theme for Filament PHP. This beautifully designed theme features both light and dark modes and is inspired by the popular Nord color palette. If you're looking for a clean, stylish, and visually soothing user interface for your Filament applications, this theme is your perfect match! ❄️ ⛄

Why the Nord Theme?

Nord is a beloved color palette derived from the icy blues, snowy tones of the Arctic and the mesmerizing hues of the Aurora Borealis. Designed for optimal readability and minimal eye strain, it blends Nordic aesthetics with cool, calming, and balanced dimmed pastel tones making it a ideal choice for a modern and elegant UI.

This is the Filament Nord theme custom gray palette used to match the Nord's Polar Night and Snow Storm colors:

Features of the Filament Nord Theme

🌙 Light and Dark Modes – Seamlessly switch between light and dark themes.

🎨 Consistent Nord Palette – Every UI element is carefully styled to match the Nord theme.

⚡ Easy Installation – Quickly set up the theme in your Filament project.

Installation

Getting started with the Filament Nord Theme is simple. You can install it via Composer:

composer require andreia/filament-nord-theme

To install the theme's required JS libraries (the forms, typography TailwindCSS plugins, and also postcss and autoprefixer) and create the postcss.config.js file if it not exists yet, run:

php artisan filament-nord-theme:install

Add a new item to the input array of your vite.config.js file:

'vendor/andreia/filament-nord-theme/resources/css/theme.css'

Compile the assets with:

npm run build

Register the plugin on your panel (e.g. /app/Providers/Filament/AdminPanelProvider.php):

use Andreia\FilamentNordTheme\FilamentNordThemePlugin;

$panel
  ->plugin(FilamentNordThemePlugin::make())

You are all set!

Theme Preview

Here's a preview of what the Filament demo project looks like with the Nord Theme applied:

Screenshots

Every detail is carefully thought out to create a eye-comfortable, and clean feeling.

Dashboard

Dashboard Light	Dashboard Dark

User Menu

User Menu Light	User Menu Dark

Product

Create Product Light	Create Product Dark

Order

Order List Light	Order List Dark

Create Order Light	Create Order Dark

Conclusion

The Nord Theme for Filament PHP brings a sleek, modern look to your Filament app with a focus on a clean design and aesthetics. It provides both a dark a light mode and it can be easily applied to your existing app.

Give it a try and let me know your thoughts! You can find the project on GitHub: Filament Nord Theme.

Happy theming! 💛 ✨