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.