From a6f4967a839f02ab4039866d654bbb80ba35f03b Mon Sep 17 00:00:00 2001 From: blankll Date: Wed, 12 Aug 2026 10:51:39 +0800 Subject: [PATCH] fix(theme): use Pinia appStore as single theme source for editor The Monaco editor and markdown code highlighting read theme from a separate useTheme composable (localStorage 'sqlkit-theme', default 'system') instead of the appStore. Every editor mount created fresh composable instances whose onMounted re-applied the auto-detected system theme, overwriting the user's dark/light choice from Settings. Unify on appStore.uiThemeType as the single source of truth: - useMonacoEditor/SQLEditor: derive isDark from appStore.uiThemeType - markdown-render: load atom-one-light/dark highlight theme by theme - getEditorTheme(): fix 'vs-light' to valid Monaco theme 'vs' - remove dead useTheme composable and ThemeToggle component --- src/components/README.md | 18 ++---- src/components/SQLEditor.vue | 5 +- src/components/layout/ThemeToggle.vue | 13 ---- src/components/markdown-render.vue | 25 +++++--- src/composables/useMonacoEditor.ts | 6 +- src/composables/useTheme.ts | 85 --------------------------- src/store/appStore.ts | 2 +- tests/store/appStore.test.ts | 4 +- 8 files changed, 32 insertions(+), 126 deletions(-) delete mode 100644 src/components/layout/ThemeToggle.vue delete mode 100644 src/composables/useTheme.ts diff --git a/src/components/README.md b/src/components/README.md index 75b3912c..fbc7f03b 100644 --- a/src/components/README.md +++ b/src/components/README.md @@ -18,9 +18,8 @@ This directory contains the shadcn-vue UI components used in SQLKit. Located in `src/components/layout/`: - **AppLayout** - Main application layout wrapper -- **AppHeader** - Top navigation header with theme toggle +- **AppHeader** - Top navigation header - **AppSidebar** - Left sidebar navigation -- **ThemeToggle** - Dark/light mode toggle button ## Theme @@ -50,14 +49,9 @@ import { Input } from '@/components/ui/input' ## Theme System -The theme system uses the `useTheme` composable: +The theme system is managed by the Pinia `appStore` (`src/store/appStore.ts`): -```vue - -``` - -Theme preferences are persisted in localStorage and respect system preferences. +- `themeType` (`auto` | `dark` | `light`) is the user preference, persisted via pinia-plugin-persistedstate. +- `uiThemeType` (`dark` | `light`) is the resolved effective theme. +- `applyUiTheme` toggles the `theme` attribute and `.dark` class on ``. +- Monaco editor themes are derived from `appStore.uiThemeType` in `useMonacoEditor`. diff --git a/src/components/SQLEditor.vue b/src/components/SQLEditor.vue index f84e08fe..ac0fc5e1 100644 --- a/src/components/SQLEditor.vue +++ b/src/components/SQLEditor.vue @@ -7,7 +7,7 @@ import { useI18n } from 'vue-i18n' import { ProgressBar } from '@/components/ui/progress' import { useMonacoEditor } from '@/composables/useMonacoEditor' import { usePlatform } from '@/composables/usePlatform' -import { useTheme } from '@/composables/useTheme' +import { ThemeType, useAppStore } from '@/store/appStore' type Props = { modelValue?: string @@ -48,7 +48,8 @@ const emit = defineEmits<{ }>() const editorContainer = ref(null) -const { isDark } = useTheme() +const appStore = useAppStore() +const isDark = computed(() => appStore.uiThemeType === ThemeType.DARK) const { modifierKey, altKey } = usePlatform() const { t } = useI18n() diff --git a/src/components/layout/ThemeToggle.vue b/src/components/layout/ThemeToggle.vue deleted file mode 100644 index 5a982fdf..00000000 --- a/src/components/layout/ThemeToggle.vue +++ /dev/null @@ -1,13 +0,0 @@ - - - diff --git a/src/components/markdown-render.vue b/src/components/markdown-render.vue index b0d45f13..4863caab 100644 --- a/src/components/markdown-render.vue +++ b/src/components/markdown-render.vue @@ -1,26 +1,35 @@