Icon color in SVG depending on theme for project pages

Forge Forge Modules and Product Triggers
,
1

I have created a Forge app using the Jira project page module. In the manifest I can define an icon.

modules:
  jira:projectPage:
    - key: ...
      icon: resource:main;sidebar_icon.svg

But depending on the light or dark theme the user is using, the color of this SVG icon should be changed.

I use currentColor in the SVG. But the color is set to black independent of light or dark theme, while the Jira icons are switching their color. See screenshots below with icon from Jira (“Project”) and my own icon (“Manage”)

<path ... style="stroke:currentColor;..."/>

image

image

What do I need to do in order to have support for themes in the icon? Is there a CSS class to apply to the SVG maybe? Or use a defined color in the SVG?

4 Likes
2

Hi @Holger
We have the same problem with all of the svg icons in our app. If you could be able to solve it, we really appreciate it if you could share the solution.
Regards,

3

@Starware @Holger

What happens if you try and use a design token?

For example…

<path ... style="background-Color: var(--ds-text)"/>

This should set the stroke color to match the text next to your icon.

Ref: https://atlassian.design/components/tokens/all-tokens

4

I used style="fill:#42526E;" to mimic the default color, but of course this only works for light theme and is not right in dark theme even though at least recognizable.

Using style="fill:var(--ds-text);" or style="fill:currentColor;" does not work. I guess because the SVG is actually loaded via <img src="path-to-svg-file.svg"/> which separates the SVG from the context of the page.

While Atlassian is loading their own icons via embedded SVG with <span><svg ...>...</svg></span> and then currentColor and design tokens can be used…

So it is an issue, how Forge loads the SVG images for the menu icons, why you cannot use design token I guess.

2 Likes
5

Hi,
Thanks for the suggestion, unfortunately it didn’t work. I have tried both style="background-color: var(--ds-text) and style=var(--ds-text, #000) :slightly_frowning_face:

6

Hi. I also ran into this, so I studied the icon from the JXL plugin and was able to get the following to work for me (after removing fill/stroke styling from my paths, etc):

<svg viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
    <style>
        path, ellipse {
            stroke: #42526E;
        }
        @supports (color-scheme: light) and (color-scheme: dark) {
            svg {
                color-scheme: light dark;
            }
            @media (prefers-color-scheme: light) {
                path, ellipse {
                    stroke: #44546F;
                    fill: #FFF;
                }
            }
            @media (prefers-color-scheme: dark) {
                path, ellipse {
                    stroke: #9FADBC;
                    fill: #1D2125;
                }
            }
        }
    </style>
...
5 Likes
7

Really great! Thanks for sharing! Works like a charm.

I am using #44546F; for light and #9FADBC; for dark theme.

<style>
    path, ellipse, circle {
        fill: #44546F;
    }
    @supports (color-scheme: light) and (color-scheme: dark) {
        svg {
            color-scheme: light dark;
        }
        @media (prefers-color-scheme: light) {
            path, ellipse, circle {
                fill: #44546F;
            }
        }
        @media (prefers-color-scheme: dark) {
            path, ellipse, circle {
                fill: #9FADBC;
            }
        }
    }
</style>

image

image

5 Likes
8

Good idea!

However, this approach does not work if the user selects the Light or Dark theme instead of “Match Browser” in their personal Jira settings and if their operating system or browser settings differ.

I’m not sure if “Match Browser” is set as the default option. In any case, it would be preferable if the Atlassian Design Team addressed this issue.

Thank you for sharing!