3 files changed, 164 insertions, 38 deletions

diff --git a/subprojects/frontend/src/graph/export/ExportPanel.tsx b/subprojects/frontend/src/graph/export/ExportPanel.tsx
index c93fa837..8d82b95c 100644
--- a/subprojects/frontend/src/graph/export/ExportPanel.tsx
+++ b/subprojects/frontend/src/graph/export/ExportPanel.tsx
@@ -6,6 +6,7 @@
 
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import ContrastIcon from '@mui/icons-material/Contrast';
 import DarkModeIcon from '@mui/icons-material/DarkMode';
 import ImageIcon from '@mui/icons-material/Image';
 import InsertDriveFileOutlinedIcon from '@mui/icons-material/InsertDriveFileOutlined';
@@ -50,6 +51,13 @@ const SwitchButtonGroup = styled(ToggleButtonGroup, {
   },
 }));
 
+const AutoThemeMessage = styled(Typography, {
+  name: 'ExportPanel-AutoThemeMessage',
+})(({ theme }) => ({
+  width: '260px',
+  marginInline: theme.spacing(2),
+}));
+
 function getLabel(value: number): string {
   return `${value}%`;
 }
@@ -155,29 +163,40 @@ function ExportPanel({
       </SwitchButtonGroup>
       <SwitchButtonGroup size="small" className="rounded">
         <ToggleButton
-          value="svg"
+          value="light"
           selected={exportSettingsStore.theme === 'light'}
           onClick={() => exportSettingsStore.setTheme('light')}
         >
           <LightModeIcon fontSize="small" /> Light
         </ToggleButton>
         <ToggleButton
-          value="png"
+          value="dark"
           selected={exportSettingsStore.theme === 'dark'}
           onClick={() => exportSettingsStore.setTheme('dark')}
         >
           <DarkModeIcon fontSize="small" /> Dark
         </ToggleButton>
+        {exportSettingsStore.canSetDynamicTheme && (
+          <ToggleButton
+            value="dynamic"
+            selected={exportSettingsStore.theme === 'dynamic'}
+            onClick={() => exportSettingsStore.setTheme('dynamic')}
+          >
+            <ContrastIcon fontSize="small" /> Auto
+          </ToggleButton>
+        )}
       </SwitchButtonGroup>
-      <FormControlLabel
-        control={
-          <Switch
-            checked={exportSettingsStore.transparent}
-            onClick={() => exportSettingsStore.toggleTransparent()}
-          />
-        }
-        label="Transparent background"
-      />
+      {exportSettingsStore.canChangeTransparency && (
+        <FormControlLabel
+          control={
+            <Switch
+              checked={exportSettingsStore.transparent}
+              onClick={() => exportSettingsStore.toggleTransparent()}
+            />
+          }
+          label="Transparent background"
+        />
+      )}
       {exportSettingsStore.canEmbedFonts && (
         <FormControlLabel
           control={
@@ -200,6 +219,17 @@ function ExportPanel({
           }
         />
       )}
+      {exportSettingsStore.theme === 'dynamic' && (
+        <>
+          <AutoThemeMessage mt={2}>
+            For embedding into HTML directly
+          </AutoThemeMessage>
+          <AutoThemeMessage variant="caption" mt={1}>
+            Set <code>data-theme=&quot;dark&quot;</code> on a containing element
+            to use a dark theme
+          </AutoThemeMessage>
+        </>
+      )}
       {exportSettingsStore.canScale && (
         <Box mx={4} mt={1} mb={2}>
           <Slider
diff --git a/subprojects/frontend/src/graph/export/ExportSettingsStore.ts b/subprojects/frontend/src/graph/export/ExportSettingsStore.ts
index 53a161ab..478227af 100644
--- a/subprojects/frontend/src/graph/export/ExportSettingsStore.ts
+++ b/subprojects/frontend/src/graph/export/ExportSettingsStore.ts
@@ -7,7 +7,7 @@
 import { makeAutoObservable } from 'mobx';
 
 export type ExportFormat = 'svg' | 'pdf' | 'png';
-export type ExportTheme = 'light' | 'dark';
+export type ExportTheme = 'light' | 'dark' | 'dynamic';
 
 export default class ExportSettingsStore {
   format: ExportFormat = 'svg';
@@ -28,14 +28,24 @@ export default class ExportSettingsStore {
 
   setFormat(format: ExportFormat): void {
     this.format = format;
+    if (this.theme === 'dynamic' && this.format !== 'svg') {
+      this.theme = 'light';
+    }
   }
 
   setTheme(theme: ExportTheme): void {
     this.theme = theme;
+    if (this.theme === 'dynamic') {
+      this.format = 'svg';
+      this.transparent = true;
+    }
   }
 
   toggleTransparent(): void {
     this.transparent = !this.transparent;
+    if (!this.transparent && this.theme === 'dynamic') {
+      this.theme = 'light';
+    }
   }
 
   toggleEmbedFonts(): void {
@@ -55,10 +65,24 @@ export default class ExportSettingsStore {
       this.embedPDFFonts = embedFonts;
     }
     this.embedSVGFonts = embedFonts;
+    if (this.embedSVGFonts && this.theme === 'dynamic') {
+      this.theme = 'light';
+    }
+  }
+
+  get canSetDynamicTheme(): boolean {
+    return this.format === 'svg';
+  }
+
+  get canChangeTransparency(): boolean {
+    return this.theme !== 'dynamic';
   }
 
   get canEmbedFonts(): boolean {
-    return this.format === 'svg' || this.format === 'pdf';
+    return (
+      (this.format === 'svg' || this.format === 'pdf') &&
+      this.theme !== 'dynamic'
+    );
   }
 
   get canScale(): boolean {
diff --git a/subprojects/frontend/src/graph/export/exportDiagram.tsx b/subprojects/frontend/src/graph/export/exportDiagram.tsx
index 6abbcfdf..a0c3460c 100644
--- a/subprojects/frontend/src/graph/export/exportDiagram.tsx
+++ b/subprojects/frontend/src/graph/export/exportDiagram.tsx
@@ -16,6 +16,7 @@ import cancelSVG from '@material-icons/svg/svg/cancel/baseline.svg?raw';
 import labelSVG from '@material-icons/svg/svg/label/baseline.svg?raw';
 import labelOutlinedSVG from '@material-icons/svg/svg/label/outline.svg?raw';
 import type { Theme } from '@mui/material/styles';
+import { nanoid } from 'nanoid';
 
 import { darkTheme, lightTheme } from '../../theme/ThemeProvider';
 import { copyBlob, saveBlob } from '../../utils/fileIO';
@@ -48,6 +49,36 @@ importSVG(labelSVG, 'icon-TRUE');
 importSVG(labelOutlinedSVG, 'icon-UNKNOWN');
 importSVG(cancelSVG, 'icon-ERROR');
 
+function fixIDs(id: string, svgDocument: XMLDocument) {
+  const idMap = new Map<string, string>();
+  let i = 0;
+  svgDocument.querySelectorAll('[id]').forEach((node) => {
+    const oldId = node.getAttribute('id');
+    if (oldId === null) {
+      return;
+    }
+    if (oldId.endsWith(',clip')) {
+      const newId = `refinery-${id}-clip-${i}`;
+      i += 1;
+      idMap.set(`url(#${oldId})`, `url(#${newId})`);
+      node.setAttribute('id', newId);
+    } else {
+      node.setAttribute('id', '');
+    }
+  });
+  svgDocument.querySelectorAll('[clip-path]').forEach((node) => {
+    const oldPath = node.getAttribute('clip-path');
+    if (oldPath === null) {
+      return;
+    }
+    const newPath = idMap.get(oldPath);
+    if (newPath === undefined) {
+      return;
+    }
+    node.setAttribute('clip-path', newPath);
+  });
+}
+
 function addBackground(
   svgDocument: XMLDocument,
   svg: SVGSVGElement,
@@ -142,40 +173,54 @@ async function fetchVariableFontCSS(): Promise<string> {
   return variableFontCSS;
 }
 
+interface ThemeVariant {
+  selector: string;
+  theme: Theme;
+}
+
 function appendStyles(
+  id: string,
   svgDocument: XMLDocument,
   svg: SVGSVGElement,
-  theme: Theme,
+  themes: ThemeVariant[],
   colorNodes: boolean,
   hexTypeHashes: string[],
   fontsCSS: string,
 ): void {
-  const cache = createCache({
-    key: 'refinery',
-    container: svg,
-    prepend: true,
-  });
-  // @ts-expect-error `CSSObject` types don't match up between `@mui/material` and
-  // `@emotion/serialize`, but they are compatible in practice.
-  const styles = serializeStyles([createGraphTheme], cache.registered, {
-    theme,
-    colorNodes,
-    hexTypeHashes,
-    noEmbedIcons: true,
-  });
+  const className = `refinery-${id}`;
+  svg.classList.add(className);
   const rules: string[] = [fontsCSS];
-  const sheet = {
-    insert(rule) {
-      rules.push(rule);
-    },
-  } as StyleSheet;
-  cache.insert('', styles, sheet, false);
+  themes.forEach(({ selector, theme }) => {
+    const cache = createCache({
+      key: 'refinery',
+      container: svg,
+      prepend: true,
+    });
+    // @ts-expect-error `CSSObject` types don't match up between `@mui/material` and
+    // `@emotion/serialize`, but they are compatible in practice.
+    const styles = serializeStyles([createGraphTheme], cache.registered, {
+      theme,
+      colorNodes,
+      hexTypeHashes,
+      noEmbedIcons: true,
+    });
+    const sheet = {
+      insert(rule) {
+        rules.push(rule);
+      },
+    } as StyleSheet;
+    cache.insert(`${selector} .${className}`, styles, sheet, false);
+  });
   const styleElement = svgDocument.createElementNS(SVG_NS, 'style');
   svg.prepend(styleElement);
   styleElement.innerHTML = rules.join('');
 }
 
-function fixForeignObjects(svgDocument: XMLDocument, svg: SVGSVGElement): void {
+function fixForeignObjects(
+  id: string,
+  svgDocument: XMLDocument,
+  svg: SVGSVGElement,
+): void {
   const foreignObjects: SVGForeignObjectElement[] = [];
   svg
     .querySelectorAll('foreignObject')
@@ -197,7 +242,7 @@ function fixForeignObjects(svgDocument: XMLDocument, svg: SVGSVGElement): void {
     object.children[0]?.classList?.forEach((className) => {
       useElement.classList.add(className);
       if (ICONS.has(className)) {
-        useElement.setAttribute('href', `#${className}`);
+        useElement.setAttribute('href', `#refinery-${id}-${className}`);
       }
     });
     object.replaceWith(useElement);
@@ -206,6 +251,7 @@ function fixForeignObjects(svgDocument: XMLDocument, svg: SVGSVGElement): void {
   svg.prepend(defs);
   ICONS.forEach((value) => {
     const importedValue = svgDocument.importNode(value, true);
+    importedValue.id = `refinery-${id}-${importedValue.id}`;
     defs.appendChild(importedValue);
   });
 }
@@ -322,12 +368,37 @@ export default async function exportDiagram(
     svgDocument.replaceChild(copyOfSVG, originalRoot);
   }
 
-  const theme = settings.theme === 'light' ? lightTheme : darkTheme;
+  const id = nanoid();
+  fixIDs(id, svgDocument);
+
+  let theme: Theme;
+  let themes: ThemeVariant[];
+  if (settings.theme === 'dynamic') {
+    theme = lightTheme;
+    themes = [
+      {
+        selector: '',
+        theme: lightTheme,
+      },
+      {
+        selector: '[data-theme="dark"]',
+        theme: darkTheme,
+      },
+    ];
+  } else {
+    theme = settings.theme === 'light' ? lightTheme : darkTheme;
+    themes = [
+      {
+        selector: '',
+        theme,
+      },
+    ];
+  }
   if (!settings.transparent) {
     addBackground(svgDocument, copyOfSVG, theme);
   }
 
-  fixForeignObjects(svgDocument, copyOfSVG);
+  fixForeignObjects(id, svgDocument, copyOfSVG);
 
   const { colorNodes } = graph;
   let fontsCSS = '';
@@ -339,9 +410,10 @@ export default async function exportDiagram(
     fontsCSS = await fetchFontCSS();
   }
   appendStyles(
+    id,
     svgDocument,
     copyOfSVG,
-    theme,
+    themes,
     colorNodes,
     graph.hexTypeHashes,
     fontsCSS,