From 965e32b9d57c9e97ef5f00b51c431e448f8464da Mon Sep 17 00:00:00 2001
From: joostdecock <joost@joost.at>
Date: Sun, 4 May 2025 14:12:52 +0200
Subject: [PATCH] [react] fix: SVG colors in dark mode. Fixes #335

---
 .../Editor/components/views/DraftView.mjs      | 18 ++++++++++++++++--
 plugins/plugin-theme/src/css.mjs               | 18 +++++++++++++++---
 plugins/plugin-theme/src/index.mjs             |  5 ++++-
 3 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/packages/react/components/Editor/components/views/DraftView.mjs b/packages/react/components/Editor/components/views/DraftView.mjs
index 89caecff34f..54c49a1d6d6 100644
--- a/packages/react/components/Editor/components/views/DraftView.mjs
+++ b/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>
         </>
       )
diff --git a/plugins/plugin-theme/src/css.mjs b/plugins/plugin-theme/src/css.mjs
index 04e1c605af0..1365119de6f 100644
--- a/plugins/plugin-theme/src/css.mjs
+++ b/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;
diff --git a/plugins/plugin-theme/src/index.mjs b/plugins/plugin-theme/src/index.mjs
index 4c3622404df..e54b1fea392 100644
--- a/plugins/plugin-theme/src/index.mjs
+++ b/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 }