openhab / openhab-webui

Web UIs of openHAB
Eclipse Public License 2.0
217 stars 239 forks source link

[BasicUI] `iconcolor` does not influence `currentColor` with `color-scheme:light dark` #2240

Closed dilyanpalauzov closed 8 months ago

dilyanpalauzov commented 8 months ago

I have this file under openhab/icons/classic/on.svg:

<svg xmlns="http://www.w3.org/2000/svg" width="100mm" height="100mm" viewBox="0 0 100 100" style="color-scheme:light dark">
  <text xml:space="preserve" x=".359" y="97.504" style="font-size:130.528px;fill:currentColor;stroke-width:.264583"><tspan x=".359" y="97.504" style="font-size:130.528px;stroke-width:.264583">O</tspan></text>
</svg>

and an element in sitemap:

Default item=CPU_Uptime icon="oh:classic:on"

Essentially it shows a black O in light mode, and a white O in dark mode by using fill:currentColor.

I change the element to

Default item=CPU_Uptime icon="oh:classic:on" iconcolor=[e1==ON="green",e1==OFF="red","blue"]

I would expect that now the color of the O is green, red or blue. In BasicUI it is still white or black, while Android-Openhab shows it coloured.

BasicUI shall display the O coloured, too.

lolodomo commented 8 months ago

Did you enable the "inline SVG" setting ?

dilyanpalauzov commented 8 months ago

The description of Inline SVG is:

If enabled, any SVG icon provided by the openHAB icon server will automatically be converted to an inline SVG in the WEB page, allowing control of its color with the sitemap widget property "iconcolor" in the case where the SVG icon sets "currentColor" as the fill color. Note that this will work with custom SVG icons but not with all the packaged icons from the classic iconset since they are defined with a hard-coded color palette. This feature is disabled by default.

After I enabled it, the icon colours were applied.

As the description does not contain any drawbacks for Inline SVGs the user (I) cannot anticipate any reasons why not to enable it. Please either extend the above description to include pro- and contra of enabling the option, or remove the option and always enable Inline SVGs.

lolodomo commented 8 months ago

The advantage is the ability to control the color for icons compatible with that feature. Classic iconset from OH does not support that feature.

The disadvantages are non standard additional treatment to load SVG images, bigger page size (SVG images are then inside the page) and I am not 100% sure that the browser cache is fully working.

My advice is to not enable it except you really want to control icon color and you use icons supporting that feature.

I will try to enhance a little the description.

lolodomo commented 8 months ago

I should also mention that material/framework7/iconify icons are not concerned. I could replace the last sentence by: This feature is disabled by default due to additional non-standard processing required leading to a larger page size and because it is unnecessary if you only use Material/framework7/iconify icons or openHAB icons from the classic icon set.