u

src/components/chat/HealingMarkdown.jsx

@@ -1,5 +1,12 @@
 import React, { memo, useState } from 'react';
 import Box from '@mui/material/Box';
+import {
+  CODE_BLOCK_PAIR,
+  CODE_INLINE_PAIR,
+  SURFACE_SUBTLE_PAIR,
+  TABLE_HEADER_PAIR,
+  byMode,
+} from '../../colors';
 
 /**
  * Healing markdown renderer.
@@ -336,7 +343,7 @@ const rootSx = (theme) => ({
     fontSize: '0.82em',
     px: 0.5,
     borderRadius: 0.75,
-    bgcolor: theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)',
+bbox: byMode(theme, CODE_INLINE_PAIR),
   },
   '& pre': {
     m: 0,
@@ -344,7 +351,7 @@ const rootSx = (theme) => ({
     p: 1.25,
     borderRadius: 1.5,
     overflowX: 'auto',
-    bgcolor: theme.palette.mode === 'dark' ? 'rgba(0,0,0,0.35)' : 'rgba(0,0,0,0.06)',
+    bgcolor: byMode(theme, CODE_BLOCK_PAIR),
   },
   '& pre code': { p: 0, bgcolor: 'transparent', whiteSpace: 'pre' },
   '& hr': { border: 0, borderTop: `1px solid ${theme.palette.divider}`, my: 1.5 },
@@ -357,7 +364,7 @@ const rootSx = (theme) => ({
     objectFit: 'contain',
     borderRadius: 1.5,
     border: `1px solid ${theme.palette.divider}`,
-    bgcolor: theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.03)',
+bbox: byMode(theme, SURFACE_SUBTLE_PAIR),
   },
   '& .md-image-fallback': {
     display: 'inline-block',
@@ -388,7 +395,7 @@ const rootSx = (theme) => ({
     '&:last-child': { borderRight: 'none' },
   },
   '& th': {
-    bgcolor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.04)',
+bbox: byMode(theme, TABLE_HEADER_PAIR),
     fontWeight: 600,
   },
   '& tr:last-child td': {