🤖 fix: use resolved theme for visual rendering

Author: ibetitsmike

src/browser/components/Messages/MarkdownComponents.tsx

@@ -42,7 +42,7 @@ interface CodeBlockProps {
  */
 const CodeBlock: React.FC<CodeBlockProps> = ({ code, language }) => {
   const [highlightedLines, setHighlightedLines] = useState<string[] | null>(null);
-  const { theme: themeMode } = useTheme();
+  const { resolvedTheme } = useTheme();
 
   // Split code into lines, removing trailing empty line
   const plainLines = code
@@ -51,7 +51,7 @@ const CodeBlock: React.FC<CodeBlockProps> = ({ code, language }) => {
 
   useEffect(() => {
     let cancelled = false;
-    const isLight = themeMode === "light" || themeMode.endsWith("-light");
+    const isLight = resolvedTheme === "light" || resolvedTheme.endsWith("-light");
     const theme = isLight ? "light" : "dark";
 
     setHighlightedLines(null);
@@ -78,7 +78,7 @@ const CodeBlock: React.FC<CodeBlockProps> = ({ code, language }) => {
     return () => {
       cancelled = true;
     };
-  }, [code, language, themeMode]);
+  }, [code, language, resolvedTheme]);
 
   const lines = highlightedLines ?? plainLines;
   const isSingleLine = lines.length === 1;

src/browser/components/ProjectSidebar.tsx

@@ -245,8 +245,9 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
   } = useProjectContext();
 
   // Theme for logo variant
-  const { theme } = useTheme();
-  const MuxLogo = theme === "dark" || theme.endsWith("-dark") ? MuxLogoDark : MuxLogoLight;
+  const { resolvedTheme } = useTheme();
+  const MuxLogo =
+    resolvedTheme === "dark" || resolvedTheme.endsWith("-dark") ? MuxLogoDark : MuxLogoLight;
 
   // Mobile breakpoint for auto-closing sidebar
   const MOBILE_BREAKPOINT = 768;

src/browser/components/RightSidebar/FileViewer/TextFileViewer.tsx

@@ -137,7 +137,7 @@ function buildUnifiedView(content: string, diffText: string): UnifiedLine[] | nu
 }
 
 export const TextFileViewer: React.FC<TextFileViewerProps> = (props) => {
-  const { theme: themeMode } = useTheme();
+  const { resolvedTheme } = useTheme();
   const language = getLanguageFromPath(props.filePath);
   const languageDisplayName = getLanguageDisplayName(language);
 
@@ -160,7 +160,7 @@ export const TextFileViewer: React.FC<TextFileViewerProps> = (props) => {
       ? unifiedLines.map((l) => l.content)
       : fileLines.filter((l, i, arr) => i < arr.length - 1 || l !== "");
 
-    const theme = themeMode === "light" || themeMode.endsWith("-light") ? "light" : "dark";
+    const theme = resolvedTheme === "light" || resolvedTheme.endsWith("-light") ? "light" : "dark";
 
     let cancelled = false;
 
@@ -181,7 +181,7 @@ export const TextFileViewer: React.FC<TextFileViewerProps> = (props) => {
     return () => {
       cancelled = true;
     };
-  }, [unifiedLines, fileLines, language, themeMode]);
+  }, [unifiedLines, fileLines, language, resolvedTheme]);
 
   const addedCount = unifiedLines?.filter((l) => l.type === "added").length ?? 0;
   const removedCount = unifiedLines?.filter((l) => l.type === "removed").length ?? 0;

src/browser/components/shared/DiffRenderer.tsx

@@ -500,13 +500,19 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({
   className,
 }) => {
   // Detect language for syntax highlighting (memoized to prevent repeated detection)
-  const { theme } = useTheme();
+  const { resolvedTheme } = useTheme();
   const language = React.useMemo(
     () => (filePath ? getLanguageFromPath(filePath) : "text"),
     [filePath]
   );
 
-  const highlightedChunks = useHighlightedDiff(content, language, oldStart, newStart, theme);
+  const highlightedChunks = useHighlightedDiff(
+    content,
+    language,
+    oldStart,
+    newStart,
+    resolvedTheme
+  );
 
   const lineNumberWidths = React.useMemo(() => {
     if (!showLineNumbers || !highlightedChunks) {
@@ -866,7 +872,7 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
         window.removeEventListener("blur", stopDragging);
       };
     }, []);
-    const { theme } = useTheme();
+    const { resolvedTheme } = useTheme();
     const [selection, setSelection] = React.useState<LineSelection | null>(null);
 
     // Notify parent when composition state changes
@@ -895,7 +901,7 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
       enableHighlighting ? language : "text",
       oldStart,
       newStart,
-      theme
+      resolvedTheme
     );
 
     // Parse raw lines once for use in lineData

src/browser/components/tools/shared/HighlightedCode.tsx

@@ -25,13 +25,13 @@ export const HighlightedCode: React.FC<HighlightedCodeProps> = ({
   startLineNumber = 1,
 }) => {
   const [highlightedLines, setHighlightedLines] = useState<string[] | null>(null);
-  const { theme: themeMode } = useTheme();
+  const { resolvedTheme } = useTheme();
 
   const plainLines = code.split("\n").filter((line, i, arr) => i < arr.length - 1 || line !== "");
 
   useEffect(() => {
     let cancelled = false;
-    const theme = themeMode === "light" || themeMode.endsWith("-light") ? "light" : "dark";
+    const theme = resolvedTheme === "light" || resolvedTheme.endsWith("-light") ? "light" : "dark";
 
     setHighlightedLines(null);
 
@@ -53,7 +53,7 @@ export const HighlightedCode: React.FC<HighlightedCodeProps> = ({
     return () => {
       cancelled = true;
     };
-  }, [code, language, themeMode]);
+  }, [code, language, resolvedTheme]);
 
   const lines = highlightedLines ?? plainLines;