[BasicUI] CurrentColor in SVG depends on browser mode preference, not on the theme selected in the settings #1861

dilyanpalauzov · 2023-04-25T21:01:26Z

Basic UI

The problem

In openHAB 3.4.2 I upload in /etc/openhab/icons/classic the file office_phone.svg:

<?xml version="1.0" encoding="iso-8859-1"?>
<svg height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 17.026 17.026" xml:space="preserve" style="color-scheme: light dark">
<g>
        <g>
                <path style="fill:CurrentColor" d="M6.719,0h-1.05C5.114,0,4.664,0.45,4.664,1.005v12.622c0,0.548,0.439,0.993,0.985,1.004
                        c-0.172,0.875-0.945,1.538-1.869,1.538c-1.051,0-1.907-0.857-1.907-1.907V9.45c0-0.238-0.192-0.43-0.429-0.43
                        s-0.43,0.191-0.43,0.43v4.812c0,1.524,1.241,2.764,2.766,2.764c1.397,0,2.554-1.044,2.737-2.393H6.72
                        c0.555,0,1.006-0.451,1.006-1.006V1.006C7.725,0.451,7.274,0,6.719,0z"/>
                <path style="fill:CanvasText" d="M15.159,1.595h-7.01V13.89h7.01c0.472,0,0.853-0.381,0.853-0.852V2.447
                        C16.012,1.976,15.631,1.595,15.159,1.595z M10.812,12.631h-1.49v-1.489h1.49V12.631z M10.812,10.556h-1.49v-1.49h1.49V10.556z
                         M10.823,8.495h-1.49v-1.49h1.49V8.495z M12.942,12.631h-1.491v-1.489h1.491V12.631z M12.942,10.556h-1.491v-1.49h1.491V10.556z
                         M12.952,8.495h-1.491v-1.49h1.491V8.495z M15.071,12.631h-1.49v-1.489h1.49V12.631z M15.071,10.556h-1.49v-1.49h1.49V10.556z
                         M15.082,8.495h-1.491v-1.49h1.491V8.495z M15.088,4.085H9.073V2.328h6.015V4.085z"/>
                <path style="fill:CanvasText" d="M3.696,13.89h0.521V1.595H3.696c-0.47,0-0.852,0.382-0.852,0.852v10.592
                        C2.844,13.509,3.226,13.89,3.696,13.89z"/>
        </g>
</g>
</svg>

and define an item:

items/network.items:Switch tele "T" <office_phone> {channel="network:pingdevice:telef:online"}

which is then included in a sitemap.file

  Text item=tele

When my browser is setup to prefer dark mode pages, the currentColor from the SVG file is rendered as white. When my browser is setup to prefer light mode pages, it renders the currentColor in the SVG as black.

Under https://openhab-uri/settings/services/org.openhab.basicui I can change the Theme between «Default» and «Dark», but it does not change the background color. My understanding is, that BasicUI does not utilize the CSS property color-scheme.

When this particular SVG icon is loaded, the value of the currentColor (and Canvas, and CanvasText) shall depend on the mode selected for for BasicUI (follow system, dark, light), not on the preference selected in the browser.

The text was updated successfully, but these errors were encountered:

lolodomo · 2023-05-10T18:09:09Z

When my browser is setup to prefer dark mode pages, the currentColor from the SVG file is rendered as white. When my browser is setup to prefer light mode pages, it renders the currentColor in the SVG as black.

What browser are you using?

dilyanpalauzov · 2023-05-10T18:27:59Z

I am using Firefox 112/Linux Desktop.

lolodomo · 2023-05-10T18:34:26Z

Look at this message: #1743 (comment)
It is working well for iconify and material icons, look at my screenshots.
For icons delivered by openHAB server, this will work only work with PR #1799.

In the current version, the icons provided by openHAB server are displayed using the img tag and their colors cannot be adjusted.

dilyanpalauzov · 2023-05-10T18:47:15Z

I do not know whether the icons on the link mentioned have style="color-scheme: light dark", as in my example. This example is for OpenHAB 3.4.3 for SVG icons delivered over openHAB, which contain style="color-scheme: light dark".

