PHPackages northwestern-sysdev/northwestern-filament-theme - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Templating & Views](/categories/templating) 4. / 5. northwestern-sysdev/northwestern-filament-theme ActiveLibrary[Templating & Views](/categories/templating) northwestern-sysdev/northwestern-filament-theme =============================================== Northwestern University branded theme for Filament panels v3.0.2(1mo ago)38.2k↓71%[4 PRs](https://github.com/NIT-Administrative-Systems/northwestern-filament-theme/pulls)1MITPHPPHP ^8.3CI passing Since Mar 16Pushed 1w ago1 watchersCompare [ Source](https://github.com/NIT-Administrative-Systems/northwestern-filament-theme)[ Packagist](https://packagist.org/packages/northwestern-sysdev/northwestern-filament-theme)[ Docs](https://github.com/NIT-Administrative-Systems/northwestern-filament-theme)[ RSS](/packages/northwestern-sysdev-northwestern-filament-theme/feed)WikiDiscussions main Synced today READMEChangelog (10)Dependencies (27)Versions (26)Used By (1) [![Northwestern Filament Theme](art/readme-lockup.png)](art/readme-lockup.png) [![PHP Version](https://camo.githubusercontent.com/ac2ada860614f6eeaf52dc1daf22de80255bd66f385140a15bf6dc9d492c1a5a/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5048502d382e332b2d3737374242343f7374796c653d666c6174266c6f676f3d706870266c6f676f436f6c6f723d7768697465)](https://www.php.net) [![Laravel Version](https://camo.githubusercontent.com/a2783ea01865b53c02d07e107afd70ce181726be1ab042c192f0dd582e14eb46/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c61726176656c2d31322e782532307c25323031332e782d4630353334303f7374796c653d666c6174266c6f676f3d6c61726176656c266c6f676f436f6c6f723d7768697465)](https://laravel.com) [![Filament Version](https://camo.githubusercontent.com/3d782bf9ff00a09cc4c8b73f5d0f52ddbba4a8066c307a043c1de7aeca09db54/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f46696c616d656e742d342e782532307c253230352e782d4644414534423f7374796c653d666c6174266c6f676f3d66696c616d656e74266c6f676f436f6c6f723d7768697465)](https://filamentphp.com) --- A branded [Filament](https://filamentphp.com) theme plugin for [Northwestern University](https://www.northwestern.edu) applications. Applies the official NU color palette, typography, and institutional styling to any Filament panel. [![Before and after comparison of default Filament vs Northwestern theme](art/preview.gif)](art/preview.gif) Installation ------------ [](#installation) ``` composer require northwestern-sysdev/northwestern-filament-theme ``` Quick Start ----------- [](#quick-start) Register the plugin in your Filament panel provider: ``` use Northwestern\FilamentTheme\NorthwesternTheme; public function panel(Panel $panel): Panel { return $panel ->plugins([ NorthwesternTheme::make(), // ... other plugins ]) // ... rest of panel config ; } ``` Then publish the theme assets: ``` php artisan filament:assets ``` Note If your panel has a [custom theme](https://filamentphp.com/docs/5.x/styling/overview#creating-a-custom-theme) via `->viteTheme()`, it will continue to work alongside this plugin. The Northwestern theme is an **additive CSS layer** registered separately through Filament's asset system. It does not replace your custom theme. Vite Theme Integration ---------------------- [](#vite-theme-integration) You can also import the theme directly into your panel's Vite-compiled stylesheet instead of loading it as a separate `` tag. This gives you a single compiled CSS bundle, access to Northwestern design tokens as Tailwind v4 utility classes (e.g., `bg-nu-purple-100`, `text-nu-gold`), and the ability to override specific theme styles in your own CSS. ### Setup [](#setup) Run the install command: ``` php artisan northwestern-theme:install ``` This will: - Create a panel theme CSS file if one doesn't exist - Inject the Northwestern theme `@import` after the Filament base import - Optionally inject Tailwind v4 design tokens for color utilities Then disable automatic asset registration in your panel provider to prevent the CSS from loading twice: ``` NorthwesternTheme::make() ->withoutAssetRegistration() ``` Finally, compile your assets: ``` npm run build ``` ### Tailwind v4 Design Tokens [](#tailwind-v4-design-tokens) When you opt in to design tokens during `northwestern-theme:install`, the plugin provides Northwestern colors as Tailwind v4 utility classes: ``` Purple background Gold accent text Subtle border ``` Available token groups: GroupExamplesPurple scale`nu-purple-10` through `nu-purple-160`Grays`nu-black-10`, `nu-black-20`, `nu-black-50`, `nu-black-80`, `nu-black-100`Brand colors`nu-green`, `nu-teal`, `nu-blue`, `nu-yellow`, `nu-gold`, `nu-orange`Dark brand colors`nu-dark-green`, `nu-dark-teal`, `nu-dark-blue`, etc.Semantic colors`nu-success`, `nu-info`, `nu-warning`, `nu-danger`Note Design tokens require **Tailwind CSS v4+** (they use the `@theme` syntax). The core theme CSS works with any Tailwind version. Dark Mode --------- [](#dark-mode) The theme adapts to Filament's dark mode setting automatically. No extra configuration needed. Favicon & Brand Logo ------------------------ [](#favicon--brand-logo) The plugin automatically sets a Northwestern favicon and brand logo when the panel has not already configured them. If you call `->favicon()` or `->brandLogo()` on your panel, your values take precedence. The brand logo is resolved in the following order: 1. Panel-level `->brandLogo()` (if set, the plugin does not override it) 2. `config('northwestern-theme.lockup')` (from [`northwestern-sysdev/northwestern-laravel-ui`](https://github.com/NIT-Administrative-Systems/northwestern-laravel-ui), if installed) 3. The default Northwestern wordmark SVG from the Northwestern CDN If your application uses [`northwestern-sysdev/northwestern-laravel-ui`](https://github.com/NIT-Administrative-Systems/northwestern-laravel-ui), the `northwestern-theme.lockup` config value is already published for you. The Filament theme plugin reads it automatically. Environment Indicator --------------------- [](#environment-indicator) The theme includes a built-in environment indicator that displays a gold badge in the topbar and a colored top-border on non-production environments. This is enabled by default. The indicator automatically hides in production and on small screens. ### Disabling the Indicator [](#disabling-the-indicator) ``` NorthwesternTheme::make() ->withoutEnvironmentIndicator() ``` ### Custom Visibility [](#custom-visibility) To control when the indicator appears (e.g., only for admins): ``` NorthwesternTheme::make() ->environmentIndicator( visible: fn () => ! app()->isProduction() && auth()->user()?->hasRole('admin'), ) ``` ### Custom Label [](#custom-label) By default, the badge reads "Environment: Local" (or whatever `APP_ENV` is set to). To customize: ``` NorthwesternTheme::make() ->environmentIndicator(label: Str::upper(App::environment())) ``` Note If you are using [`pxlrbt/filament-environment-indicator`](https://github.com/pxlrbt/filament-environment-indicator), you can remove that package. Remove `EnvironmentIndicatorPlugin::make()` from your panel provider and the theme handles the rest. Impersonation Banner -------------------- [](#impersonation-banner) The theme includes a built-in impersonation banner that renders a red bar above the topbar when a user is being impersonated. It is registered by default and shows automatically when [`lab404/laravel-impersonate`](https://github.com/404labfr/laravel-impersonate) is installed and an impersonation session is active. Without lab404, the banner will not appear unless you provide a custom `visible` closure. ### Custom Visibility [](#custom-visibility-1) If you are not using [`lab404/laravel-impersonate`](https://github.com/404labfr/laravel-impersonate), or want to override the default detection, provide your own visibility logic: ``` NorthwesternTheme::make() ->impersonationBanner( visible: fn () => session()->has('impersonating'), ) ``` ### Custom Label [](#custom-label-1) ``` NorthwesternTheme::make() ->impersonationBanner( label: fn () => 'Acting as ' . auth()->user()->name, ) ``` ### Custom Leave URL [](#custom-leave-url) ``` NorthwesternTheme::make() ->impersonationBanner( leaveUrl: '/my-app/stop-impersonating', ) ``` ### Custom Leave Label [](#custom-leave-label) ``` NorthwesternTheme::make() ->impersonationBanner( leaveLabel: 'Return to Admin', ) ``` ### Custom Leave Method [](#custom-leave-method) The leave form defaults to `POST`. If your leave endpoint expects a different HTTP method: ``` NorthwesternTheme::make() ->impersonationBanner( leaveUrl: '/my-app/stop-impersonating', leaveMethod: 'DELETE', ) ``` ### Disabling the Banner [](#disabling-the-banner) ``` NorthwesternTheme::make() ->withoutImpersonationBanner() ``` Note If your application has a custom impersonation banner registered, remove it when enabling the built-in banner to avoid duplicates. A warning is logged in local environments when both are detected. Footer ------ [](#footer) The footer is disabled by default. Your application may have multiple Filament panels, some internal where a footer would just be noise, others end-user-facing where institutional branding matters. You opt in per panel by chaining `->footer()`: ``` NorthwesternTheme::make() ->footer() ``` This renders Northwestern branding, legal links, office contact info, and social media links. ### Office Information [](#office-information) Office contact details displayed in the footer are resolved in the following order: 1. Values passed directly to `->footer()` (see below) 2. `config('northwestern-theme.office.*')` values (from `northwestern-sysdev/northwestern-laravel-ui`, if installed) 3. Hardcoded IT defaults (Information Technology, 1800 Sherman Ave, etc.) If your application already has [`northwestern-sysdev/northwestern-laravel-ui`](https://github.com/NIT-Administrative-Systems/northwestern-laravel-ui) installed, the footer will pick up `office.name`, `office.addr`, `office.city`, `office.phone`, and `office.email` automatically. To override specific fields: ``` NorthwesternTheme::make() ->footer( officeName: 'My Office', officeAddr: '633 Clark St', officeCity: 'Evanston, IL 60208', officePhone: '847-555-1234', officeEmail: 'my-office@northwestern.edu', ) ``` ### Disabling the Footer [](#disabling-the-footer) Pass `enabled: false` or a closure that returns a boolean: ``` NorthwesternTheme::make() ->footer(enabled: false) NorthwesternTheme::make() ->footer(enabled: fn () => auth()->user()?->isStudent()) ``` Customizing Views ----------------- [](#customizing-views) To modify the environment indicator, impersonation banner, or footer markup, publish the views: ``` php artisan vendor:publish --tag=northwestern-filament-theme-views ``` This publishes the following templates to `resources/views/vendor/northwestern-filament-theme/`: - `environment-indicator.blade.php` — the topbar badge and border - `impersonation-banner.blade.php` — the impersonation session banner - `footer.blade.php` — the institutional footer External CDN Dependency ----------------------- [](#external-cdn-dependency) This theme loads fonts, icons, the favicon, and the default brand logo from Northwestern's CDN (`common.northwestern.edu`). Your application needs network access to this CDN at runtime. If your environment restricts outbound requests or enforces a strict CSP, allowlist `https://common.northwestern.edu`. Upgrading --------- [](#upgrading) See [UPGRADING.md](UPGRADING.md) for migration guides between major versions. License ------- [](#license) The MIT License (MIT). Please see [LICENSE](LICENSE) for more information. ### Health Score 53 — FairBetter than 96% of packages Maintenance95 Actively maintained with recent releases Popularity28 Limited adoption so far Community16 Small or concentrated contributor base Maturity60 Established project with proven stability Bus Factor1 Top contributor holds 93.3% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~6 days Recently: every ~21 days Total 15 Last Release 52d ago Major Versions v1.0.2 → v2.0.02026-03-16 v2.5.0 → v3.0.02026-06-09 PHP version history (2 changes)v1.0.0PHP ^8.2 v2.2.0PHP ^8.3 ### Community Maintainers ![](https://www.gravatar.com/avatar/3d4678c8051de43c86bddf6aec2c570d07175ac1011296dd25b8e6e97a0af34b?d=identicon)[northwestern-sysdev](/maintainers/northwestern-sysdev) --- Top Contributors [![dxnter](https://avatars.githubusercontent.com/u/17434202?v=4)](https://github.com/dxnter "dxnter (42 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (2 commits)")[![nie7321](https://avatars.githubusercontent.com/u/27235866?v=4)](https://github.com/nie7321 "nie7321 (1 commits)") --- Tags filamentlaravelnorthwesternlaravelthemefilamentnorthwestern ### Code Quality TestsPest Static AnalysisPHPStan, Rector Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/northwestern-sysdev-northwestern-filament-theme/health.svg) ``` [![Health](https://phpackages.com/badges/northwestern-sysdev-northwestern-filament-theme/health.svg)](https://phpackages.com/packages/northwestern-sysdev-northwestern-filament-theme) ``` ### Alternatives [rawilk/profile-filament-plugin Profile & MFA starter kit for filament. 3915.5k](/packages/rawilk-profile-filament-plugin)[finity-labs/fin-mail A powerful email template manager and composer for Filament with dynamic token replacement, template versioning, and inline email sending. 316.8k2](/packages/finity-labs-fin-mail)[stephenjude/filament-jetstream A Laravel starter kit built with Filament inspired by Jetstream. 17861.9k3](/packages/stephenjude-filament-jetstream)[backstage/mails View logged mails and events in a beautiful Filament UI. 16429.7k](/packages/backstage-mails)[stephenjude/filament-debugger About 104173.6k2](/packages/stephenjude-filament-debugger)[statikbe/laravel-filament-flexible-content-blocks The Laravel Filament Flexible Content Blocks package helps you to easily create content in Filament for any model, with predefined or custom blocks, and foreach block an extendable Blade view component. 17927.9k6](/packages/statikbe-laravel-filament-flexible-content-blocks) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)