Mit Welchem Code hast du denn versucht, die .svg-Datei einzufärben?
Dieser Code Ändert die Farben der Standardicons.
Die Variablen sind unter :root{} definiert.
Funktioniert immer noch für die vorgegebenen Standardsymbole.
CSS
/* ################################################################## */
/* FARBE der ICONS ändern */
/* ################################################################## */
/* Lesezeichen Sidebar - Farbe der Standardicons */
@-moz-document url("chrome://browser/content/bookmarks/bookmarksPanel.xhtml"),
url("chrome://browser/content/history/history-panel.xhtml"),
url-prefix("chrome://browser/content/places/bookmarksSidebar.xhtml"){
treechildren::-moz-tree-image(container) {fill:var(--FolderColor) !important;
}
}
/* Lesezeichen verwalten - Farbe der Standardicons */
@-moz-document url-prefix("chrome://browser/content/places/places.xhtml") {treechildren::-moz-tree-image(container) {
fill:var(--FolderColor) !important;
}
}
/* Lesezeichen - Farbe der Standardicons */
@-moz-document url-prefix("chrome://browser/content/browser.xhtml") {
.bookmark-item[container="true"] {
fill:var(--FolderColor) !important;
}
}
/* Farbe der Weltkugel */
#cookiesChildren::-moz-tree-image(domainCol, leaf),
.alltabs-item > .menu-iconic-left > .menu-iconic-icon,
#page-proxy-favicon:not([src]),
treechildren::-moz-tree-image(title, leaf),
.bookmark-item:not([container]),
#PlacesToolbarItems > toolbarbutton[class="bookmark-item"][scheme="javascript"]:not([src]),
.sidebar-placesTreechildren::-moz-tree-image(leaf){
fill:var(--WorldColor) !important;
}
Alles anzeigen
Die SVG-Grafik, die ich oben verwende, lässt sich in FF78 damit auch einfärben.
Hier mal der Code-Inhalt der SVG-Grafik:
Code
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg">
<path d="M14.5 3H6.914a.5.5 0 0 1-.354-.146L5.146 1.439A1.491 1.491 0 0 0 4.086 1H1.5A1.5 1.5 0 0 0 0 2.5v11A1.5 1.5 0 0 0 1.5 15h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 3zm.5 10.5a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5V6h14zM1 5V2.5a.5.5 0 0 1 .5-.5h2.586a.5.5 0 0 1 .354.146l1.414 1.415A1.491 1.491 0 0 0 6.914 4H14.5a.5.5 0 0 1 .5.5V5z"/>
<path d="M15 13.5a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5V6h14z" fill-opacity=".2"/>
<path d="M1 5V2.5a.5.5 0 0 1 .5-.5h2.586a.5.5 0 0 1 .354.146l1.414 1.415A1.491 1.491 0 0 0 6.914 4H14.5a.5.5 0 0 1 .5.5V5z" fill-opacity=".1"/>
<path d="M15 13.5a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5V13h14z" fill-opacity=".05"/>
</svg>
fill="context-fill" bedeutet, dass die externe Farbvorgabe verwendet wird, die per fill: im CSS angegeben wird.
Ändere ich das in der Grafik selbst z.B. in fill="red" wird die Grafik rot.
Wenn die Grafik per url: eingebunden wird (wie oben), geht das Zuordnen einer Farbe per CSS fill: red !important; einfach nicht mehr.