Yes, I stopped working on it.
[quote="metai, post:53, topic:412, full:true"]
Yes, I stopped working on it.
[/quote]Awwww........
Don't be sad. Judging from this thread, every possible approach is already in the works. You should soon have about half a dozen new web interfaces to choose from.
(Sarcasm detected)
So this got sent to the ML. https://apollo.open-resource.org/mission:log:2017:01:08:darkmatter-a-new-theme-for-lede-openwrt
Ignoring my general boner for dark themes it seems to tick all the right boxes for people. Mobile UI looks good and it's dense.
1 Like
I agree with @weedy about the dark themes.
In this case it think it's little more than a few CSS edits away from my ideas.
I also like this. But since it's build upon luci-theme-material, it's just an upgraded version of that. And has the same problems Material has (a full jQuery in it of 1.11.3, same version as material). I would have liked to see it updated to the newer "slim" version (jquery-3.1.1.slim.min, 68KB).
Also the CSS file in darkmatter is 125KB (compared to material's CSS file of 28KB). Which effectively doubles material's project size (if physical size is an issue).
I'm sure they added a lot fixes and such to the CSS. I'm not too sure if why the CSS increased 5x compared to material. That said, they look very similar to me with just a new colour scheme.
I still think sliming down luci-theme-material with the new jQuery slim.min, changing a few colours in the CSS, and focus on reducing resources on that may be the way to go. That said, I like both Apollo and Material. They look similar (minus colour scheme) to me.
Darkmatter seems to have been compiled with non-standard toolchain (uClibc instead of musl), so installing the IPK package gives dependency failure in LEDE.
But opkg install works with an override "--force-depends" as the package does not actually contain any compiled binaries":
opkg install --force-depends luci-theme-darkmatter_0.1.77-1_all.ipk
That's because a bunch of images are "embedded" into the CSS (via data URIs which calls for base64 encoding, and enlarging file sizes by 33% is a curious decision when space is sparse). Also it includes a whopping 142 kB of font files (where the 14 kB WOFF version would have sufficed). It looks like someone had some idea about somewhat modern web development, but didn't have space constraints in mind at all.
I know, I know, I shouldn't harp on what I failed to do (yet). But IMHO this is what the Web UI doesn't need: A theme piled on a theme piled on a framework piled on old code, just to give it a different color scheme. But, eh, to each their own.
All these feedbacks lead, in my opinion, to a single direction.
Slim web UI with high readability colors and compact layout.
And if we keep useless clicks away, that would be another
great achievement, IMHO.
And, by the way, I'd like to change this forum theme.
This is really too pale to be read and clicked upon...
... until you hover onto them. Those three dots hide some extra message option icons...
Just two! Why hide, then?
Why use grayish ink and not "plain old black"™ (and red and green)?
You should adress this to https://forum.openwrt.org/c/site-feedback, or maybe @jow, since he has taken care of many css issues of the forum in the past.
Good discussion is ongoing in this thread!
What about documenting some of your knowledge?
We have https://lede-project.org/docs/user-guide/luci.themes, which currently contains only the datatable for the packages, but nothing else.
You can create description pages for packages by clicking on the package name.
When you create the new page, the editor will be prefilled with a basic structure. The template for this is still in the early stages. Comments and additions to the template are welcome!
Sure, just PM me the CSS rules and I take a look.
I made it pale because other people complained about too many buttons and they quoted the openwrt forum as being better, which did the same pale hover thing in per-post controls iirc.
This is how Discourse is programmed. If you're admin or a user with higher privileges, there's more buttons hidden.
Again, standard theme decisions. I guess those links are gray to to divert attention to the main black category links.
In my opinion theme "Blue Ice" for the Gargoyle is much more transparent and better color scheme is chosen. It might be worthwhile to do BlueIceMatter? 
Blue Ice: http://tplink-forum.pl/uploader/upload_1/dodatki_gargoyle.jpg
Hello, what was your attempt to write LuCI2 in React? Do you have a repository to look at the code? I am interested in looking for a similar solution, trying to minimize the final weight.
Hi Jow!
I could be wrong, but I don’t see much to improve as far as responsiveness in openwrt theme.
It’s made up by “just” a CSS file, a 152 bytes PNG (under /www/luci-static/openwrt.org) and a couple of HTML files (under /usr/lib/lua/luci/view/themes/openwrt.org).
In my opinion LuCI is rather slim and fast as it’s now.
The improvements can be made in the theme effectiveness, more than to its speed.
The responsiveness is an illusion, especially with smaller boxes w/ small RAM and CPU capacity. Even if your web UI page responds faster (thanks to local js), the target box will need time to make it effective. The heavier the load (specific processes and/or web frameworks and runtimes), the longer the actual time.
I just registered to clear something up for you, Ubqar. Your confusion is understandable, but "responsive design" actually has nothing to do with the term "UI responsivesness." It's got nothing to do with about speed or load times. A responsive design is a web design that changes depending on the form factor: desktop, tablet, or phone. Rather than having a desktop version of your site and a separate mobile site, you have one design that changes to suit both. Further, my understanding is that it does this using a single CSS file, rather than multiple, and if you're on a desktop browser and start shrinking down the browser window, it eventually collapses down into the mobile layout. IMO, "adaptive design" would have been a better choice of words, but that's not the term web designers went with.
I know this is an old thread, but the changes I noticed to the Bootstrap theme in 18.06-rc2 yesterday got me thinking about LuCI themes in general, so I Googled, found this thread, read all the way through it, and wanted to clear up that one point since no one else did. If I were to start a new thread or send a PM, it wouldn't help the people coming here from Google like I did.
No thread should be considered too old as long as its content can be considered meaningful and current.
As far as the default theme system requirements I wouldn't mind about responsive design or any other fancy design philosophy. In the end this is not a website hosted on large iron where you can exploit all those JS libraries. It's the web UI of a device.
The default theme for OpenWRT should be as lean as possible as far as the device resources are concerned. Newer devices have more resources, especially storage but also computing, older and/or smaller have fewer. If you are lucky you can install any additional theme you like on your big iron.
But for smaller devices, or whenever the resources need to be used more wisely, a compact theme sounds to me as a good idea. Smaller CSS files, smaller (if any) images and so on should be the one philosophy for this project.
As far as the default theme behavior, I would mind more about effectiveness than anything else. I mean: fewer clicks, better readability, compactness and so on.
Then, if you are using a "mobile device" to interact with the web UI, all these concepts can make the difference. My smartphone is 1920x1080, my tablet has even more pixels (almost 2x). Nonetheless, the current default theme requires scrolling on almost all pages and the greysh text is way worse than the black one.
Not all color combination choices are "just taste".
Unfortunately, these are contradictory requirements.
You're welcome to create your own theme and solicit feedback if you feel that the current ones do not offer the color variants you prefer.
Really?
Would you please elaborate your statement?
I am In the process to create my own theme and would like to understand better.
I'm not aware of any responsive framework which would be considered:
That is, if you care about how does the WebUI look on mobile devices.
AFAIK, the current deal (very lean, but not very responsive/easy for the eye theme as default) is the great solution -- if you want to and if your device is capable, you can then install theme-material which has a lot going for it.
If you're considering creating a new theme, do read this post by jow.