ARTICLE AD BOX
I've been trying to find a way to use css to dynamically edit the colors of an svg file used for the favicon on this webpage I'm working on. The closest thing I've found to a solution is using @import inside the svg file itself and linking to an external stylesheet with just the colors of the website.
Svg styling:
<style> @import "../palette.css"; #back-shape { fill: var(--c-table-cell-unchecked); stroke: var(--c-table-border); } #center-shape { fill: var(--c-table-cell-checked); stroke: var(--c-table-border); } .grid-lines { stroke: var(--c-table-border) } </style>Palette.css:
:root { --c-svg-filter-bg-match: invert(100%) sepia(0%) saturate(1%) hue-rotate(326deg) brightness(106%) contrast(101%); --c-background: white; --c-background-secondary: rgb(109, 218, 181); --c-text-generic: black; --c-text-bold: black; --c-link: rgb(170, 127, 255); --c-link-checked: rgb(255, 66, 183); --c-table-border: #161A1D; --c-table-cell-checked: aquamarine; --c-table-cell-checked-2: rgb(109, 218, 181); --c-table-cell-unchecked: white; --c-table-cell-unchecked-2: azure; --c-card-button: azure; --c-card-button-border: #aaa; --c-darkmode-toggle: aquamarine; --c-darkmode-toggle-svg: #161A1D; --c-darkmode-toggle-border: #161A1D; }Opening the svg file in a new window has the icon taking the color values as expected, but in practice the websites icon is rendered in all back instead.
A web browser tab with the favicon rendered in all black
The intended behavior where the inside colors of the icon take on different colors
If anyone knows a solution to this or at least has an explanation for why @import doesn't work in this context that would be appreciated.
