Light Mode - daniel-qa/Vue GitHub Wiki

:class="{ 'light-mode': !isDark }"

它的語法本質

這其實就是一個 JavaScript 物件：

{
  'light-mode': !isDark
}

Vue 會解讀成：

key = class 名稱

value = 是否套用（true / false）

🔹 Vue 在背後做的事

👉 如果 value === true

加上 class

<div class="light-mode"></div>

👉 如果 value === false

不加

<div></div>
  • 截圖貼 PPT 用，深色背景截圖放進 PPT 很醜。

這個需求很實際，而且很常見。

這樣的話目標很明確，Light Mode 只需要：

背景變白
文字變深色
圖表顏色調整（深色系改成適合白底的顏色）

不需要做得很完整，能截圖好看就夠了。

Light Mode 設計方向調整

如果目的是截圖 → 貼 PPT，Light Mode 不只是「把深色換成淺色」，而是：

背景接近白色或極淺灰，截圖後邊界不明顯，融入 PPT 更自然

移除所有螢光 glow 效果，這在淺色下本來就不好看

圖表線條加深，淺色背景下原本的青藍色線條會變得很淡，需要調整

數值文字改深色，確保截圖後清晰可讀

保留基本的藍色調，讓整體還有科技/教育感，不要變成普通表格

  • 反轉模式 (filter: invert)

只適合黑白模式，彩色的話，會有問題

#05d5ff 亮藍，反轉後變 #fa2a00 橘紅

淺色模式設計原則（不是單純反色）

1️⃣ 背景層級要分明

  • 深色：靠「亮線 + glow」撐層次

  • 淺色, 要改成：

靠「灰階 + 陰影 + 邊框」

建議層級：

如果 UI 是這種：

👉 科技藍 + 發光線條（很帥，但只適合暗色）

淺色模式要改成：

❌ 移除 glow / outer shadow

✅ 改成「淡色線條 + 細邊框」

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