[react] fix: SVG colors in dark mode. Fixes #335

packages/react/components/Editor/components/views/DraftView.mjs

@@ -1,6 +1,9 @@
 // Dependencies
 import React from 'react'
 import { bundlePatternTranslations, draft, missingMeasurements } from '../../lib/index.mjs'
+import { colors, darkColors } from '@freesewing/plugin-theme'
+// Hooks
+import { useColorMode } from '@docusaurus/theme-common'
 // Components
 import { Null } from '@freesewing/react/components/Null'
 import { ZoomablePattern } from '../ZoomablePattern.mjs'
@@ -26,6 +29,10 @@ import { translateStrings } from '../../../Pattern/index.mjs'
  * @return {function} DraftView - React component
  */
 export const DraftView = ({ Design, state, update, config, plugins = [], PluginOutput = Null }) => {
+  /*
+   * We need to manipulate the theme for SVG in the browser
+   */
+  const { colorMode } = useColorMode()
   /*
    * Don't trust that we have all measurements
    *
@@ -63,13 +70,20 @@ export const DraftView = ({ Design, state, update, config, plugins = [], PluginO
   let renderProps = false
   if (state.ui?.renderer === 'svg') {
     try {
-      const __html = pattern.render()
+      let __html = pattern.render()
+      if (colorMode === 'dark') {
+        for (const color of Object.keys(colors))
+          __html = __html.replaceAll(`: ${colors[color]};`, `: ${darkColors[color]};`)
+      }
       output = (
         <>
           <DraftErrorHandler {...{ failure, errors }} />
           <PluginOutput {...{ pattern, Design, state, update, config }} />
           <ZoomablePattern update={update}>
-            <div className="tw:w-full tw:h-full" dangerouslySetInnerHTML={{ __html }} />
+            <div
+              className="tw:w-full tw:h-full tw:text-base-content"
+              dangerouslySetInnerHTML={{ __html }}
+            />
           </ZoomablePattern>
         </>
       )

plugins/plugin-theme/src/css.mjs

@@ -41,7 +41,8 @@ ${!stripped ? 'svg.freesewing ' : ''}path.sample-focus {
 
 const round = (value) => Math.round(value * 1e2) / 1e2
 
-const colors = {
+export const colors = {
+  base: '#000',
   fabric: '#212121',
   lining: '#10b981',
   interfacing: '#a3a3a3',
@@ -51,6 +52,17 @@ const colors = {
   mark: '#3b82f6',
   contrast: '#ec4899',
 }
+export const darkColors = {
+  base: '#fff',
+  fabric: '#fafafa',
+  lining: '#46ecd5',
+  interfacing: '##d97706a3a3a3',
+  canvas: '#d97706',
+  various: '#ff6467',
+  note: '#a684ff',
+  mark: '#3b82f6',
+  contrast: '#ec4899',
+}
 
 /**
  * generate a stylesheet
@@ -69,7 +81,7 @@ export const buildStylesheet = (scale = 1, stripped) => `
   ${!stripped ? '/* Defaults */' : ''}
   ${!stripped ? 'svg.freesewing ' : ''}path,
   ${!stripped ? 'svg.freesewing ' : ''}circle {
-    stroke: #000;
+    stroke: ${colors.base};
     stroke-opacity: 1;
     stroke-width: ${round(0.3 * scale)};
     stroke-linecap: round;
@@ -191,7 +203,7 @@ export const buildStylesheet = (scale = 1, stripped) => `
     font-size: ${round(5 * scale)}px;
     font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
       Arial, sans-serif;
-    fill: #000;
+    fill: ${colors.base};
     text-anchor: start;
     font-weight: 200;
     dominant-baseline: ideographic;

plugins/plugin-theme/src/index.mjs

@@ -1,5 +1,5 @@
 import about from '../about.json' with { type: 'json' }
-import { sampleStyle, paperlessStyle, buildStylesheet } from './css.mjs'
+import { colors, darkColors, sampleStyle, paperlessStyle, buildStylesheet } from './css.mjs'
 
 const grid = {
   metric: `
@@ -71,3 +71,6 @@ export const plugin = {
 // More specifically named exports
 export const themePlugin = plugin
 export const pluginTheme = plugin
+
+// Re-export default and dark mode colors
+export { colors, darkColors }