2 ms·
My approach is to use CSS for my SVG. A D3 diagram uses: @media (prefers-color-scheme: light) { :root { --node-text: #444; --tree-b
by intrasight 4y ago
My approach is to use CSS for my SVG.
A D3 diagram uses:
@media (prefers-color-scheme: light) {
:root {
--node-text: #444;
--tree-buttons: darkred;
--edge: #ddd;
--edge-temp: red;
--file-buttons: darkblue;
--footer-labels: darkblue;
}
}
.node text {
font: 10px sans-serif;
fill: var(--node-text);
}
.link {
fill: none;
stroke: var(--edge);
stroke-width: 1px;
}
For icons, I usually do this
@media (prefers-color-scheme: light) {
:root {
/*
Styles for plus/minus in front of tree param nodes.
Note that currentColor doesn't work when using url(data:) so color is specified - copy of text-color with # escaped.
TODO: figure out a way to share these
*/
--collapsed: url('data:image/svg+xml,<svg fill="red" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><g stroke="%23111" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></g></svg>');
--expanded: url('data:image/svg+xml,<svg fill="red" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><g stroke="%23111" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line></g></svg>');*