Merge pull request #13 from x3ro/dark-mode-support

Dark / light mode configurability

src/Mermaid/Mermaid.test.tsx

@@ -19,8 +19,9 @@ import { TechDocsAddonTester } from '@backstage/plugin-techdocs-addons-test-util
 import React from 'react';
 
 import { Mermaid } from '../plugin';
+import { selectConfig } from './Mermaid';
 
-describe('TextSize', () => {
+describe('Mermaid', () => {
   it('renders without exploding', async () => {
     const { getByText } = await TechDocsAddonTester.buildAddonsInTechDocs([
       <Mermaid config={{ themeVariables: { lineColor: '#00ff00' } }} />,
@@ -30,4 +31,28 @@ describe('TextSize', () => {
 
     expect(getByText('TEST_CONTENT')).toBeInTheDocument();
   });
+
+  describe('selectConfig', () => {
+    const legacyConfig = { config: { fontFamily: 'legacy-config' } };
+    const lightConfig = { lightConfig: { fontFamily: 'light-config' } };
+    const darkConfig = { darkConfig: { fontFamily: 'dark-config' } };
+
+    it('legacy config is preferred for backwards-compatibility', () => {
+      let config = selectConfig('light', { ...legacyConfig });
+      expect(config).toEqual(legacyConfig.config);
+
+      config = selectConfig('light', { ...legacyConfig, ...lightConfig });
+      expect(config).toEqual(legacyConfig.config);
+    });
+
+    it('light config is selected for light palette', () => {
+      const config = selectConfig('light', { ...lightConfig, ...darkConfig });
+      expect(config).toEqual(lightConfig.lightConfig);
+    });
+
+    it('dark config is selected for dark palette', () => {
+      const config = selectConfig('dark', { ...lightConfig, ...darkConfig });
+      expect(config).toEqual(darkConfig.darkConfig);
+    });
+  });
 });

src/Mermaid/Mermaid.tsx

@@ -15,11 +15,28 @@
  */
 
 import { useEffect } from 'react';
+import { PaletteType, useTheme } from '@material-ui/core';
+
 import { useShadowRootElements } from '@backstage/plugin-techdocs-react';
 import mermaid from 'mermaid'
 import { isMermaidCode } from './hooks';
 import { MermaidProps } from './props';
+import { BackstageTheme } from '@backstage/theme';
+import { MermaidConfig } from 'mermaid';
+
+export function selectConfig(backstagePalette: PaletteType, properties: MermaidProps): MermaidConfig {
+  // Theme set directly in the Mermaid configuration takes
+  // precedence for backwards-compatibility
+  if(properties.config) {
+    return properties.config;
+  }
 
+  if(backstagePalette === 'light') {
+    return properties.lightConfig || {};
+  }
+
+  return properties.darkConfig || {};
+}
 
 /**
  * Show report issue button when text is highlighted
@@ -29,6 +46,7 @@ let diagramId = 0
 
 export const MermaidAddon = (properties: MermaidProps) => {
   const highlightTables = useShadowRootElements<HTMLDivElement>(['.highlighttable']);
+  const theme = useTheme<BackstageTheme>();
 
   useEffect(() => {
     highlightTables.forEach(highlightTable => {
@@ -65,14 +83,16 @@ export const MermaidAddon = (properties: MermaidProps) => {
 
       const id = `mermaid-${diagramId++}`
 
-      if (properties?.config) {
-        mermaid.initialize(properties?.config);
+      const config = selectConfig(theme.palette.type, properties);
+      if(config) {
+        mermaid.initialize(config);
       }
+
       mermaid.render(id, diagramText, (svgGraph: string) => {
         diagramElement.innerHTML = svgGraph
       });
     });
-  }, [highlightTables, properties]);
+  }, [highlightTables, properties, theme.palette.type]);
 
   return null;
 };

src/Mermaid/props.ts

@@ -1,3 +1,7 @@
 import { MermaidConfig } from 'mermaid';
 
-export type MermaidProps = { config?: MermaidConfig }
+export type MermaidProps = {
+    lightConfig?: MermaidConfig,
+    darkConfig?: MermaidConfig,
+    config?: MermaidConfig,
+}