Export dynamic SVG theme (will automate light and dark color-scheme)

[AdamCoulterOz]

Can we have the auto export/save for drawio.svg files automatically embed the dynamic css given by jgraph? This will allow the svg file to automatically switch between light and dark theme.

https://github.com/jgraph/drawio-github/blob/master/DARK-MODE.md?#L5-L31

To support dark mode in SVG, add the following CSS to the SVG defs section:

<style type="text/css">
@media (prefers-color-scheme: dark)
{
    :root {--light-color: #c9d1d9; --dark-color: #0d1117; }
    svg[style^="background-color:"] { background-color: var(--dark-color) !important; }
    g[filter="url(#dropShadow)"] { filter: none !important; }
    [stroke="rgb(0, 0, 0)"] { stroke: var(--light-color); }
    [stroke="rgb(255, 255, 255)"] { stroke: var(--dark-color); }
    [fill="rgb(0, 0, 0)"] { fill: var(--light-color); }
    [fill="rgb(255, 255, 255)"] { fill: var(--dark-color); }
    g[fill="rgb(0, 0, 0)"] text { fill: var(--light-color); }
    div[data-drawio-colors*="color: rgb(0, 0, 0)"]
        div { color: var(--light-color) !important; }
    div[data-drawio-colors*="border-color: rgb(0, 0, 0)"]
        { border-color: var(--light-color) !important; }
    div[data-drawio-colors*="border-color: rgb(0, 0, 0)"]
        div { border-color: var(--light-color) !important; }
    div[data-drawio-colors*="background-color: rgb(255, 255, 255)"]
        { background-color: var(--dark-color) !important; }
    div[data-drawio-colors*="background-color: rgb(255, 255, 255)"]
        div { background-color: var(--dark-color) !important; }
}
</style>

An example of how the SVG will then show automatically the light or dark theme based on the OS theme/ vscode theme.

Light

Dark

[AdamCoulterOz]

@hediet - It's just been added as an option to the native drawio SVG Export Dialog. Is there anything the vscode extension needs to change to integrate it?

https://github.com/jgraph/drawio/issues/3147#issuecomment-1727113034

[AdamCoulterOz]

@hediet can we make it so that .drawio.svg files can have the dynamic svg theme automatically included? In the desktop app you enable Extras > Appearance > Improve Constrast, then in export svg you set Appearance = Automatic. It will save the SVG with the code to auto switch between light and dark based on the browser theme (and system theme).

[vazome]

Due to GitHub dark/white mode usage being that ubiquitous, I support this request with all hands