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

v2.5.0(2mo ago)34.5k↓60.3%[3 PRs](https://github.com/NIT-Administrative-Systems/northwestern-filament-theme/pulls)1MITPHPPHP ^8.3CI passing

Since Mar 16Pushed 2w 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 3w ago

READMEChangelog (10)Dependencies (18)Versions (20)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

50

—

FairBetter than 95% of packages

Maintenance92

Actively maintained with recent releases

Popularity27

Limited adoption so far

Community13

Small or concentrated contributor base

Maturity58

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 97.6% 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 ~2 days

Total

12

Last Release

77d ago

Major Versions

v1.0.2 → v2.0.02026-03-16

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 (40 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.

3913.7k](/packages/rawilk-profile-filament-plugin)[stephenjude/filament-jetstream

A Laravel starter kit built with Filament inspired by Jetstream.

17758.9k2](/packages/stephenjude-filament-jetstream)[croustibat/filament-jobs-monitor

Background Jobs monitoring like Horizon for all drivers for FilamentPHP

271298.4k8](/packages/croustibat-filament-jobs-monitor)[stephenjude/filament-debugger

About

104150.5k2](/packages/stephenjude-filament-debugger)[dotswan/filament-map-picker

Easily pick and retrieve geo-coordinates using a map-based interface in your Filament applications.

128173.7k3](/packages/dotswan-filament-map-picker)[mradder/filament-logger

Audit logging, activity tracking, exports, alerts, and dashboards for Filament admin panels.

2310.5k](/packages/mradder-filament-logger)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)