Feat: Adjust the style of mcp and checkbox. #10427 (#11150)

### What problem does this PR solve?

Feat: Adjust the style of mcp and checkbox. #10427

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/components/jsonjoy-builder/components/schema-editor/json-schema-visualizer.tsx

@@ -11,6 +11,8 @@ export interface JsonSchemaVisualizerProps {
   schema: JSONSchema;
   className?: string;
   onChange?: (schema: JSONSchema) => void;
+  readOnly?: boolean;
+  showHeader?: boolean;
 }
 
 /** @public */
@@ -18,6 +20,8 @@ const JsonSchemaVisualizer: FC<JsonSchemaVisualizerProps> = ({
   schema,
   className,
   onChange,
+  readOnly = false,
+  showHeader = true,
 }) => {
   const editorRef = useRef<Parameters<OnMount>[0] | null>(null);
   const {
@@ -73,20 +77,22 @@ const JsonSchemaVisualizer: FC<JsonSchemaVisualizerProps> = ({
         'jsonjoy',
       )}
     >
-      <div className="flex items-center justify-between bg-secondary/80 backdrop-blur-xs px-4 py-2 border-b shrink-0">
-        <div className="flex items-center gap-2">
-          <FileJson size={18} />
-          <span className="font-medium text-sm">{t.visualizerSource}</span>
+      {showHeader && (
+        <div className="flex items-center justify-between bg-secondary/80 backdrop-blur-xs px-4 py-2 border-b shrink-0">
+          <div className="flex items-center gap-2">
+            <FileJson size={18} />
+            <span className="font-medium text-sm">{t.visualizerSource}</span>
+          </div>
+          <button
+            type="button"
+            onClick={handleDownload}
+            className="p-1.5 hover:bg-secondary rounded-md transition-colors"
+            title={t.visualizerDownloadTitle}
+          >
+            <Download size={16} />
+          </button>
         </div>
-        <button
-          type="button"
-          onClick={handleDownload}
-          className="p-1.5 hover:bg-secondary rounded-md transition-colors"
-          title={t.visualizerDownloadTitle}
-        >
-          <Download size={16} />
-        </button>
-      </div>
+      )}
       <div className="grow flex min-h-0">
         <Editor
           height="100%"
@@ -101,7 +107,7 @@ const JsonSchemaVisualizer: FC<JsonSchemaVisualizerProps> = ({
               <Loader2 className="h-6 w-6 animate-spin" />
             </div>
           }
-          options={defaultEditorOptions}
+          options={{ ...defaultEditorOptions, readOnly }}
           theme={currentTheme}
         />
       </div>

web/src/components/jsonjoy-builder/hooks/use-monaco-theme.ts

@@ -1,5 +1,5 @@
+import { useIsDarkTheme } from '@/components/theme-provider';
 import type * as Monaco from 'monaco-editor';
-import { useEffect, useState } from 'react';
 import type { JSONSchema } from '../types/json-schema.js';
 
 export interface MonacoEditorOptions {
@@ -63,36 +63,37 @@ export const defaultEditorOptions: MonacoEditorOptions = {
 };
 
 export function useMonacoTheme() {
-  const [isDarkMode, setIsDarkMode] = useState(false);
+  // const [isDarkTheme, setisDarkTheme] = useState(false);
+  const isDarkTheme = useIsDarkTheme();
 
   // Check for dark mode by examining CSS variables
-  useEffect(() => {
-    const checkDarkMode = () => {
-      // Get the current background color value
-      const backgroundColor = getComputedStyle(document.documentElement)
-        .getPropertyValue('--background')
-        .trim();
+  // useEffect(() => {
+  //   const checkDarkMode = () => {
+  //     // Get the current background color value
+  //     const backgroundColor = getComputedStyle(document.documentElement)
+  //       .getPropertyValue('--background')
+  //       .trim();
 
-      // If the background color HSL has a low lightness value, it's likely dark mode
-      const isDark =
-        backgroundColor.includes('222.2') ||
-        backgroundColor.includes('84% 4.9%');
+  //     // If the background color HSL has a low lightness value, it's likely dark mode
+  //     const isDark =
+  //       backgroundColor.includes('222.2') ||
+  //       backgroundColor.includes('84% 4.9%');
 
-      setIsDarkMode(isDark);
-    };
+  //     setisDarkTheme(isDark);
+  //   };
 
-    // Check initially
-    checkDarkMode();
+  //   // Check initially
+  //   checkDarkMode();
 
-    // Set up a mutation observer to detect theme changes
-    const observer = new MutationObserver(checkDarkMode);
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ['class', 'style'],
-    });
+  //   // Set up a mutation observer to detect theme changes
+  //   const observer = new MutationObserver(checkDarkMode);
+  //   observer.observe(document.documentElement, {
+  //     attributes: true,
+  //     attributeFilter: ['class', 'style'],
+  //   });
 
-    return () => observer.disconnect();
-  }, []);
+  //   return () => observer.disconnect();
+  // }, []);
 
   const defineMonacoThemes = (monaco: typeof Monaco) => {
     // Define custom light theme that matches app colors
@@ -199,8 +200,8 @@ export function useMonacoTheme() {
   };
 
   return {
-    isDarkMode,
-    currentTheme: isDarkMode ? 'appDarkTheme' : 'appLightTheme',
+    isDarkTheme,
+    currentTheme: isDarkTheme ? 'appDarkTheme' : 'appLightTheme',
     defineMonacoThemes,
     configureJsonDefaults,
     defaultEditorOptions,