Using CSS custom properties for the WordPress admin color scheme system is listed for the WordPress 5.7 milestone. It feels low-key enough that most would pass it over as a simple upgrade to keep up with the times. However, this feature can create ripples that spread and benefit the ecosystem in the years to come.
Kirsty Burgoine, a front-end developer at Human Made, announced the introduction of CSS custom properties for the WordPress admin. The initial work landed in a ticket for iterating on the admin color schemes. The first stage reduced the color palette from 199 colors down to 99, creating a more reasonable list to work from.
The second stage will look at how to implement a CSS custom properties system that makes sense. That means doing the dreaded work of naming things. The Core CSS team is currently looking for feedback on how to best handle property names going forward and are open to alternative implementation suggestions.
Once custom properties are in place, the new system could open a world of possibilities in the long term.
Thinking Ahead
My hopes of having WordPress admin themes have lived and died on each piece of news around custom color schemes, imaginative mockups, and the general hype of projects that never lived up to their promise. I may well be getting my hopes up again.
Developers have been able to register custom admin color schemes since WordPress 2.5, but it was never an ideal system.
One of my favorite plugins is Admin Color Schemes, which is maintained by designers from the core WordPress team. It adds several schemes for users to choose from.
Sass, which is used to generate the admin color schemes in core today, has simplified the process. However, third-party developers still need to make sure their custom schemes remain updated between WordPress versions. The system is not built to protect against future compatibility issues.
CSS custom properties change the game. With their widespread use and compatibility with modern browsers, custom admin theming — at least color scheming — is much more of a reality.
I have not been this excited about the possibility of something new since Tung Do released his short-lived DP Dashboard plugin in 2013. Now, a few days shy of eight years since its initial beta testing phase, I once again have some hope.
Given the little wisdom I have accumulated over the years, I now see that completely custom admin themes never led to the right path. I am happy we never went down it. Administration UIs need to work consistently for users and adapt to changes over time. Custom themes were a maintenance nightmare every time WordPress added a feature. However, a system built on CSS custom properties means that customizations do not break — or break far less often — as the software’s UI evolves.
While the focus right now is on color schemes, nothing is stopping WordPress from moving onto other features in the future. It is possible to set up a global styles system for designers to skin the admin in all kinds of interesting ways without breaking anything. Minor options like the border-radius of buttons, font-family choices, or heading font-sizes would be easy to roll in over time.
As the block system continues to replace parts of the WordPress admin, custom admin skins will be far easier to maintain. Because everything in the block system is built as a component, it better future-proofs against back-compatibility issues.
There is a long and winding path toward a feature-complete admin skinning system. However, it is not outside the realm of possibility.
I look forward to the day when theme authors can easily roll out admin designs that match the front end. Perhaps integration with the block system’s theme.json is a possibility. I would not mind seeing a separate admin theme directory in the future either. The use case may be too niche at this point, but it never hurts to keep the idea in the back of everyone’s mind.
If nothing else, the move to custom properties lets the team clean up the admin CSS and makes it easier to add custom color schemes. That is a win for the WordPress project.
One of the things that should have been addressed years ago in the dashboard is the left vertical menu. It is badly in need of a splash of UX sophistication in terms of grouping and spacing.
As it is it is a bland bunched list of items landing in random places with no logical organisation. Not great for usability. After more than ten years using WordPress I still feel like I am looking into a field of thistles when using it.