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>');*