New blog: Admin theme redesign

[markus-th]

On 6/7/2025 at 10:54 AM, markus-th said:

I use the RepeaterMatrix in most of my installations to build page content.

To make elements visually easier to grasp, I use the option to adjust the colors in the item headers.

Unfortunately, this no longer works with the new theme.

Original:

New Default:

New default with @ryan's admin-tweak.css

 

Unfortunately, it still doesn't work.

@diogo Not such an easy fix after all?

[diogo]

@markus-th I had this on my list, but somehow didn't get to doing it. Yes, it should be an easy fix.

[AndZyk]

Is it possible to change the color of links in the new admin theme?
I have set a new main color in the module settings and in the admin.css with --pw-main-color, like recommended.

But the links of modules or the login screen have still this styling:

a, .uk-link {
    color: #e83561;
    text-decoration: none;
    cursor: pointer;
}

There seems to be no CSS variable. Is this intentional?

Regards, Andreas

[adrian]

@AndZyk @ryan @diogo - also reported here: https://github.com/processwire/processwire-issues/issues/2110

[nbcommunication]

@ryan,

You'd mentioned at some point that existing installs could retain the old theme and perhaps users prompted to update to the new one. At the moment if I upgrade an existing site to the dev branch, the new theme is enabled by default. This breaks any custom TinyMCE styling as the new theme overrides it.

Are you planning to implement this prior to the next master version?

Ideally for us, given we have several hundred sites which we update to the latest master when it is available, nothing would change for the users. We could then turn on recommending a theme upgrade on a per site basis, or if we choose to, force the upgrade on the users.

Cheers,

Chris

[Peter Knight]

I’m late to the Konkat theme but having used it recently, I really like it. It seems without any major UI adjustments that it’s just a nicer experience and if I’m not imagining things, a little faster? 

Nice job @diogo and everyone.

If you’re open to feedback, can I add the following.

First, the main grey background is a touch too dark for my personal preference, and interestingly a client mentioned the same, describing it as too industrial. They’re marketing. They like their UI to be friendly and approachable.

The issue is a practical one: a heavy base grey compresses the tonal range before we placed a single element on the page. To make cards or panels register visually at all, you have to resort to strong contrast because a nice, subtle layering just disappears.

Alternatively, with a near-white base you have room to step up gradually, building visual hierarchy through gentle increments. A heavy base leaves nowhere to go without things feeling either too dark or muddy. This isn’t a design lecture… just trying to pinpoint the particular issue.

And I agree it only really affects module builders but interestingly, a client recently remarked that they found it a little industrial and unwelcoming compared to the previous theme.

Next up, buttons…

I find that buttons with 100% border radius never appear as truly aligned as flat side buttons with a subtle border radius. We switched to rounded buttons years ago on an enterprise project, everyone loved the change ( yay, jelly beans!) and now we’re going back to traditional 4px border radius throughout because everything just looks better aligned.

It seems the beauty of using the css vars is I can easily tweak these things myself but wondered if at least the grey background was under consideration?

Otherwise and honestly, it’s a great theme and I’m looking forward to using it more. 

 

[Peter Knight]

Following up on my earlier comment about the background colour - here's a quick side-by-side to illustrate (bottom of post).

The proposed change is simple: lighten --pw-main-background from #eee to #f5f5f5 (a shift of less than 3%)

Three reasons it's worth considering:

• #f5f5f5 is already the background colour used on processwire.com, so it brings the admin in line with the brand.
• It feels noticeably lighter and less industrial in practice. A few of my clients have used that exact wording.
• For module builders, it opens up more tonal room to work with subtle layering and contrast.

I know it's not quite a single variable change. Borders and dividers calibrated against #eee might need a look too, but it's pretty close.

You'll see below that it's just a whisper lighter. But in practice users get brand consistency, general lightness and approachability.

In practical terms, this is involves transitioning from 93% to 96% white.

Copying in @diogo in case this is useful feedback as the theme evolves and celebrates its birthday around now. And finally, in case it needs to be said, the KonKat theme is clean, considered and feels like a proper step forward for the ProcessWire admin. It's a really thoughtful piece of work by people who sweat the details, so I hope this feedback can be taken in that spirit.

 

[adrian]

I agree with @Peter Knight - I set --pw-main-background: #fbfbfb; on all my sites, but I am sure#f5f5f5 would also be a better default.