How to set a custom logo for dark mode in Statamic

Statamic 5.3 has been released and introduced the new dark mode for the Control Panel (CP). It even led to a PSA regarding nighttime sunglasses.

When using Statamic Pro, you’re able to customise the CP to include your own custom logo (white label) instead of the Statamic badge. If you didn’t know, there’s a whole docs section about white labeling.

You can easily do this by setting a custom logo URL in your env file:

At Mity Digital, we use this URL to customise the CP with our own logo, which uses black and grey text. However, in dark mode, the black “mity” gets a little lost.

So sleeves rolled up, I put together a small pull request to provide a second env variable for a dark mode logo, which was quickly approved and merged, and popped up with Statamic 5.4 overnight:

And setting it up is easy - there’s a new STATAMIC_CUSTOM_DARK_LOGO_URL property for your env file where you can set a dark mode version of your logo:

This is a new property, and is optional. If your standard custom logo works on both light and dark modes, you just need to set your STATAMIC_CUSTOM_LOGO_URL, and that will be used for both light and dark. If you optionally provide a STATAMIC_CUSTOM_DARK_LOGO_URL, then this will get used when the CP is in dark mode. Too easy, right?

Just a reminder that white labelling the CP is a Pro feature of Statamic - find out more about what you can do in the docs.