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:
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.
You can check more screenshots on my blog.
Give it a try and let me know your thoughts! You can find the project on GitHub: Filament Nord Theme.
Happy theming! 💛 ✨
Top comments (0)