diff --git a/src/components/README.md b/src/components/README.md
index 75b3912..fbc7f03 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
-<script setup lang="ts">
-import { useTheme } from '@/composables/useTheme'
-
-const { theme: _theme, isDark: _isDark, setTheme: _setTheme, toggleTheme: _toggleTheme } = useTheme()
-</script>
-```
-
-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 `<html>`.
+- Monaco editor themes are derived from `appStore.uiThemeType` in `useMonacoEditor`.
diff --git a/src/components/SQLEditor.vue b/src/components/SQLEditor.vue
index f84e08f..ac0fc5e 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<HTMLElement | null>(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 5a982fd..0000000
--- a/src/components/layout/ThemeToggle.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<script setup lang="ts">
-import { Button } from '@/components/ui/button'
-import { useTheme } from '@/composables/useTheme'
-
-const { isDark, toggleTheme } = useTheme()
-</script>
-
-<template>
-  <Button variant="ghost" size="icon" class="h-8 w-8" @click="toggleTheme">
-    <span v-if="isDark" class="i-carbon-sun h-4 w-4" />
-    <span v-else class="i-carbon-moon h-4 w-4" />
-  </Button>
-</template>
diff --git a/src/components/markdown-render.vue b/src/components/markdown-render.vue
index b0d45f1..4863caa 100644
--- a/src/components/markdown-render.vue
+++ b/src/components/markdown-render.vue
@@ -1,26 +1,35 @@
 <script setup lang="ts">
 import DOMPurify from 'dompurify'
 import hljs from 'highlight.js'
+import hljsThemeDarkUrl from 'highlight.js/styles/atom-one-dark.css?url'
+import hljsThemeLightUrl from 'highlight.js/styles/atom-one-light.css?url'
 import MarkdownIt from 'markdown-it'
 import taskLists from 'markdown-it-task-lists'
-import { onMounted, onUnmounted, ref, watch } from 'vue'
+import { onUnmounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { toast } from '@/composables/useNotifications'
+import { ThemeType, useAppStore } from '@/store/appStore'
 
 const props = defineProps<{
   markdown: string
 }>()
 
 const { t } = useI18n()
+const appStore = useAppStore()
 
-// Lazy-load highlight.js theme CSS after mount to avoid blocking initial render
-let _themeLoaded = false
-onMounted(() => {
-  if (!_themeLoaded) {
-    _themeLoaded = true
-    import('highlight.js/styles/atom-one-dark.css')
+// Load the highlight.js theme matching the current UI theme via a single
+// module-level <link> so it can be swapped at runtime without flicker.
+let highlightLink: HTMLLinkElement | null = null
+function applyHighlightTheme(uiThemeType: Exclude<ThemeType, ThemeType.AUTO>) {
+  const href = uiThemeType === ThemeType.DARK ? hljsThemeDarkUrl : hljsThemeLightUrl
+  if (!highlightLink) {
+    highlightLink = document.createElement('link')
+    highlightLink.rel = 'stylesheet'
+    document.head.appendChild(highlightLink)
   }
-})
+  highlightLink.href = href
+}
+watch(() => appStore.uiThemeType, applyHighlightTheme, { immediate: true })
 
 const parsedMarkdown = ref('')
 
diff --git a/src/composables/useMonacoEditor.ts b/src/composables/useMonacoEditor.ts
index 0b7142c..e25fe53 100644
--- a/src/composables/useMonacoEditor.ts
+++ b/src/composables/useMonacoEditor.ts
@@ -5,6 +5,7 @@ import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
 
 import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
 import { onBeforeUnmount } from 'vue'
+import { ThemeType, useAppStore } from '@/store/appStore'
 import { hasGrammar } from './sqlCompletion/dialects'
 import { getCompletionProvider } from './sqlCompletion/provider'
 import {
@@ -15,7 +16,6 @@ import {
   parseSqlStatements,
   SQL_EXECUTE_GUTTER_CLASS,
 } from './useSqlStatements'
-import { useTheme } from './useTheme'
 
 // Import only SQL-related grammars instead of all Monaco languages
 // (Typescript/CSS/HTML/JSON workers alone add ~8MB to the bundle).
@@ -62,7 +62,7 @@ export function useMonacoEditor(containerRef: Ref<HTMLElement | null>, initialVa
   let parsedStatements: SqlStatement[] = []
   let registeredCallbacks: EditorCallbacks | null = null
   let refreshDebounceTimer: ReturnType<typeof setTimeout> | null = null
-  const { isDark } = useTheme()
+  const appStore = useAppStore()
 
   /** Monaco ships grammars only for sql/mysql/pgsql; other dialect ids use the generic sql grammar. Completion still resolves the real dialect profile per-editor. */
   const resolveEditorLanguage = (id: SQLDialect): SQLDialect => hasGrammar(id) ? id : 'sql'
@@ -98,7 +98,7 @@ export function useMonacoEditor(containerRef: Ref<HTMLElement | null>, initialVa
     editor = monaco.editor.create(containerRef.value, {
       value: initialValue.value,
       language: resolveEditorLanguage(options.language || 'sql'),
-      theme: isDark.value ? 'vs-dark' : 'vs',
+      theme: appStore.uiThemeType === ThemeType.DARK ? 'vs-dark' : 'vs',
       automaticLayout: true,
       readOnly: options.readOnly || false,
       minimap: { enabled: options.minimap !== false },
diff --git a/src/composables/useTheme.ts b/src/composables/useTheme.ts
deleted file mode 100644
index dde8926..0000000
--- a/src/composables/useTheme.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import { onBeforeUnmount, onMounted, ref } from 'vue'
-
-export type Theme = 'dark' | 'light' | 'system'
-
-const THEME_STORAGE_KEY = 'sqlkit-theme'
-
-export function useTheme() {
-  const theme = ref<Theme>('system')
-  const isDark = ref(false)
-  let mediaQuery: MediaQueryList | null = null
-  let handleChange: (() => void) | null = null
-
-  const getSystemTheme = (): 'dark' | 'light' =>
-    window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
-
-  const applyTheme = (newTheme: Theme) => {
-    const root = document.documentElement
-
-    let effectiveTheme: 'dark' | 'light'
-    if (newTheme === 'system') {
-      effectiveTheme = getSystemTheme()
-    }
-    else {
-      effectiveTheme = newTheme
-    }
-
-    if (effectiveTheme === 'dark') {
-      root.classList.add('dark')
-      isDark.value = true
-    }
-    else {
-      root.classList.remove('dark')
-      isDark.value = false
-    }
-  }
-
-  const setTheme = (newTheme: Theme) => {
-    theme.value = newTheme
-    try {
-      localStorage.setItem(THEME_STORAGE_KEY, newTheme)
-    }
-    catch (error) {
-      console.error('Failed to save theme preference:', error)
-    }
-    applyTheme(newTheme)
-  }
-
-  const toggleTheme = () => {
-    const newTheme = isDark.value ? 'light' : 'dark'
-    setTheme(newTheme)
-  }
-
-  onMounted(() => {
-    let savedTheme: Theme | null = null
-    try {
-      savedTheme = localStorage.getItem(THEME_STORAGE_KEY) as Theme | null
-    }
-    catch (error) {
-      console.error('Failed to load theme preference:', error)
-    }
-    theme.value = savedTheme || 'system'
-    applyTheme(theme.value)
-
-    mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
-    handleChange = () => {
-      if (theme.value === 'system') {
-        applyTheme('system')
-      }
-    }
-    mediaQuery.addEventListener('change', handleChange)
-  })
-
-  onBeforeUnmount(() => {
-    if (mediaQuery && handleChange) {
-      mediaQuery.removeEventListener('change', handleChange)
-    }
-  })
-
-  return {
-    theme,
-    isDark,
-    setTheme,
-    toggleTheme,
-  }
-}
diff --git a/src/store/appStore.ts b/src/store/appStore.ts
index b4a62c4..6e273e9 100644
--- a/src/store/appStore.ts
+++ b/src/store/appStore.ts
@@ -306,7 +306,7 @@ export const useAppStore = defineStore('app', {
       this.sidebarCollapsed = collapsed
     },
     getEditorTheme() {
-      return this.uiThemeType === ThemeType.DARK ? 'vs-dark' : 'vs-light'
+      return this.uiThemeType === ThemeType.DARK ? 'vs-dark' : 'vs'
     },
 
     // ── Provider CRUD ────────────────────────────────────────────────────
diff --git a/tests/store/appStore.test.ts b/tests/store/appStore.test.ts
index 882f7c9..df04532 100644
--- a/tests/store/appStore.test.ts
+++ b/tests/store/appStore.test.ts
@@ -202,11 +202,11 @@ describe('appStore', () => {
   })
 
   describe('getEditorTheme', () => {
-    it('should return vs-light for light theme', () => {
+    it('should return vs for light theme', () => {
       const store = useAppStore()
       store.uiThemeType = ThemeType.LIGHT
 
-      expect(store.getEditorTheme()).toBe('vs-light')
+      expect(store.getEditorTheme()).toBe('vs')
     })
 
     it('should return vs-dark for dark theme', () => {
