PHPackages                             jaygeorge/admin-styler - 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. [Admin Panels](/categories/admin)
4. /
5. jaygeorge/admin-styler

ActiveLibrary[Admin Panels](/categories/admin)

jaygeorge/admin-styler
======================

Systematically style the Admin in a few seconds with CSS variables

0418CSS

Since Dec 7Pushed 2y ago1 watchersCompare

[ Source](https://github.com/JayGeorge/admin-styler)[ Packagist](https://packagist.org/packages/jaygeorge/admin-styler)[ RSS](/packages/jaygeorge-admin-styler/feed)WikiDiscussions main Synced today

READMEChangelogDependenciesVersions (1)Used By (0)

Admin Styler
============

[](#admin-styler)

1. Once the addon is installed create your own file in `/public/vendor/admin-styler/css/admin-styler-custom.css`
2. Copy the CSS below to your new `admin-styler-custom.css` file and customise it to your liking

```
:root:root {
    /* Examples...
        ## Grayscale
        --colour-main-hue: 225;
        --colour-main-saturation: 0%;
        --colour-main-lightness: 10%;
        --background-saturation: 0%;
        --colour-grey-saturation: 0%;

        ## Light
        --colour-main-saturation: 0%;
        --colour-main-lightness: 10%;
        --background-saturation: 0%;
        --background-lightness: 98%;
    */
    /* GROUP VARIABLES -- DECORATION -- COLOURS -- THEME
    =================================================== */
    --colour-main-hue: 355;
    --colour-main-saturation: 80%;
    --colour-main-lightness: 50%;

    --colour-black-hue: var(--colour-main-hue);
    /* This is the default Statamic background hue */
    /* --colour-black-hue: 210; */

    --background-saturation: 31%;
    --background-lightness: 95%;

    /* Comment these out to reduce/control the saturation of form field backgrounds */
    /* --colour-grey-light-forms: hsl(var(--colour-black-hue), 0%, 99%); */
    /* --colour-grey-light-forms-1: hsl(var(--colour-black-hue), 0%, 99%); */
}
```

Installing
----------

[](#installing)

`composer require jaygeorge/admin-styler`

Updating via command line
-------------------------

[](#updating-via-command-line)

- Run `composer update`

Further Reading
---------------

[](#further-reading)

### What is this addon?

[](#what-is-this-addon)

Admin Styler is a very simple addon that allows you to style Statamic's admin interface for different clients by changing just a few values. Simple styling is possible thanks to CSS Custom Properties and taking advantage of the HSL colour model.

I've been careful not to touch Statamic's beautiful design; just colour it in a little for clients while keeping the same vibe.

### How does it work?

[](#how-does-it-work)

I've taken as many of Statamic's selectors as I can find and mapped them to CSS Custom Properties. So, for example, you can change `--colour-main-hue` to a red hue, and it will roll out across the site, with different degrees of lightness and saturation.

#### Can I look under the hood?

[](#can-i-look-under-the-hood)

Yep, look in `/vendor/jaygeorge/admin-styler/resources/css/admin-styler-base.css`Please don't change any of this CSS though, it'll just be overriden when I push an update to the addon. Instead override it with `admin-styler-custom.css` as per the instructions at the top of this README.

### Why use hues?

[](#why-use-hues)

Designing with hues (rather than RGB or hex codes) makes colour theory a *lot* easier to understand. It also allows us to easily theme the admin with very few values, without needing to rely on SCSS colour functions and the like.

If you're not sure about HSL I recommend [Sara Soueidan's blog post](https://www.sarasoueidan.com/blog/hex-rgb-to-hsl/), which goes into detail about its advantages.

### Why use :root:root?

[](#why-use-rootroot)

`admin-styler-custom.css` needs to use `:root:root` to override the base. Because of the way Statamic loads stylesheets `admin-styler-custom.css` is loaded *before* `admin-styler-base.css`, we need to increase specificity to override it. Doubling the root was the least messy way to do this. If you're a know-it-all in the addon world and know how to change the stylesheet loading order, please let me know!

Feedback
--------

[](#feedback)

Please feel free to get in touch. You can find me on Statamic's Discord channel or on Twitter @\_JayGeorge

Extra Customisation Examples
----------------------------

[](#extra-customisation-examples)

Here are some extra examples of safely overriding Statamic things.

```
/* GROUP CUSTOM / LOGIN
=================================================== */
/*

    Below is an example of a control panel override with a textured background
    Replace 'some-texture' with your own

*/
/* .outside.rad-theme {
    background: black;
}

.outside::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("/img/some-texture");
    background-size: 100%;
    filter: grayscale(100%);
}

.outside::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: hsl(0 0% 0% / 0.8);
} */

/* GROUP COMPONENTS / WHITE LABEL LOGO
=================================================== */
/* Notes...

   - Statamic uses this class for White Label logos

*/

/* .white-label-logo {
    min-width: 50px;
    max-height: 25px!important;
} */
```

###  Health Score

16

—

LowBetter than 5% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity13

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity20

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% 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.

### Community

Maintainers

![](https://www.gravatar.com/avatar/fa05a7e5f2b5fb60bcfb0afdc494b6a594016f113222666f2b1339124299d629?d=identicon)[jaygeorge](/maintainers/jaygeorge)

---

Top Contributors

[![jaygeorge](https://avatars.githubusercontent.com/u/693601?v=4)](https://github.com/jaygeorge "jaygeorge (63 commits)")

### Embed Badge

![Health badge](/badges/jaygeorge-admin-styler/health.svg)

```
[![Health](https://phpackages.com/badges/jaygeorge-admin-styler/health.svg)](https://phpackages.com/packages/jaygeorge-admin-styler)
```

###  Alternatives

[jeroennoten/laravel-adminlte

Easy AdminLTE integration with Laravel

4.0k4.8M43](/packages/jeroennoten-laravel-adminlte)[dmstr/yii2-adminlte-asset

AdminLTE backend theme asset bundle for Yii 2.0 Framework

1.1k1.8M67](/packages/dmstr-yii2-adminlte-asset)[dwij/laraadmin

LaraAdmin is a Open source Laravel Admin Panel / CMS which can be used as Admin Backend, Data Management Tool or CRM boilerplate for Laravel with features like CRUD Generation, Module Manager, Media, Menus, Backups and much more

1.6k68.7k](/packages/dwij-laraadmin)[filament/spatie-laravel-media-library-plugin

Filament support for `spatie/laravel-medialibrary`.

1764.8M125](/packages/filament-spatie-laravel-media-library-plugin)[bezhansalleh/filament-exceptions

A Simple & Beautiful Pluggable Exception Viewer for FilamentPHP's Admin Panel

193195.9k13](/packages/bezhansalleh-filament-exceptions)[filament/infolists

Easily add beautiful read-only infolists to any Livewire component.

1220.8M36](/packages/filament-infolists)

PHPackages © 2026

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