Luci-theme-material-old -- bring the colorful buttons back

Wasn't a big fan of some inconsistencies between how different buttons look in 18.06.0-rc2 so I've decided to make a theme which brings the old colorful buttons back: luci-theme-material-old README.

5 Likes

A picture showing what I get when I install this theme would be nice.

1 Like

Updated the README with sreenshots.

1 Like

Looks much better! Thank you.

I was under the impression that the latest RCs are still a "work in progress", and the various GUI issues with usage and consistency are still being worked on. Are you suggesting RC2 is basically finalized?

That doesn't sound right. Just a quick glance shows other problems remain. For example, the table template layout seems to have regressed: the header row is no longer shaded (which breaks the alternating shading scheme) and is vertically centered (like a normal row) instead of being top justified.

Example under System->Software:
LEDE 17.01.4:
image

OWRT 18.06.0rc2:
image

Perhaps you could consider making PRs against openwrt-luci for the different themes, since your change seems like a general improvement?

@jow Could you comment on current status/plans? Will there be time to shake out problems after the very recent merge from master luci?

Will look at the header row thing. Some chnages in the layout are to be expected.

1 Like

And when it's finalized I'm sure it will be awesome. If you're OCD about some current inconsistencies with buttons right now like I am, you can install this package.

What would be the point of that?

I would love to see a dark material theme.

Do you know css well enough to create one?

Negative, but I'll start reading up on it.

What is needed is some actual coding help and long term commitment on maintaining such themes. For years I refrained from doing needed changes to LuCI to not break existing themes and when I finally did, 3rd party stuff like "Material" or "Darkmatter" promptly broke.

If you start custom themes you need to be aware that there's a certain amount of responsibility attached to it, especially when they grow in popularity. The question is who is the lucky one to pick up the broken pieces in the end, the one having quickly cobbled together the theme a few years back, or the LuCI maintainer getting reports about it three years down the road.

From experience I noticed that I personally am not able to really maintain more then the two "officially endorsed" Bootstrap and OpenWrt themes in LuCI. Especially when aspects like responsive design come into play, the testing effort for each further theme grows exponentially.

So what am I getting here... first of all think hard if you really need a custom theme, maybe it makes more sense to invest work into an existing one to fix the small warts and make it customizable by introducing things like switchable color palettes. For example it makes very little sense to now copy the already half broken Material theme into a Material Dark one, only to end up with one further theme that needs to be fixed by someone.

Furthermore try to translate your ui and usability critiques into actionable items. Make scribbles, UI concepts, patches or photoshop mock ups and try to explain why the current state of affairs is broken and why you think that your change makes more sense.

Regarding the buttons, removing the color filling on the non primary buttons was a decision I made to implement some of the best UX button practises which you can find on sites like https://uxplanet.org/7-basic-rules-for-button-design-63dcdf5676b4 or even on the Material design spec site itself at https://material.io/design/components/buttons.html#usage (section "Types"). The intent was to de-emphasize non-primary buttons to steer user attention towards the primary page actions like "Edit item" or "Save & Apply".

8 Likes

Thanks for the reply! You are absolutely correct about being careful to avoid inadvertently becoming responsible for something as big as a LuCI Theme.
Especially true in my case as I am definitely not qualified for something with so many variables.
For me a potential dark theme in LuCI is slightly more of a necessity than a luxury.
I get semi-regular migraine headaches so I take advantage of dark / night themes wherever possible. Perfect example is this Forum.

I am also a big fan of dark themes. But I also feel like Material theme for OpenWrt is also at a great stage of development.

Personally, what I do is, utilize a browser extension that can revert the background contrast and such so that it converts the already available Material theme into a Dark Mode anytime you need it on a per site basis. There are many such extensions and some are better than others.

Another possibility would be to have theming color switch ability built right into Material theme for OpenWrt, a default Light theme and an optional Dark theme. That way not as much coding resources are wasted into another theme from the ground up.

I agree. From everything I've read so far this would be the easiest option.
https://medium.com/@mwichary/dark-theme-in-a-day-3518dde2955a

I think it's a great call. Is Save & Apply intentionally different from Save, Reset buttons tho? I honestly think they should have the same styling.

From my limited exposure to themes, I believe it would actually be more work to have a light/dark switch built for a theme rather than have two themes.

If anyone wishing for a black theme knows enough CSS to create it, but lacks knowledge on how to build a theme package, I'll gladly help. PM me.

1 Like

Hi! Sorry for the thread necromancy, but I think it makes sense to report it here, since we're on the LuCI buttons topic. I still see this visual inconsistency on the diagnostics page on OpenWrt 18.06.1 (the text and borders of the ping and traceroute buttons). Is this a known issue? Thanks in advance!

07

Hi! I saw the diagnostics page being fixed in master after my post (thanks a lot for the quick turnaround, @jow) and I had fixed it manually on my routers, but today I updated the LuCI packages and it reverted to the buggy look. Could the fix also be merged for the 18.06 branch? Thanks!

Both of these are completely off-topic I would encourage you to start a new thread with the more descriptive title.