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

[Anonymous]

Ich habe versucht, mit CSS die Farben einer SVG-Datei, die für das Favicon auf dieser Webseite, an der ich arbeite, verwendet wird, dynamisch zu bearbeiten. Die Lösung, die meiner Meinung nach am nächsten kommt, ist die Verwendung von @import in der SVG-Datei selbst und die Verknüpfung mit einem externen Stylesheet nur mit den Farben der Website.
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 ganz zurück gerendert.
Ein Webbrowser-Tab mit dem Favicon ganz in Schwarz gerendert

Das beabsichtigte Verhalten, bei dem die Innenfarben des Symbols unterschiedliche Farben annehmen
Wenn jemand eine Lösung dafür kennt oder zumindest eine Erklärung dafür hat, warum @import hier nicht funktioniert Kontext, der geschätzt werden würde.