Light Mode 渲染時機的問題 - daniel-qa/Vue GitHub Wiki

Scoped vs 全域的差別：

Scoped:
  div.topbox[data-v-abc123] path { } ← 選擇器變長，SVG <path> 沒 attribute
  ✗ 無法命中

全域:
  .dv-border-box-12 > svg path { } ← 簡單選擇器
  ✓ 直接命中
要素 你的做法 為什麼有效
全域 CSS <style> 不加 scoped 沒有 data-v-xxx 限制，能直接命中 SVG <path>
class 時機 mounted() → $nextTick() 加 class DataV 初始化前就套用 class，CSS 可覆蓋初始顏色
!important .theme-light .dv-border-box-12 { stroke: #93c5fd !important; } 優先度高於 DataV 預設樣式，強制覆蓋
  • 用 全域 CSS + 控制 class 的時機

方案為什麼有效

✅ 層級 1：全域 CSS（沒有 scoped）

<style> 不加 scoped → 沒有 data-v-xxx attribute
.theme-light .dv-border-box-12 { } 直接命中 SVG <path>

✅ 層級 2：class 加的時機很關鍵

mounted() 時：isDark = localStorage 讀取 ✓
$nextTick() 時：document.querySelector().classList.add('theme-light')
此時 DataV 還沒完全渲染 ⚠️

✅ 層級 3：!important 覆蓋 DataV 預設顏色

.theme-light .dv-border-box-12 > svg path { stroke: #93c5fd !important; }
CSS !important 優先度高於 DataV 初始化顏色

⚠️ 陷阱：如果 DataV 有 animate loop

requestAnimationFrame() { SVG.setAttribute('stroke', '#235fa7') }
每幀都重寫 → CSS !important 被覆蓋

🎯 為什麼你的方案沒觸發陷阱

你的 DataV (border-box-11 / border-box-12)

可能沒有 animate loop，或 animate 不改邊框顏色

所以 CSS !important 的覆蓋一直有效

⚠️ **GitHub.com Fallback** ⚠️