big

frontend/src/App.vue

@@ -128,9 +128,14 @@
             <PaletteIcon :size="16" class="text-secondary" />
             <span class="text-xs font-black uppercase tracking-widest opacity-60">테마 설정</span>
           </div>
+          <div class="form-control w-full">
+            <select v-model="currentTheme" class="select select-bordered select-sm w-full bg-base-100 font-bold text-xs">
+              <option v-for="t in themes" :key="t" :value="t">{{ t }}</option>
+            </select>
+          </div>
           <button @click="randomizeTheme" class="btn btn-outline btn-sm btn-secondary w-full text-xs font-bold gap-2">
             <ShuffleIcon :size="14" />
-            랜덤 테마: {{ currentTheme }}
+            랜덤 테마
           </button>
         </div>
       </aside>
@@ -276,6 +281,7 @@ const currentTheme = ref(localStorage.getItem('app-theme') || 'dark')
 // Sync the theme to html element directly for DaisyUI scoping
 watch(currentTheme, (newTheme) => {
   document.documentElement.setAttribute('data-theme', newTheme)
+  localStorage.setItem('app-theme', newTheme)
 }, { immediate: true })
 
 function randomizeTheme() {

frontend/src/main.ts

@@ -3,6 +3,7 @@ import { createPinia } from 'pinia'
 import router from './router'
 import App from './App.vue'
 import './style.css'
+import 'daisyui/themes.css'
 
 const app = createApp(App)
 

frontend/src/style.css

@@ -7,8 +7,6 @@ html, body, #app {
     height: 100%;
     margin: 0;
     padding: 0;
-    background-color: #1b2636;
-    color: white;
     font-family: 'Inter', sans-serif;
 }
 

frontend/src/views/AdminUserView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="p-8 max-w-6xl mx-auto space-y-8 select-none" data-theme="dark">
+  <div class="p-8 max-w-6xl mx-auto space-y-8 select-none">
     <!-- Header -->
     <div class="flex items-center justify-between pb-6 border-b border-base-content/10">
       <div class="flex items-center gap-4">

frontend/src/views/QuizView.vue

@@ -876,11 +876,13 @@ function triggerMermaid() {
   })
 }
 
-// 문제 전환 시 구문 강조 및 mermaid 다시 적용
+// 문제 전환 또는 최초 로드 시 구문 강조 및 mermaid 적용
-watch(currentIndex, () => {
+watch(currentQuestion, (newVal) => {
+  if (newVal) {
     applyHighlighting()
     triggerMermaid()
-})
+  }
+}, { immediate: true })
 
 // 피드백/해설이 노출되거나 AI 해설이 업데이트될 때도 mermaid 렌더링
 watch(showFeedback, (newVal) => {

frontend/src/views/SettingsView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="p-8 max-w-4xl mx-auto space-y-8" data-theme="dark">
+  <div class="p-8 max-w-4xl mx-auto space-y-8">
     <!-- Header -->
     <div class="flex items-center justify-between pb-6 border-b border-base-content/10">
       <div class="flex items-center gap-4">

frontend/tailwind.config.js

@@ -8,6 +8,13 @@ export default {
   },
   plugins: [require("daisyui")],
   daisyui: {
-    themes: true,
+    themes: [
+      "light", "dark", "cupcake", "bumblebee", "emerald", "corporate", 
+      "synthwave", "retro", "cyberpunk", "valentine", "halloween", 
+      "garden", "forest", "aqua", "lofi", "pastel", "fantasy", 
+      "wireframe", "black", "luxury", "dracula", "cmyk", "autumn", 
+      "business", "acid", "lemonade", "night", "coffee", "winter", 
+      "dim", "nord", "sunset", "caramellatte", "abyss", "silk"
+    ],
   },
 }