From 9090e7347844878c1cf9999ec821676df63fdce7 Mon Sep 17 00:00:00 2001 From: Haileyesus <118998054+blackmammoth@users.noreply.github.com> Date: Mon, 29 Jun 2026 23:52:06 +0300 Subject: [PATCH] fix: use app theme for code editor --- .../code-editor/constants/settings.ts | 2 -- .../hooks/useCodeEditorSettings.ts | 19 +------------------ .../code-editor/view/CodeEditor.tsx | 5 ++++- .../settings/constants/constants.ts | 1 - .../settings/hooks/useSettingsController.ts | 2 -- src/components/settings/types/types.ts | 1 - src/components/settings/view/Settings.tsx | 1 - .../view/tabs/AppearanceSettingsTab.tsx | 13 ------------- 8 files changed, 5 insertions(+), 39 deletions(-) diff --git a/src/components/code-editor/constants/settings.ts b/src/components/code-editor/constants/settings.ts index fe3d5d24..4d8d1068 100644 --- a/src/components/code-editor/constants/settings.ts +++ b/src/components/code-editor/constants/settings.ts @@ -1,5 +1,4 @@ export const CODE_EDITOR_STORAGE_KEYS = { - theme: 'codeEditorTheme', wordWrap: 'codeEditorWordWrap', showMinimap: 'codeEditorShowMinimap', lineNumbers: 'codeEditorLineNumbers', @@ -7,7 +6,6 @@ export const CODE_EDITOR_STORAGE_KEYS = { } as const; export const CODE_EDITOR_DEFAULTS = { - isDarkMode: true, wordWrap: false, minimapEnabled: true, showLineNumbers: true, diff --git a/src/components/code-editor/hooks/useCodeEditorSettings.ts b/src/components/code-editor/hooks/useCodeEditorSettings.ts index 639054d7..06a8ffe4 100644 --- a/src/components/code-editor/hooks/useCodeEditorSettings.ts +++ b/src/components/code-editor/hooks/useCodeEditorSettings.ts @@ -5,15 +5,6 @@ import { CODE_EDITOR_STORAGE_KEYS, } from '../constants/settings'; -const readTheme = () => { - const savedTheme = localStorage.getItem(CODE_EDITOR_STORAGE_KEYS.theme); - if (!savedTheme) { - return CODE_EDITOR_DEFAULTS.isDarkMode; - } - - return savedTheme === 'dark'; -}; - const readBoolean = (storageKey: string, defaultValue: boolean, falseValue = 'false') => { const value = localStorage.getItem(storageKey); if (value === null) { @@ -33,7 +24,6 @@ const readFontSize = () => { }; export const useCodeEditorSettings = () => { - const [isDarkMode, setIsDarkMode] = useState(readTheme); const [wordWrap, setWordWrap] = useState(readWordWrap); const [minimapEnabled, setMinimapEnabled] = useState(() => ( readBoolean(CODE_EDITOR_STORAGE_KEYS.showMinimap, CODE_EDITOR_DEFAULTS.minimapEnabled) @@ -43,18 +33,13 @@ export const useCodeEditorSettings = () => { )); const [fontSize, setFontSize] = useState(readFontSize); - // Keep legacy behavior where the editor writes theme and wrap settings directly. - useEffect(() => { - localStorage.setItem(CODE_EDITOR_STORAGE_KEYS.theme, isDarkMode ? 'dark' : 'light'); - }, [isDarkMode]); - + // Keep legacy behavior where the editor writes wrap settings directly. useEffect(() => { localStorage.setItem(CODE_EDITOR_STORAGE_KEYS.wordWrap, String(wordWrap)); }, [wordWrap]); useEffect(() => { const refreshFromStorage = () => { - setIsDarkMode(readTheme()); setWordWrap(readWordWrap()); setMinimapEnabled(readBoolean(CODE_EDITOR_STORAGE_KEYS.showMinimap, CODE_EDITOR_DEFAULTS.minimapEnabled)); setShowLineNumbers(readBoolean(CODE_EDITOR_STORAGE_KEYS.lineNumbers, CODE_EDITOR_DEFAULTS.showLineNumbers)); @@ -71,8 +56,6 @@ export const useCodeEditorSettings = () => { }, []); return { - isDarkMode, - setIsDarkMode, wordWrap, setWordWrap, minimapEnabled, diff --git a/src/components/code-editor/view/CodeEditor.tsx b/src/components/code-editor/view/CodeEditor.tsx index 5861ce71..f153f7b8 100644 --- a/src/components/code-editor/view/CodeEditor.tsx +++ b/src/components/code-editor/view/CodeEditor.tsx @@ -4,6 +4,7 @@ import type { Extension } from '@codemirror/state'; import { useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { usePaletteOps } from '../../../contexts/PaletteOpsContext'; +import { useTheme } from '../../../contexts/ThemeContext'; import { useCodeEditorDocument } from '../hooks/useCodeEditorDocument'; import { useCodeEditorSettings } from '../hooks/useCodeEditorSettings'; import { useEditorKeyboardShortcuts } from '../hooks/useEditorKeyboardShortcuts'; @@ -42,8 +43,10 @@ export default function CodeEditor({ const [showDiff, setShowDiff] = useState(Boolean(file.diffInfo)); const [markdownPreview, setMarkdownPreview] = useState(false); + // The code editor follows the app-wide theme; it has no theme of its own. + const { isDarkMode } = useTheme(); + const { - isDarkMode, wordWrap, minimapEnabled, showLineNumbers, diff --git a/src/components/settings/constants/constants.ts b/src/components/settings/constants/constants.ts index 8e5bfebe..366c5989 100644 --- a/src/components/settings/constants/constants.ts +++ b/src/components/settings/constants/constants.ts @@ -45,7 +45,6 @@ export const AGENT_CATEGORIES: AgentCategory[] = ['account', 'permissions', 'mcp export const DEFAULT_PROJECT_SORT_ORDER: ProjectSortOrder = 'name'; export const DEFAULT_SAVE_STATUS = null; export const DEFAULT_CODE_EDITOR_SETTINGS: CodeEditorSettingsState = { - theme: 'dark', wordWrap: false, showMinimap: true, lineNumbers: true, diff --git a/src/components/settings/hooks/useSettingsController.ts b/src/components/settings/hooks/useSettingsController.ts index abf62cec..e42a1e1b 100644 --- a/src/components/settings/hooks/useSettingsController.ts +++ b/src/components/settings/hooks/useSettingsController.ts @@ -86,7 +86,6 @@ const toCodexPermissionMode = (value: unknown): CodexPermissionMode => { }; const readCodeEditorSettings = (): CodeEditorSettingsState => ({ - theme: localStorage.getItem('codeEditorTheme') === 'light' ? 'light' : 'dark', wordWrap: localStorage.getItem('codeEditorWordWrap') === 'true', showMinimap: localStorage.getItem('codeEditorShowMinimap') !== 'false', lineNumbers: localStorage.getItem('codeEditorLineNumbers') !== 'false', @@ -330,7 +329,6 @@ export function useSettingsController({ isOpen, initialTab }: UseSettingsControl }, [notificationPreferences.channels.sound]); useEffect(() => { - localStorage.setItem('codeEditorTheme', codeEditorSettings.theme); localStorage.setItem('codeEditorWordWrap', String(codeEditorSettings.wordWrap)); localStorage.setItem('codeEditorShowMinimap', String(codeEditorSettings.showMinimap)); localStorage.setItem('codeEditorLineNumbers', String(codeEditorSettings.lineNumbers)); diff --git a/src/components/settings/types/types.ts b/src/components/settings/types/types.ts index 7d8f7c37..c6801f39 100644 --- a/src/components/settings/types/types.ts +++ b/src/components/settings/types/types.ts @@ -47,7 +47,6 @@ export type CursorPermissionsState = { }; export type CodeEditorSettingsState = { - theme: 'dark' | 'light'; wordWrap: boolean; showMinimap: boolean; lineNumbers: boolean; diff --git a/src/components/settings/view/Settings.tsx b/src/components/settings/view/Settings.tsx index 96eaa0c6..72499556 100644 --- a/src/components/settings/view/Settings.tsx +++ b/src/components/settings/view/Settings.tsx @@ -168,7 +168,6 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }: Set projectSortOrder={projectSortOrder} onProjectSortOrderChange={setProjectSortOrder} codeEditorSettings={codeEditorSettings} - onCodeEditorThemeChange={(value) => updateCodeEditorSetting('theme', value)} onCodeEditorWordWrapChange={(value) => updateCodeEditorSetting('wordWrap', value)} onCodeEditorShowMinimapChange={(value) => updateCodeEditorSetting('showMinimap', value)} onCodeEditorLineNumbersChange={(value) => updateCodeEditorSetting('lineNumbers', value)} diff --git a/src/components/settings/view/tabs/AppearanceSettingsTab.tsx b/src/components/settings/view/tabs/AppearanceSettingsTab.tsx index b320ec5f..7b11645a 100644 --- a/src/components/settings/view/tabs/AppearanceSettingsTab.tsx +++ b/src/components/settings/view/tabs/AppearanceSettingsTab.tsx @@ -11,7 +11,6 @@ type AppearanceSettingsTabProps = { projectSortOrder: ProjectSortOrder; onProjectSortOrderChange: (value: ProjectSortOrder) => void; codeEditorSettings: CodeEditorSettingsState; - onCodeEditorThemeChange: (value: 'dark' | 'light') => void; onCodeEditorWordWrapChange: (value: boolean) => void; onCodeEditorShowMinimapChange: (value: boolean) => void; onCodeEditorLineNumbersChange: (value: boolean) => void; @@ -22,7 +21,6 @@ export default function AppearanceSettingsTab({ projectSortOrder, onProjectSortOrderChange, codeEditorSettings, - onCodeEditorThemeChange, onCodeEditorWordWrapChange, onCodeEditorShowMinimapChange, onCodeEditorLineNumbersChange, @@ -69,17 +67,6 @@ export default function AppearanceSettingsTab({ - - onCodeEditorThemeChange(enabled ? 'dark' : 'light')} - ariaLabel={t('appearanceSettings.codeEditor.theme.label')} - /> - -