luci-app-statistics: graphs using BootstrapDark nearly impossible to view

rhuang2014 commented 2 years ago

Recent update to luci, the statistics graphs are near impossible to see when using BootstrapDark them.

New Look: ping-dark

Previous Look: ping-dark-old

Steps to reproduce:

go to: System → System → Language and Style → Design → BootstrapDark
Save & Apply
go to: Statistics -> Graphs -> Processor ( or any other graph, i.e Ping )

Expected behavior:

Maybe have a slightly lighter background color for the graphs when Dark mode is selected?

Additional Information:

OpenWrt 21.02-SNAPSHOT r16497-d1c15c41d9 LuCI openwrt-21.02 branch (git-22.046.85957-59c3392)

jow- commented 2 years ago

Uhm... I can see them both equally well?

As a potential workaround you can right click on the graph and open it in a new tab, that'll display the original white file since the colors are simply rotated using CSS.

rhuang2014 commented 2 years ago

Hi @jow- , Do you know which commit or file(s) I can revert to get the old behavior (image with white background) back? I try looking over the commit history, but I was not able to identify the commit I can revert to get the old view back. I appreciate your response, I guess each person has their own opinion on what's acceptable and what's not to them.

jow- commented 2 years ago

Drop this CSS rule: https://github.com/openwrt/luci/blob/cc582ebfb3cb2782db841ad2a4e908d1df4046f9/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css#L2539-L2541

Should be simple to do even on minified files as it'll be the very last one.

An alternative solution is implementing this: https://forum.openwrt.org/t/how-to-small-custom-css-adjustments/109856/4

After doing so, create an /www/luci-static/resources/custom_style.css and put the following contents:

[data-darkmode="true"] [data-page="admin-statistics-graphs"] [data-plugin] img {
    filter: none !important;
}

This way you do not need to modify any original files.

rhuang2014 commented 2 years ago

The alternative solution didn't seem to work for me. It seems the custom_style.css has no effect. Here are the changes based on my understanding.

# cat /www/luci-static/resources/custom_style.css
[data-darkmode="true"] [data-page="admin-statistics-graphs"] [data-plugin] img {
    filter: none !important;
}
# cat /www/luci-static/resources/preload/custom_css_loader.js
'use strict';
'require baseclass';

return baseclass.extend({
    __init__: function() {
        document.querySelector('head').appendChild(E('link', {
            rel: 'stylesheet',
            href: L.resource('custom_style.css')
        }));
    }
});

Instead of dropping the CSS rule in the cascade.css file, I set the value for invert and hue-rotate to 0 like below seems to restore to previous look for me.

 [data-darkmode="true"] [data-page="admin-statistics-graphs"] [data-plugin] img { 
    filter: invert(0%) hue-rotate(0deg); 
 }

How difficult or is it possible to add an extra checkbox to the Language and Style tab if checked, it will set 0% for invert and 0deg for hue-rotate function?

openwrt / luci