SVG mit importiertem externen Stylesheet funktioniert nicht als Site-Symbol ⇐ CSS

[Anonymous]

Ich habe versucht, mit CSS die Farben einer SVG-Datei, die für das Symbol auf dieser Webseite, an der ich arbeite, verwendet wird, dynamisch zu bearbeiten. Die beste Lösung, die ich gefunden habe, besteht darin, @import in der SVG-Datei selbst zu verwenden und auf ein externes Stylesheet mit nur den Farben der Website zu verlinken.
SVG-Stil:

Code: Select all

@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) }

Palette.css:

Code: Select all

: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;
}

Beim Öffnen der SVG-Datei in einem neuen Fenster nimmt das Symbol die erwarteten Farbwerte an, aber in der Praxis wird stattdessen das Website-Symbol vollständig zurückgerendert.
Ein Webbrowser-Tab mit dem Bildsymbol wird ganz in Schwarz gerendert

Das beabsichtigte Verhalten, bei dem die Innenfarben des Symbols unterschiedliche Farben annehmen
Falls jemand eine Lösung hierfür kennt oder zumindest eine Erklärung dafür hat, warum @import in diesem Kontext nicht funktioniert Das wäre dankbar.