lolodomo · 2023-05-10T19:19:22Z

No but they have currentColor.

dilyanpalauzov · 2023-05-10T19:39:19Z

With the file, mentioned in the first comment here, if I create an html file with the content:

<html style="color-scheme: light dark"><body>

    ABC
    <img src="office_phone.svg">
</body></html>

then the colors change, whenever I change the browser's dark/light mode. So in this particular case it is irrelevant, if the image is inserted as img. But if I remove from the html tag the style, then switching the light/dark mode in the browser does not work as expected in regards to currentColor.

What I am saying is tha probably Basic UI does not utilize style="color-scheme: light dark".

lolodomo · 2023-05-12T12:51:58Z

What I am saying is tha probably Basic UI does not utilize style="color-scheme: light dark".

Yes, that is very probable.

dilyanpalauzov · 2023-05-13T15:17:39Z

In openHAB 3.4.3 when the top most <svg> element has style="color-scheme: light dark" then in Main UI the icons are displayed correctly in dark and light mode (currentColor is substituted with white or black).

lolodomo · 2023-06-24T06:55:52Z

In MainUI or BasicUI?

Do you suggest to set color-scheme depending on the OH theme?

lolodomo · 2023-06-24T07:34:23Z

Does it work if color-scheme style is applied to the img tag?
Depending on the OH theme, I could set it to light or dark.

lolodomo · 2023-06-24T09:03:29Z

It looks like it does not work to set "color-scheme" on the img tag.
I updated the code to hardcode a "dark" value, here is the generated code:

And here is how it renders (my BasicUI theme is set to dark):

Does not work, the mic icon is still black.
Edit: same result if I use "light dark".

lolodomo · 2023-06-24T09:24:02Z

I also tried to apply color-scheme on the parent but I still get black.

lolodomo · 2023-06-24T09:31:27Z

And same thing if I set it at the top level:

lolodomo · 2023-06-24T09:50:26Z

Final test by setting color-scheme in CSS when handling OH themes. Still icon in black.

lolodomo · 2023-06-24T10:00:30Z

I should have started by that !

I tried with a similar HTML file as yours:

<html style="color-scheme: dark"
<body>
    ABC
    <img src="mic.svg">
</body>
</html>

Here is the content of mic.svg:

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 14q-1.25 0-2.125-.875T9 11V5q0-1.25.875-2.125T12 2q1.25 0 2.125.875T15 5v6q0 1.25-.875 2.125T12 14Zm-1 7v-3.075q-2.6-.35-4.3-2.325T5 11h2q0 2.075 1.463 3.538T12 16q2.075 0 3.538-1.463T17 11h2q0 2.625-1.7 4.6T13 17.925V21h-2Z"/></svg>

And here is the result:

With this HTML

<html style="color-scheme: light"
<body>
    ABC
    <img src="mic.svg">
</body>
</html>

the result is

So I have apparently not the same result as you, the img is not impacted by color-scheme.

dilyanpalauzov · 2023-06-24T10:07:09Z

In MainUI or BasicUI?

Unless I said MainUI, I mean here BasicUI.

Do you suggest to set color-scheme depending on the OH theme?

I suggested

When this particular SVG icon is loaded, the value of the currentColor (and Canvas, and CanvasText) shall depend on the mode selected for for BasicUI (follow system, dark, light), not on the preference selected in the browser.

My SVG file has in the <svg> tag an style="color-scheme: light dark". mic.svg does not have it.

lolodomo · 2023-06-24T10:08:01Z

But it works with YOUR SVG file ! Maybe because your SVG includes the color-scheme ?
I doubt that most of user SVG will have it. The file I used for my tests was retrieved on iconify and does not contain "color-scheme".
Edit: if I add it to my icon, then it works with the small HTML file.

lolodomo · 2023-06-24T10:13:57Z

So I can do the change but it will work only for a very limited number of SVG files ?

dilyanpalauzov · 2023-06-24T10:17:19Z

So I can do the change but it will work only for a very limited number of SVG files ?

