Fix color scheme switching and click animation

- Add colors prop to EquationDisplay and DescriptionPanel
- Watch colors prop instead of termOrder for reactivity
- Change transition from 'all' to 'opacity' to prevent layout shifts

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: stared

src/components/CentralPanel.vue

@@ -8,6 +8,7 @@
       :term-order="termOrder"
       :active-term="activeTerm"
       :get-term-color="getTermColor"
+      :colors="colors"
       @hover="setHover"
       @click="handleTermClick"
     />
@@ -17,6 +18,7 @@
       :term-order="termOrder"
       :active-term="activeTerm"
       :get-term-color="getTermColor"
+      :colors="colors"
       @hover="setHover"
       @click="handleTermClick"
     />

src/components/equation/DescriptionPanel.vue

@@ -5,12 +5,14 @@
 <script setup lang="ts">
 import { ref, watch, nextTick, onMounted } from 'vue'
 import { applyTermColors, setupTermListeners, getTermElements } from '../../utils/termDom'
+import type { ColorScheme } from '../../export'
 
 const props = defineProps<{
   description: string
   termOrder: string[]
   activeTerm: string | null
   getTermColor: (term: string) => string
+  colors: ColorScheme
 }>()
 
 const emit = defineEmits<{
@@ -45,7 +47,7 @@ watch(() => props.description, async () => {
 }, { immediate: true })
 
 // Re-apply colors when color scheme changes
-watch(() => props.termOrder, () => {
+watch(() => props.colors, () => {
   if (descriptionRef.value) applyTermColors(descriptionRef.value, props.getTermColor)
 })
 

src/components/equation/EquationDisplay.vue

@@ -23,11 +23,14 @@ import { ref, computed, watch, nextTick, onMounted, onUnmounted } from 'vue'
 import katex from 'katex'
 import { applyTermColors, setupTermListeners, enableTermPointerEvents } from '../../utils/termDom'
 
+import type { ColorScheme } from '../../export'
+
 const props = defineProps<{
   latex: string
   termOrder: string[]
   activeTerm: string | null
   getTermColor: (term: string) => string
+  colors: ColorScheme
 }>()
 
 const emit = defineEmits<{
@@ -135,7 +138,7 @@ function renderKatex() {
 
 // Watches
 watch(() => props.latex, renderKatex, { immediate: true })
-watch(() => props.termOrder, () => {
+watch(() => props.colors, () => {
   if (katexRef.value) applyTermColors(katexRef.value, props.getTermColor)
 })
 watch(() => props.activeTerm, calculateHighlightRects, { immediate: true })
@@ -187,7 +190,7 @@ onUnmounted(() => resizeObserver?.disconnect())
 }
 
 :deep([class*="term-"]) {
-  transition: all 0.2s ease;
+  transition: opacity 0.2s ease;
   border-radius: 4px;
   cursor: pointer;
   position: relative;