Admin color themes and customization?

I’m working on customizing the wagtail admin for a deployment and am finding it a bit challenging to catch all the locations where color schemes (background, font, hover, etc.) need to be overridden.

The basic color variables are easy to redefine in the _variables.scss partial, but it’s quite challenging to either rebuild core.css from scratch and/or to generate a custom-core.css file that doesn’t contain a lot of duplicate styles. This is primarily due to the structure of the imports. I’d say that finding a way to avoid

#wagtail {
    @import '../../../../../client/scss/style';
}

in core.scss would probably be the easiest first step in terms of being able to build a theming stylesheet.

Are there any roadmap items for addressing the need of users to do this type of customization and if so, are there any ways to help move this forward?

[thibaudcolas]

Thank you to @JNaftali for making this happen via #6409 🙏 We can now customize 5 of Wagtail’s colors via very straightforward CSS custom properties definitions. See the full documentation.

This will be released in Wagtail 2.12.

I will close this now – if anyone wants to see more things being customizable in the admin I think this will warrant a new issue. As much as possible, make sure to suggest specific customizations, provide the clear use case you have for them, with screenshots if applicable.

[thibaudcolas]

For people interested in this, we now have an issue to track / discuss removing support for IE11: #6170.

This alone won’t make Wagtail any more theme-able, but again it’ll allow us to start using CSS variables in Wagtail’s stylesheets without much effort, which will make theming much easier for colours (and fonts, and other design tokens, if relevant).

I can see this happening like this:

• Refactoring some (or all) of our existing Sass variables colors to CSS variables (custom properties). Most / all of our code has already been refactored to use the Sass variables as part of the colour contrast improvements, so moving this over to CSS variables shouldn’t be too much work.
• Documenting on https://docs.wagtail.io/en/stable/advanced_topics/customisation/admin_templates.html which color variables are available
• Additionally having a few words about adding a custom stylesheet that implements those overrides.

If anyone wants to see this happen sooner, I’d also welcome a proposal (/ WIP PR) to explore what this looks like with https://github.com/postcss/postcss-custom-properties for IE11 support.

---

An added benefit of this approach is that it should also make it very easy for us to add “dark mode” support to Wagtail… no one has asked for it yet, but personally I think it’d be quite cool 😬 .