How can I make the modifications?
Thanks, It worked
1 Like
I made the changes almost a year ago now. But I did leave myself notes on how I achieved it. So today I am just going over those notes and attempting to reproduce it (because it needs to be reproducible) and then I will figure out soon how I should share it. Whether I just share the steps, or the CSS file and a few other files modified.
1 Like
@castillofrancodamian I put in some time over the last few days to work on my openwrt-2020 dark theme variant. And while it looked great for the most part, I realized that there were many smaller elements to the theme that would have taken much longer.
I also realized that there is a user in the LuCI Github repo who is willing to step up and do the dark variant properly, maintain it, and who is far more skilled than myself. See here: https://github.com/openwrt/luci/pull/5258#issuecomment-919413422
That user has also created a dark variant of bootstrap theme (PR luci-theme-bootstrap: add dark theme variant by teohhanhui · Pull Request #5366 · openwrt/luci (github.com)). I find this information to be very promising and exciting because this user is very skilled and using proper prefers-color-scheme to add dark variant to both of those themes.
1 Like
I really like the bootstrap theme (it's my engineering nature: content before presentation).
It is unburdened by a design that decreases the visibility of the content and diminishes the accessibility by forcing some fancy course of actions to execute simple commands.
I tried all others but, to me, none could come even close to the default bootstrap theme.
There is, however, a big downside to the bootstrap theme. It's extremely white and eye straining. For that reason I used the browser extension to make it dark and I absolutely loved it.
Now, again, it's probably due to my nature, I don't like using an extension just to make one web app dark so I exported the resulting stylesheet and added few more bits by hand to achieve the same.
Now, with this quick and dirty hack, I'm finally 100% happy... 
Official "Darkened" bootstrap theme would be amazing to get. 
1 Like
If anyone wants to check how it looks on their side, the following archive contains the CSS files needed to "darken" the default bootstrap theme.
https://www.milojevic.net/temp/luci-bootstrap-dark.zip
It is based on original bootstrap from 21.02 release (on Raspberry Pi4, if that's relevant).
Files in the directory /www/luci-static/bootstrap should be overwritten (make a backup of the original files, if you wish, first).
Original cascade and mobile css files are renamed to .original.css in this archive (as they are needed and used as well). The files .dark.css are a result of applying dark theme by Dark Reader extension and some additional fine tuning by hand.
cascade.css and mobile.css from this archive are only used to import both styles, original and dark ones.
This is in now way an attempt at something good or permanent. Just a showcase how bootstrap can look great, so it might motivate some people to actually develop an official bootstrap dark theme.
2 Likes
That looks visually pleasing and easy on the eyes. Great work and thank you for sharing it.
1 Like