/* ============================================================ theme.css — 全站 Night Mode（深色模式） ------------------------------------------------------------ 啟用方式：由各頁 內嵌的小腳本依「時間 / 系統設定」 在 上加 .dark class（見各頁 inline script）。 本檔只負責「.dark 狀態下的配色覆寫」，不含任何切換邏輯。 設計原則： - 各頁原本用 :root 定義淺色 CSS 變數，這裡用 html.dark 覆寫， 靠 specificity（html.dark = 0,1,1 > :root = 0,1,0）勝出， 與載入順序無關。 - 顏色語意維持不變（--white=表面、--gray-100=頁底、 --gray-900=主文字…），只是把數值換成深色版。 ============================================================ */ /* ── 跨頁切換：交叉淡入淡出（View Transitions）── 支援的瀏覽器（Chrome / Edge / Safari 新版）自動以淡入淡出銜接前後頁， 不支援者優雅降級為一般導覽（白閃由下方 color-scheme / html 底色處理）。 */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.32s; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } /* html 底色基準：消除跨頁導覽空檔的白底閃爍，並蓋住 overscroll 區域。 各頁 body 仍會以自己的底色畫在上層，這層只在切換瞬間 / 回彈時可見。 */ html { color-scheme: light; background-color: #f3f4f6; } html.dark { color-scheme: dark; /* 讓原生捲軸、表單控制項、日期選擇器跟著變深 */ background-color: #121214; /* 深色底色基準，搭配 inline colorScheme 杜絕白閃 */ /* ── 通用 gray 量表（review / video-review / project / client / upload）── 語意：--white=卡片表面、--gray-100=頁面底色、--gray-900=主文字 */ --white: #1c1c20; /* 表面（卡片 / 導覽列 / 輸入框背景） */ --gray-50: #26262c; /* 略浮起的次表面 / hover 列 */ --gray-100: #141417; /* 頁面底色（body） */ --gray-200: #34343c; /* 邊框 / 分隔線 */ --gray-300: #3f3f49; /* 較明顯的邊框 / 分隔符 */ --gray-400: #71717a; /* 弱化圖示 */ --gray-500: #a1a1aa; /* 次要文字 */ --gray-600: #b4b4bd; --gray-700: #d4d4dc; /* 強次要文字 */ --gray-800: #e4e4ea; --gray-900: #ededf2; /* 主要文字 */ --primary: #6366f1; --primary-hover: #818cf8; --primary-light: rgba(99, 102, 241, 0.18); --danger: #f87171; --danger-light: rgba(248, 113, 113, 0.15); --success: #4ade80; --success-light: rgba(74, 222, 128, 0.15); --warning: #fbbf24; --warning-light: rgba(251, 191, 36, 0.15); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.55); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.55); /* ── 首頁 Dashboard（index.html）專用量表 ── */ --bg: #0d0d0f; --ink: #ededf2; --ink-soft: #a6a6ad; --ink-mute: #6c6c74; --line: rgba(255, 255, 255, 0.13); --card: #18181b; --card-hover: #202024; --blue: #6b8aff; --blue-soft: rgba(107, 138, 255, 0.18); --blue-ring: rgba(107, 138, 255, 0.40); /* ── 登入頁（login.html）專用量表 ── */ --color-bg: #0d0d0f; --color-surface: #1a1a1e; --color-border: #3a3a42; --color-text-primary: #ededf2; --color-text-secondary:#a1a1aa; --color-error-bg: rgba(248, 113, 113, 0.14); --color-error-border: rgba(248, 113, 113, 0.40); --color-error-text: #f87171; --color-primary-ring: rgba(99, 102, 241, 0.40); } /* ── 修正：被當成「白色文字」用的變數 / 寫死色，深色下要維持白字 ── .btn-primary / .name-save-btn 的底色是 --primary（靛藍），文字必須維持白色 */ html.dark .btn-primary, html.dark .name-save-btn { color: #ffffff; } /* 品牌字標 logo.svg 是單色近黑（#0f0f0e），深色底下幾乎看不見。 它沒有彩色部分，用 invert 反相成柔白即可，不會破壞色相。 */ html.dark img[src*="logo.svg"] { filter: invert(1); } /* index.html 的 .copy-btn 寫死了淺色背景（預設 rgba(255,255,255,.6)、hover #fff、 已複製 #111），深色下會變成看不到字的淺灰方塊，這裡改用深色表面。 */ html.dark .copy-btn { background: rgba(255, 255, 255, 0.06); border-color: var(--line); color: var(--ink-soft); } html.dark .copy-btn:hover { background: var(--card-hover); color: var(--ink); border-color: var(--ink); } html.dark .copy-btn.is-copied { background: var(--ink); color: var(--card); border-color: var(--ink); } /* body 底色切換時的柔和過渡（僅在 18:00／06:00 邊界即時翻轉時可見； 初次載入不會觸發動畫） */ body { transition: background-color 0.4s ease, color 0.4s ease; }