Modify to follow the app's color mode

apps/app/src/client/components/ReactMarkdownComponents/DrawioViewerWithEditButton.tsx

@@ -28,8 +28,7 @@ declare global {
 export const DrawioViewerWithEditButton = React.memo((props: DrawioViewerProps): JSX.Element => {
   const { t } = useTranslation();
 
-  const { bol, eol } = props;
-
+  const { isDarkMode, bol, eol } = props;
   const { data: isGuestUser } = useIsGuestUser();
   const { data: isReadOnlyUser } = useIsReadOnlyUser();
   const { data: isSharedUser } = useIsSharedUser();
@@ -79,7 +78,7 @@ export const DrawioViewerWithEditButton = React.memo((props: DrawioViewerProps):
           <span className="material-symbols-outlined me-1">edit_square</span>{t('Edit')}
         </button>
       ) }
-      <DrawioViewer {...props} onRenderingStart={renderingStartHandler} onRenderingUpdated={renderingUpdatedHandler} />
+      <DrawioViewer {...props} isDarkMode={isDarkMode} onRenderingStart={renderingStartHandler} onRenderingUpdated={renderingUpdatedHandler} />
     </div>
   );
 });

apps/app/src/client/services/renderer/renderer.tsx

@@ -114,7 +114,7 @@ export const generateViewOptions = (
     components.refimg = refsGrowiDirective.RefImg;
     components.refsimg = refsGrowiDirective.RefsImg;
     components.gallery = refsGrowiDirective.Gallery;
-    components.drawio = DrawioViewerWithEditButton;
+    components.drawio = props => <DrawioViewerWithEditButton isDarkMode={config.isDarkMode} {...props} />;
     components.table = TableWithEditButton;
     components.mermaid = mermaid.MermaidViewer;
     components.callout = callout.CalloutViewer;
@@ -218,7 +218,7 @@ export const generateSimpleViewOptions = (
     components.refimg = refsGrowiDirective.RefImgImmutable;
     components.refsimg = refsGrowiDirective.RefsImgImmutable;
     components.gallery = refsGrowiDirective.GalleryImmutable;
-    components.drawio = drawio.DrawioViewer;
+    components.drawio = props => <drawio.DrawioViewer {...props} isDarkMode={config.isDarkMode} />;
     components.mermaid = mermaid.MermaidViewer;
     components.callout = callout.CalloutViewer;
     components.attachment = RichAttachment;
@@ -312,7 +312,7 @@ export const generatePreviewOptions = (config: RendererConfigExt, pagePath: stri
     components.refimg = refsGrowiDirective.RefImgImmutable;
     components.refsimg = refsGrowiDirective.RefsImgImmutable;
     components.gallery = refsGrowiDirective.GalleryImmutable;
-    components.drawio = drawio.DrawioViewer;
+    components.drawio = props => <drawio.DrawioViewer {...props} isDarkMode={config.isDarkMode} />;
     components.mermaid = mermaid.MermaidViewer;
     components.callout = callout.CalloutViewer;
     components.attachment = RichAttachment;

packages/remark-drawio/src/components/DrawioViewer.tsx

@@ -23,6 +23,7 @@ declare global {
 }
 
 export type DrawioViewerProps = {
+  isDarkMode: boolean
   diagramIndex: number;
   bol: number;
   eol: number;
@@ -39,6 +40,7 @@ export type DrawioEditByViewerProps = {
 
 export const DrawioViewer = memo((props: DrawioViewerProps): JSX.Element => {
   const {
+    isDarkMode,
     diagramIndex,
     bol,
     eol,
@@ -109,13 +111,13 @@ export const DrawioViewer = memo((props: DrawioViewerProps): JSX.Element => {
 
     let mxgraphData: string | undefined;
     try {
-      mxgraphData = generateMxgraphData(code);
+      mxgraphData = generateMxgraphData(code, isDarkMode);
     } catch (err) {
       setError(err);
     }
 
     return `<div class="mxgraph" data-mxgraph="${mxgraphData}"></div>`;
-  }, [children]);
+  }, [children, isDarkMode]);
 
   useEffect(() => {
     if (mxgraphHtml.length > 0) {

packages/remark-drawio/src/utils/embed.ts

@@ -53,7 +53,10 @@ const escapeHTML = (string): string => {
   });
 };
 
-export const generateMxgraphData = (code: string): string => {
+export const generateMxgraphData = (
+  code: string,
+  isDarkMode: boolean,
+): string => {
   const trimedCode = code.trim();
   if (!trimedCode) {
     return '';
@@ -82,7 +85,9 @@ export const generateMxgraphData = (code: string): string => {
     resize: true,
     lightbox: 'false',
     xml,
-    'dark-mode': 'auto',
+    // To sync with GROWI app's color mode, pass 'dark' when the app is in dark mode. 'auto' would read OS color scheme via window.matchMedia instead.
+    // refs: https://github.com/jgraph/drawio/blob/eaae294cba5010e3a9d04b685407e79512f88d2d/src/main/webapp/js/diagramly/GraphViewer.js#L888-L892
+    'dark-mode': isDarkMode ? 'dark' : undefined,
   };
 
   return escapeHTML(JSON.stringify(mxGraphData));