title: Using light/dark themed icons in VS Code Webview
body: <p>Is there a way to correctly light/dark theme webview content that is not textual? VS Code automatically sets the style of my webview html <em>body</em> to reflect light/dark change, but that only applies to foreground/background colors of text or tables, etc but not to svg images used for buttons. </p>
  
  <p>Note that the related question 
  <a href="https://stackoverflow.com/questions/37257911/detect-light-dark-theme-programatically-in-visual-studio-code">Detect light/dark theme programatically in Visual Studio Code</a> goes as far as deriving style of custom Webview content from the <code>&lt;body class="vscode-light|dark|high-contrast"&gt;</code>.</p>
  
  <p>Consider webview, which shows an icon that acts as a clickable button:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;img src="images/light/chevron-up.svg" onclick="expandView()"/&gt;
  </code></pre>
  
  <p><strong>The problem:</strong> the <code>/light/</code> directory needs to be replaced by <code>/dark/</code> when the user changes the theme.</p>
  
  <p>Theoretically, I could construct this <code>src</code> attribute using the <code>document.body.class</code>, which indicates the current theme, but I cannot, because the <code>src</code> attribute must be created using the <code>Webview.asWebviewUri(...)</code> API before it is assigned to the <code>webview.html</code> as static html source.</p>
  
  <p>Also theoretically, I could have a <a href="https://stackoverflow.com/a/58695555/1159548">script running in the Webview to detect</a> the <code>document.body.class</code> change (caused by the user switching the theme later) and re-apply the new theme, when the user changes it. But that would not work, because the very same <code>img.src</code> attribute is at runtime <code>undefined</code>, when running inside the Webview. So I cannot just replace the theme folder in the Uri. </p>
  
  <p><strong>Update:</strong>
  I only found a clunky solution: to define each icon twice, use a custom <code>theme</code> xml attribute and use a script to show/hide the right icons when the theme changes:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;img src="images/light/chevron-up.svg" theme="light" onclick="expandView()" style="display: inherit"/&gt;
  &lt;img src="images/dark/chevron-up.svg" theme="dark" onclick="expandView()" style="dispay: none"/&gt;
  </code></pre>
  
  <p>The duplication is undesirable for maintainability reasons. That is where I ran out of options. Any ideas?</p>