New blog: Admin theme redesign

[cpx3]

As already stated at the original thread: There seems to be a problem with asmSelects (pages) as I can only select the first two entries. Beside that I love the theme!

[nbcommunication]

Hello,

After spending a week with the new admin theme, my feeling is that it is definitely a step in the right direction, making the admin feel more like an application, and many thanks to all who've worked to get it where it is. That said, there's quite a few issues I and the team here have picked up on. Most of these have been highlighted already. Here's some observations interspersed with some issues:

Page Tree
A number of colleagues have commented on the removal of the 'lines' on the page tree. I much prefer the new look, but it may be useful to have the option to toggle this on/off. 

I also like the 'text' style of the action buttons, but feel a more button-like style on hover would help.

Colouring 
Something I'm not keen on is the lack of colour for the messages. Having the primary alert colour being the same as the background makes it hard to notice.

We think the background colour (#eee) in light mode is too dark. #fafafa feels better.

I also miss the colour of AsmSelect items. Having these in grey makes them blend in too much.

Dark mode
I prefer dark mode, but I've found myself switching to light mode on all the installs I've worked on. I can't pin down the problem though. It might be that the muted grey background makes the actual UI (fieldsets) too stark. It doesn't feel right.

I agree with other comments that there needs to be an ability to customise the logo and colour for both modes.

The installer needs to be tested in dark mode. All the input text is white on an input on a white background! (longest, most frustrating PW install ever!)

Colour picker
I think there should be at least two more fields beside the colour picker input, one for HEX value, and another for RGB. Editing one updates the others. On Safari, the native colour picker doesn't give you the option to input a value so I needed to login on Chrome to set the value I actually wanted.

...

My main concern with this is the rollout when this reaches the master branch. We have a setup where we can update all PW sites on a server at once, and as it stands I think we'll need to go into each site to specify light mode. We want the rollout to be successful with our clients, and we'd prefer to adopt the new theme gradually, as and when we're working on a site. I think retaining the original UIkit theme as the default should be considered.

Cheers,

Chris

[elabx]

22 minutes ago, nbcommunication said:

I think retaining the original UIkit theme as the default should be considered.

I'd vote for this too. 

[bernhard]

3 hours ago, nbcommunication said:

I think retaining the original UIkit theme as the default should be considered.

@ryan maybe it would be good to make existing installs use the old style and new installs use the new one by default?

[ryan]

Quote

A number of colleagues have commented on the removal of the 'lines' on the page tree. I much prefer the new look, but it may be useful to have the option to toggle this on/off. 

@bernhardI think that functionally the new look is better in this regard because the lines are limited to the actively hovered page. That makes more sense to me. I'm not sure the Original lines have any actual purpose. So not sure why I put them there other than it was part of the design style/trend 10 years ago. 🙂 Though if someone can find a strong functional reason for the lines where it provides some benefit to the user, then that would be worth having a toggle for. 

Quote

I also like the 'text' style of the action buttons, but feel a more button-like style on hover would help.

You mentioned that it would "help" some users. Is that because it's a more obvious clickable element? That seems more functional to me, and maybe something worth having a toggle for. I'm indifferent myself, as I don't really have a preference one way or the other. But worth passing along to the designers to see what they think. 

Quote

Something I'm not keen on is the lack of colour for the messages. Having the primary alert colour being the same as the background makes it hard to notice.

From the PW standpoint, this is the "message" notification, which is one that's informational and not supposed to call attention to itself. In that respect, I think the color is ideal and much more consistent with the purpose of it. But maybe something to get used to, as the Original design was more "in your face" with it's message notifications, even if it wasn't really supposed to be. The Warning and Error notifications are supposed to call attention though. 

Quote

I prefer dark mode, but I've found myself switching to light mode on all the installs I've worked on. I can't pin down the problem though. It might be that the muted grey background makes the actual UI (fieldsets) too stark. It doesn't feel right.

I have that same "doesn't feel quite right" with most dark modes. But have to admit, the one in the new admin design feels just right to me. Maybe that's because I've been using it more than a month now. But once I tried it, I was hooked. Of course, there's always room for improvement. The new design makes it easy to adjust things with the CSS options, so it's easy to test things out, such as the background color you mentioned. If you have more specific suggestions over what would make it feel right to you, definitely share them. 

Quote

I agree with other comments that there needs to be an ability to customise the logo and colour for both modes.

As of Friday's updates, if you provide an SVG logo that has as fill="currentColor" then it will inline the SVG and the new design will be able to use the new light mode or dark mode main color for the logo automatically from its CSS. 

Quote

The installer needs to be tested in dark mode. All the input text is white on an input on a white background! (longest, most frustrating PW install ever!)

Thanks, I didn't realize that, I think the the installer must have been in light mode when I tested it. I will test it in dark mode and fix the colors. 

Quote

I think there should be at least two more fields beside the colour picker input, one for HEX value, and another for RGB. Editing one updates the others. On Safari, the native colour picker doesn't give you the option to input a value so I needed to login on Chrome to set the value I actually wanted.

I will look into adding this, not as new configuration values, but as extra inputs that get populated with the hex code when the color picker changes, so that you can change it if needed. Probably just a little JS should solve it. 

Quote

I think retaining the original UIkit theme as the default should be considered.

There's no plan to drop the original Uikit theme, but it's no longer going to be the default (at least for new installs). But we do plan to remove the AdminThemeDefault and AdminThemeReno from core and maintain them in as modules separate from the core. 

Quote

maybe it would be good to make existing installs use the old style and new installs use the new one by default?

Maybe. We can see where we're at when we get closer to merging to master. Though if we did that, I wouldn't want existing installs to be unaware of the new addition either. So for existing installs, maybe an option to select it on a user-by-user basis, and a one time notification that tells users about it and how to switch between the two. Currently only the superuser can make this change, but I think it would be good for it to be selectable on an individual user basis. 

[nbcommunication]

6 hours ago, ryan said:

So for existing installs, maybe an option to select it on a user-by-user basis, and a one time notification that tells users about it and how to switch between the two. Currently only the superuser can make this change, but I think it would be good for it to be selectable on an individual user basis. 

This sounds good to me. Cheers.

[cst989]

I'm clearly in a minority but I personally feel like the redesign is not very attractive.... To me, completely flat single colour panels with single relatively high contrast borders does not look clean and I don't enjoy the use of a mid grey as a base colour for light mode at all. The new font looks bold and blocky to me and again too intense in its contrast. I'm sorry to say this because I can tell a lot of work has gone into it, but I personally hope the Uikit theme doesn't go anywhere, if I put them side by side the Uikit one looks like the more modern and finished one to me.

Also to add to the bug reports I'm getting white text on a white input when filling out the db details on a fresh install of the new dev version (dark mode/Chrome/Windows) which made installation quite difficult

[adrian]

Just another note on toggles - this impacts even checkboxes that are added to process modules, but in some cases the css for it is broken so it's unusable.

Also, in this case the checkbox is in a table and it takes up much more space.

On another topic, I find it weird that the font color for the main menu is so black (mentioned above by someone), but also that for the dropdown items, the unselected items are black whereas for the top level items, the unselected are grey and the selected is black. I also think that dropdown menus should reflect the current page by being in the darker color, but again, definitely not #000

 

[zilli]

Hello,

The collaborative efforts of @diogo and @jploch are truly commendable, and the new admin theme brings a fresh look to the ProcessWire interface. That said, it feels like some aspects weren’t fully addressed. The theme includes certain design choices that have sparked debate and a few bugs that slipped through. In my view, this isn’t a reflection of any lack of competence from @ryan, @diogo, or @jploch—far from it. Rather, it highlights how the project was managed, which, to me, mirrors how ProcessWire itself has historically been managed under Ryan’s leadership.

A project like a new admin theme could really benefit from being more community-driven. A simple round of beta testing with some of the most active and experienced members of this forum could have prevented many of these issues before release. Keeping it under wraps usually doesn’t work as well as we hope, especially considering how diverse the use cases for ProcessWire are. And this does reflect on ProcessWire itself. I sometimes wonder whether Ryan truly wants PW to grow bigger, gain more visibility, and capture a larger market share. If he does, some of the actions we see don’t seem fully aligned with that goal. As for why Ryan continues to keep such tight control, I honestly don’t know—whether it’s a matter of personality, or perhaps he hasn’t yet found people he fully trusts on the technical side.

That being said, none of this discussion would even be possible without Ryan’s incredible work on ProcessWire. Regardless of what the future holds, we’ll always be grateful for that. I’m simply sharing my thoughts with the hope of contributing to its improvement. That’s all.

[nbcommunication]

26 minutes ago, zilli said:

A simple round of beta testing with some of the most active and experienced members of this forum could have prevented many of these issues before release.

I'd said as much to colleagues last week. At the same time, it's a development release. I think many of us working with PW may have just gotten used to the overall quality of dev releases and happy to work on projects on that branch as obvious bugs are a rarity.

...

For what it's worth, I'm definitely getting used to working with the new theme now, and many of the things that niggled at me to begin with aren't now.

I did find another tiny thing I wanted to point out:

If the labels are centred on the login screen, the input text should be too?

Cheers,

Chris

[AndZyk]

8 hours ago, nbcommunication said:

If the labels are centred on the login screen, the input text should be too?

In my opinion this would be bad for usability. 😉

Edited May 22 by AndZyk

[ryan]

Quote

That said, it feels like some aspects weren’t fully addressed. The theme includes certain design choices that have sparked debate and a few bugs that slipped through. 

@zilli If you are using the new AdminThemeUikit design, which bugs or aspects not fully addressed are you personally running into? Much of what I’ve seen so far have been ideas and suggestions, many of which have been addressed and will continue to be (though I will leave to the designers to decide which). When it comes to bugs, of course there will be bugs with anything as new and significant as this. But the bugs I’ve seen are relatively small and simple things, or with modules outside the core, all of which is very much expected at this stage.  The amount of issues is extremely small relative to the scale here, so I've been impressed at how few issues there actually are so far. 

Quote

A project like a new admin theme could really benefit from being more community-driven. 

I disagree. I think Google says it well, so I’ll quote:

"Design by committee" [or community] refers to a project where a large group of people, often with varying expertise and perspectives, are involved in the design process, leading to a lack of a clear, unified vision and potentially a diluted or mediocre final product. It's a negative term often used to describe a situation where too many opinions are being considered, hindering progress and resulting in a compromise that doesn't satisfy anyone. 

Quality comes from finding a professional you trust and letting them apply their expertise towards a solution. Diogo and Jan have been using PW longer than most here, they are at the top of their game and I have a huge amount of trust in their work.

Quote

A simple round of beta testing with some of the most active and experienced members of this forum could have prevented many of these issues before release. 

BETA TESTING is exactly what we are doing right now. That’s what the dev branch is for. If there are issues personally affecting you, I’d encourage you to open an issue report (none have been reported yet on GitHub). 

Quote

Keeping it under wraps usually doesn’t work as well as we hope, especially considering how diverse the use cases for ProcessWire are. 

Earlier you implied it was released too early, but "keeping under wraps" implies releasing too late. So I'm confused. But to be clear, nothing is under wraps, it is all available for testing and feedback on the dev branch. That is the stage we we are in.

Quote

As for why Ryan continues to keep such tight control, I honestly don’t know

I don’t understand this statement, especially in the context of this conversation. Tight control is not a term I’ve had attributed to me before, in any area. If I think about where I would value control being tight, it would be with matters of security or avoiding scope creep. 

Quote

I sometimes wonder whether Ryan truly wants PW to grow bigger, gain more visibility, and capture a larger market share. 

Wonder no more. This is why we are here typing to each other and why the new admin design exists. It's the reason why we’ve come up with a fresh look for the admin, and shortly will be launching the new website as well. These are some of the most important changes for growth in the history of PW.

The old admin and website are about a decade old, and were designed by me – I haven’t been a professional designer in about 20 years, and I think that was increasingly becoming apparent in PW’s appearance both in the admin and on the website. Long time users may be used to it, and some may prefer to keep using the Original design for AdminThemeUikit, which is fine… it will always be there. But we’re focused in getting new users. @jploch and @diogo do this for a living, are at the top of their craft, know what they are doing, and I’m extremely happy with and thankful for their work. My opinion is that what they’ve come up with is exactly what was needed. I don't expect everyone to agree, as we are a diverse crowed here and that's a good thing. 

Quote

If the labels are centred on the login screen, the input text should be too?

@nbcommunication As I understand it, it is frowned upon to create a “Christmas tree” with design elements like this, especially where user input is involved. 

Quote

I'm clearly in a minority but I personally feel like the redesign is not very attractive...

@cst989 Design is always subjective and it’s perfectly fine to have opinions and preferences. I think the new design speaks very much to what ProcessWire is conceptually and presents it is a way that is more modern, clear and customizable. Even if it is old, I do still like the Original design too (and it’ll always be there) but I think it had more to do with what I found attractive at the time, over what was right for the application. Whatever one feels about what's pretty or attractive is not the point. This is for an application that people use all day, not a cake to decorate. I think the new design reflects PW’s concept and framework better. And it has real systems design thinking behind it rather than just being pretty (though I think it's pretty too). Diogo and Jan know very well how to appeal to our target audience, as well as how to expand and diversify our audience. They are pros and this is what they know how to do far better than me. Having used the new admin for quite some time now, I feel I'm benefitting from it a lot. It's far more then just a pretty face and really grows on you the more you use it. 

 

