Icon color in SVG depending on theme for project pages

Forge Forge Modules and Product Triggers
,
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