Set background or alternative colors for diagrams (#667)

src/components/markdown-renderer/markdown-renderer.scss

@@ -17,7 +17,6 @@
 
   & > img {
     width: unset;
-    background-color: unset;
   }
 
   a.heading-anchor {

src/components/markdown-renderer/replace-components/flow/flowchart/flowchart.tsx

@@ -1,6 +1,8 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { Alert } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
+import { useSelector } from 'react-redux'
+import { ApplicationState } from '../../../../../redux'
 
 export interface FlowChartProps {
   code: string
@@ -10,6 +12,8 @@ export const FlowChart: React.FC<FlowChartProps> = ({ code }) => {
   const diagramRef = useRef<HTMLDivElement>(null)
   const [error, setError] = useState(false)
 
+  const darkModeActivated = useSelector((state: ApplicationState) => state.darkMode.darkMode)
+
   useTranslation()
 
   useEffect(() => {
@@ -24,6 +28,8 @@ export const FlowChart: React.FC<FlowChartProps> = ({ code }) => {
           'line-width': 2,
           fill: 'none',
           'font-size': '16px',
+          'line-color': darkModeActivated ? '#ffffff' : '#000000',
+          'element-color': darkModeActivated ? '#ffffff' : '#000000',
           'font-family': 'Source Code Pro, "Twemoji Mozilla", monospace'
         })
         setError(false)
@@ -35,7 +41,7 @@ export const FlowChart: React.FC<FlowChartProps> = ({ code }) => {
     return () => {
       Array.from(currentDiagramRef.children).forEach(value => value.remove())
     }
-  }, [code])
+  }, [code, darkModeActivated])
 
   if (error) {
     return (

src/components/markdown-renderer/replace-components/mermaid/mermaid-chart.tsx

@@ -3,6 +3,7 @@ import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react
 import { Alert } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 import { ShowIf } from '../../../common/show-if/show-if'
+import './mermaid.scss'
 
 export interface MermaidChartProps {
   code: string
@@ -55,6 +56,6 @@ export const MermaidChart: React.FC<MermaidChartProps> = ({ code }) => {
     <ShowIf condition={!!error}>
       <Alert variant={'warning'}>{error}</Alert>
     </ShowIf>
-    <div className={'text-center mermaid'} ref={diagramContainer}/>
+    <div className={'text-center mermaid text-black'} ref={diagramContainer}/>
   </Fragment>
 }

src/components/markdown-renderer/replace-components/mermaid/mermaid.scss

@@ -0,0 +1,3 @@
+.mermaid>svg {
+  background-color: #f8f9fa;
+}

src/external-types/flowchart.js/index.d.ts

@@ -3,11 +3,14 @@ declare module 'flowchart.js' {
     'line-width': number,
     'fill': string,
     'font-size': string,
-    'font-family': string
+    'font-family': string,
+    'font-color': string,
+    'line-color': string,
+    'element-color': string
   }
   export interface ParseOutput {
     clean: () => void,
-    drawSVG: (container: HTMLElement, options: Options) => void,
+    drawSVG: (container: HTMLElement, options: Partial<Options>) => void,
   }
   export function parse(code: string): ParseOutput
 }