Svg с импортированной внешней таблицей стилей не работает как значок сайта. ⇐ Html

[Anonymous]

Я пытался найти способ использовать CSS для динамического редактирования цветов SVG-файла, используемого для значка на этой веб-странице, над которой я работаю. Самое близкое решение, которое я нашел, — это использование @import внутри самого файла svg и ссылка на внешнюю таблицу стилей только с цветами веб-сайта.
Стилизация Svg:

Код: Выделить всё

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

Палитра.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;
}

При открытии файла svg в новом окне значок принимает ожидаемые значения цвета, но на практике вместо этого значок веб-сайта отображается полностью обратно.
Вкладка веб-браузера со значком изображения отображается полностью черным

Предполагаемое поведение, при котором внутренние цвета значка принимают разные цвета.
Если кто-нибудь знает решение этой проблемы или, по крайней мере, имеет объяснение, почему @import не работает работа в этом контексте будет оценена по достоинству.

Подробнее здесь: https://stackoverflow.com/questions/798 ... -site-icon