feat(ui): 为多处 JsonEditor 组件接入暗色模式 (#4556)

在为 UsageScriptModal、ProviderForm、UniversalProviderFormModal 中
的 JsonEditor CodeMirror 编辑器添加 darkMode 支持,使用 useDarkMode()
hook 监听 App 主题,自动切换 oneDark 编辑器主题。
This commit is contained in:
Tan Kimzeg
2026-06-23 23:30:01 +08:00
committed by GitHub
parent 9171ad752c
commit 55abd1822c
3 changed files with 13 additions and 0 deletions
@@ -1,4 +1,5 @@
import { useState, useEffect, useCallback, useMemo } from "react";
import { useDarkMode } from "@/hooks/useDarkMode";
import { useTranslation } from "react-i18next";
import { Eye, EyeOff, RefreshCw } from "lucide-react";
import { Button } from "@/components/ui/button";
@@ -34,6 +35,7 @@ export function UniversalProviderFormModal({
editingProvider,
initialPreset,
}: UniversalProviderFormModalProps) {
const isDarkMode = useDarkMode();
const { t } = useTranslation();
const isEditMode = !!editingProvider;
@@ -658,6 +660,7 @@ requires_openai_auth = true`;
value={JSON.stringify(claudeConfigJson, null, 2)}
onChange={() => {}}
height={180}
darkMode={isDarkMode}
/>
</div>
)}
@@ -673,6 +676,7 @@ requires_openai_auth = true`;
value={JSON.stringify(codexConfigJson, null, 2)}
onChange={() => {}}
height={280}
darkMode={isDarkMode}
/>
</div>
)}
@@ -688,6 +692,7 @@ requires_openai_auth = true`;
value={JSON.stringify(geminiConfigJson, null, 2)}
onChange={() => {}}
height={140}
darkMode={isDarkMode}
/>
</div>
)}