[nbcommunication]

14 hours ago, AndZyk said:

In my opinion this would be bad for usability. 😉

6 hours ago, ryan said:

As I understand it, it is frowned upon to create a “Christmas tree” with design elements like this, especially where user input is involved.

I agree, but shouldn't the labels be left-aligned in that case? Might just be me but I find the mix between alignments jarring.

[AndZyk]

15 hours ago, nbcommunication said:

I agree, but shouldn't the labels be left-aligned in that case? Might just be me but I find the mix between alignments jarring.

It never bothered me, but now that you mention it, I also would rather prefer a more classic login form. 😄

Source

[ryan]

Quote

I agree, but shouldn't the labels be left-aligned in that case? Might just be me but I find the mix between alignments jarring.

@nbcommunication Maybe so. To be fair to the designers, they requested a different solution, but I wasn't sure how to implement in a way that would be as accessible. I will test left aligned labels. 

[matjazp]

As someone already mentioned, there are accessibility issues. I miss focus indicators on inputs. The blue main color lacks contrast, so I'm using #2374e2 instead of #2380e6. Also, muted color seem to have a low contrast in the page list. 

[ryangorley]

I'm personally very excited about this update. There are some great changes here. Thanks team!

One default I would propose for easier reading on bright displays is to walk back the text contrast at least 10% from black (#1a1a1a or rgba(0, 0, 0, 0.9)) and white (#e6e6e6 or rgba(255, 255, 255, 0.9)) on --text-color. Even 20% is well within the WCAG AAA contrast guidelines. Test it and see what you think. Your eyes will thank me when you're scanning a long dropdown list.

Sure, it's 10-20% less bold sauce, but the Reverse-Mullet Rule should apply to such public vs private interface priorities: Party in the Front, Business in the Back. 😉

[ryangorley]

By the way, is anyone getting a flicker on elements? I am with both Brave and Firefox. See here when I interact with a repeater matrix the Title area flicker: 

 

Edited May 26 by ryangorley
Clarified question.

[elabx]

@ryangorley I haven't tested on the new theme but this has happened to me before with fields configured for example to hav a with of 70%, but instead ProcessWire's js compensates if it doesn't have a 30% element next to it (not the exact logic, but I hope I make my point through)

[MSP01]

After using it for a week, I must say I'm not happy about the end result of this update.

Processwires backend has never been especially sleek or modern looking. But it is usable and clear for the most part. Ryan said he's not been a designer in a long time, and while that maybe true his version of the UIKIT admin is far better than what this update provides.

This new look basically just makes everything look more gray and drab and at least to my eyes, even more old fashioned. I'm not seeing any new functionality anywhere either, which to me would have been a far bigger upgrade than having a new skin, that seemingly isn't even optional but will be forced on everyone!

I think overall it's a step down and at best it's a sidegrade. I really hope the current admin version stays on as a version you can choose to use!

[monollonom]

12 hours ago, ryangorley said:

By the way, is anyone getting a flicker on elements? I am with both Brave and Firefox. See here when I interact with a repeater matrix the Title area flicker:

Yes, this is an animation that’s triggered when an Inputfield is updated by the js. I hope I remember correctly but I think I added this to my CSS to counter this behavior:

.Inputfield[style*="opacity"] {
	opacity: unset !important;
}

[Nicolas]

I've installed the new admin theme right after it has been release and was really please to see all the changes that have been made. ProcessWire is my CMS of choice since fourteen years and i must say that seing changes in the admin is quite refreshing and I want to thank @ryan @diogo and @jploch for their work.

Many concerns and feedback have been raised since the release and I'm confident that they will be addressed/fixed for the final release.

@MSP01 As stated by Ryan the original UIKit will still be available (though not as default). Regarding the color palette setting one that is pleasing to your eyes is as easy as tweaking some CSS variables in the admin.css file.

 

 

 

 

[AndZyk]

I have tried to customize the new admin theme and here are some of my impressions:

Pros

• Easy to customize colors with CSS variables
• Light and dark mode styling
• No extra module for customization

Cons

• Only a set of colors can be customized easy
• You cannot customize for example the global font family, font size and everything else easy as with the Less module. For that you need !important statements
• The inputs of repeaters have the same background color as every other input

Currently I am mixed. Although I like the improvements and appreciate the new direction, there is a trade off in the customization of everything else other than colors.

I like to style the font family, font size and other aspects as well. But probably I am the only one doing that. 🙈 

But as always thank you for everyone involved in improving the admin theme to make it more modern. 👏

Regards, Andreas

[cst989]

On 5/22/2025 at 4:04 PM, ryan said:

@cst989  Whatever one feels about what's pretty or attractive is not the point. This is for an application that people use all day, not a cake to decorate.
 

Well, I was trying to be polite, but since you decided to call me out like this... by attractive I meant a nice UX, easy to use, clear to see how and where things are interactable, clean, well spaced out, nice inputs that look interactive and are reactive etc etc etc. I have been in this industry for 20+ years, so you don't have to tell me what's important in a UI. A system people have to use every day has to be enjoyable to use, but it should inspire a feeling of using a professional, high end product.

Again to reiterate I was not trying to be dismissive of the hard work here and I will continue to use the product and pay for the excellent pro features etc, maybe a few of us devs will get together and just maintain the UIKit theme if it will not be used for new features in the future by default. But I didn't really appreciate the suggestion that I missed the point, while admittedly that was on me and my own poor choice of words.

[ryan]

Quote

 I miss focus indicators on inputs. 

We will look into adding these. 

Quote

The blue main color lacks contrast, so I'm using #2374e2 instead of #2380e6. 

Okay, can look into this too. 

Quote

Also, muted color seem to have a low contrast in the page list. 

This is supposed to be low contrast because it is non-essential information. It's the sort of text that we don't want to have your focus unless you are specifically looking for it. 

Quote

One default I would propose for easier reading on bright displays is to walk back the text contrast at least 10% from black (#1a1a1a or rgba(0, 0, 0, 0.9)) and white (#e6e6e6 or rgba(255, 255, 255, 0.9)) on --text-color. Even 20% is well within the WCAG AAA contrast guidelines. Test it and see what you think.

Admittedly I like the contrast, but I also like anything easy on the eyes, so will definitely give it a try. 

Quote

By the way, is anyone getting a flicker on elements? 

I'm not seeing it currently, but have definitely seen it before, and before the new admin design. I think it is related to the Inputfields JS for 'showIf' dependencies rather than the CSS of the admin. 

Quote

I'm not seeing any new functionality anywhere either

Look closer, there are definitely functionality upgrades here. Just to name a few, the masthead is now sticky and always available, the navigation dropdowns are quite a bit better as they scroll within rather the whole page, the top search now acts more like a command palette (with its own hotkey), and much of the admin appearance can now be easily styled with CSS variables.a

Quote

...but will be forced on everyone!

I think forcing is a strong word for giving people the option to decide whether they want to use the Original look or the new Default look. 

Quote

I think overall it's a step down and at best it's a sidegrade. I really hope the current admin version stays on as a version you can choose to use!

In your case it sounds like you'd want to continue using the Original style for AdminThemeUikit. As mentioned a couple of times already, it will always be there, it's not leaving. 

Quote

As stated by Ryan the original UIKit will still be available (though not as default). 

That's correct. It'll be the default on new installations. The Original option will be there for new installations too, even if it's not initially selected. Users on existing installations will have the option of switching to the new default look if they want to, but it won't be the default on existing installations except on the dev branch while our beta testing proceeds. 

Quote

The inputs of repeaters have the same background color as every other input

Do you mean the headers of repeater items, or literally the inputs? I like using the main-color as the background color for AsmSelect items, PageAutocomplete items, and repeater headers, so that's part of my custom CSS. 

Quote

Well, I was trying to be polite, but since you decided to call me out like this... by attractive I meant a nice UX, easy to use, clear to see how and where things are interactable, clean, well spaced out, nice inputs that look interactive and are reactive etc etc etc. I have been in this industry for 20+ years, so you don't have to tell me what's important in a UI. A system people have to use every day has to be enjoyable to use, but it should inspire a feeling of using a professional, high end product, and to me this isn't it. 

@cst989 Sorry, I'm not trying to call you out. Having a cake to decorate was meant to make you laugh. We have a diverse community with lots of different opinions on design, and all are valid, I didn't mean to suggest otherwise. I've been trying to be clear that I'm no authority on design, and so that's why I'm trusting full time trained designers that know PW really well. They have a lot of success stories in their portfolio, and I'm confident PW will be one of them. But design is always tough because it's so subjective. For your preferences, it sounds like the new design isn't a good fit, and that's fine. But if you like the Original design, then know that it'll always be there too. ProcessWire is slow to get new users in large part because our admin and website often look dated to people that aren't already familiar with ProcessWire. I'm pretty sure that group of people will be more likely to explore ProcessWire with the new design. I think once you see the new website, the overall branding picture will be a lot more clear as well. I don't expect anything designed to appeal to everyone, but I'm confident this will help PW to grow.