From 411994d9a4295cf61e7a18b6b6c0f4e91235a3ec Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Wed, 3 Dec 2025 22:57:25 -0800
Subject: [PATCH] fix: make Markdown tool dark mode reactive to theme changes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace useMemo with useState + MutationObserver for isDarkMode detection
- Add MDXEditor's built-in 'dark-theme' class for proper toolbar/icon theming
- Theme now switches instantly when user toggles dark/light mode

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/shapes/MarkdownShapeUtil.tsx | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/shapes/MarkdownShapeUtil.tsx b/src/shapes/MarkdownShapeUtil.tsx
index bcc9657..d9f9ef2 100644
--- a/src/shapes/MarkdownShapeUtil.tsx
+++ b/src/shapes/MarkdownShapeUtil.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useRef, useEffect, useMemo } from 'react'
+import React, { useState, useCallback, useRef, useEffect } from 'react'
 import {
   MDXEditor,
   headingsPlugin,
@@ -62,12 +62,28 @@ export class MarkdownShape extends BaseBoxShapeUtil<IMarkdownShape> {
     const [isToolbarMinimized, setIsToolbarMinimized] = useState(false)
     const editorRef = useRef<MDXEditorMethods>(null)
 
-    // Dark mode detection
-    const isDarkMode = useMemo(() => {
+    // Dark mode detection with reactive updates
+    const [isDarkMode, setIsDarkMode] = useState(() => {
       if (typeof document !== 'undefined') {
         return document.documentElement.classList.contains('dark')
       }
       return false
+    })
+
+    // Listen for dark mode changes
+    useEffect(() => {
+      if (typeof document === 'undefined') return
+
+      const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          if (mutation.attributeName === 'class') {
+            setIsDarkMode(document.documentElement.classList.contains('dark'))
+          }
+        })
+      })
+
+      observer.observe(document.documentElement, { attributes: true })
+      return () => observer.disconnect()
     }, [])
 
     // Use the pinning hook
@@ -160,6 +176,7 @@ export class MarkdownShape extends BaseBoxShapeUtil<IMarkdownShape> {
               ref={editorRef}
               markdown={shape.props.text || ''}
               onChange={handleChange}
+              className={isDarkMode ? 'dark-theme' : ''}
               contentEditableClassName="mdx-editor-content"
               plugins={[
                 // Core formatting