Yes an no. If users want to have adaptive black/white in SVG and can have it by adding style="color-scheme: light dark", some users will add it.

Probably the number of SVGs with style="color-scheme: light dark" is limited, because no software utilizes these files differently.

lolodomo · 2023-06-24T10:19:19Z

I tried again with the updated mic SVG and my hardcoded change in OH to add the dark style on any icon and then it works:

to have icon color depending on selected theme Fix openhab#1861 Will work only with SVG custom OH icons containing style="color-scheme: light dark" and currentColor as fill color. Signed-off-by: Laurent Garnier <lg.hc@free.fr>

to have icon color depending on selected theme Fix #1861 Will work only with SVG custom OH icons containing style="color-scheme: light dark" and currentColor as fill color. Signed-off-by : Laurent Garnier <lg.hc@free.fr>

dilyanpalauzov added the bug Something isn't working label Apr 25, 2023

lolodomo added the basic ui Basic UI label Apr 28, 2023

lolodomo mentioned this issue Jun 24, 2023

[BasicUI] Set color-scheme for OH icon #1937

Merged

kaikreuzer closed this as completed in #1937 Jun 24, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[BasicUI] CurrentColor in SVG depends on browser mode preference, not on the theme selected in the settings #1861

[BasicUI] CurrentColor in SVG depends on browser mode preference, not on the theme selected in the settings #1861

dilyanpalauzov commented Apr 25, 2023 •

edited

Loading

lolodomo commented May 10, 2023

dilyanpalauzov commented May 10, 2023

lolodomo commented May 10, 2023 •

edited

Loading

dilyanpalauzov commented May 10, 2023

lolodomo commented May 10, 2023

dilyanpalauzov commented May 10, 2023

lolodomo commented May 12, 2023

dilyanpalauzov commented May 13, 2023

lolodomo commented Jun 24, 2023 •

edited

Loading

lolodomo commented Jun 24, 2023

lolodomo commented Jun 24, 2023 •

edited

Loading

lolodomo commented Jun 24, 2023

lolodomo commented Jun 24, 2023

lolodomo commented Jun 24, 2023

lolodomo commented Jun 24, 2023

dilyanpalauzov commented Jun 24, 2023

lolodomo commented Jun 24, 2023 •

edited

Loading

lolodomo commented Jun 24, 2023

dilyanpalauzov commented Jun 24, 2023 •

edited

Loading

lolodomo commented Jun 24, 2023

[BasicUI] CurrentColor in SVG depends on browser mode preference, not on the theme selected in the settings #1861

[BasicUI] CurrentColor in SVG depends on browser mode preference, not on the theme selected in the settings #1861

Comments

dilyanpalauzov commented Apr 25, 2023 • edited Loading

The problem

lolodomo commented May 10, 2023

dilyanpalauzov commented May 10, 2023

lolodomo commented May 10, 2023 • edited Loading

dilyanpalauzov commented May 10, 2023

lolodomo commented May 10, 2023

dilyanpalauzov commented May 10, 2023

lolodomo commented May 12, 2023

dilyanpalauzov commented May 13, 2023

lolodomo commented Jun 24, 2023 • edited Loading

lolodomo commented Jun 24, 2023

lolodomo commented Jun 24, 2023 • edited Loading

lolodomo commented Jun 24, 2023

lolodomo commented Jun 24, 2023

lolodomo commented Jun 24, 2023

lolodomo commented Jun 24, 2023

dilyanpalauzov commented Jun 24, 2023

lolodomo commented Jun 24, 2023 • edited Loading

lolodomo commented Jun 24, 2023

dilyanpalauzov commented Jun 24, 2023 • edited Loading

lolodomo commented Jun 24, 2023

dilyanpalauzov commented Apr 25, 2023 •

edited

Loading

lolodomo commented May 10, 2023 •

edited

Loading

lolodomo commented Jun 24, 2023 •

edited

Loading

lolodomo commented Jun 24, 2023 •

edited

Loading

lolodomo commented Jun 24, 2023 •

edited

Loading

dilyanpalauzov commented Jun 24, 2023 •

edited

Loading