Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🎯 為什麼要這樣做
網站原先只支援固定深色主題，為提升使用者體驗，需新增淺色主題並允許使用者手動切換。同時要求系統能記憶使用者偏好，並在不同主題之間提供平滑的視覺過渡效果。
CSS 主題 Token 系統
:root的顏色 token 拆分為[data-theme="dark"]與[data-theme="light"]兩套獨立色彩系統useTheme Hook
prefers-color-scheme→ 預設深色<html data-theme="...">屬性與 localStorage，確保刷新後仍保留偏好theme狀態值與toggleTheme切換函式供元件使用ThemeToggle 元件
cubic-bezier(0.34, 1.56, 0.64, 1)彈跳動畫，增加操作的趣味回饋感aria-label、aria-pressed、focus-visible輪廓）Navbar 與 App 整合
useThemeHook，取得theme與toggleThemetheme與toggleTheme以 props 傳遞至 Navbar🧪 測試步驟
測試案例 1：主題切換基本功能
測試案例 2：主題偏好持久化
測試案例 3：跟隨系統偏好
sp-theme值測試案例 4：ThemeToggle 動畫與無障礙
測試案例 5：Navbar 主題過渡