/* ============================================ Dark Mode Styles for Ananke Theme Activated via [data-theme="dark"] on ============================================ */ /* --- 過渡動畫 --- */ html { transition: background-color 0.3s ease, color 0.3s ease; } /* --- 主體背景與文字 --- */ [data-theme="dark"] body { background-color: #1a1a2e !important; color: #b3b3b3 !important; } /* --- 主要內容區 --- */ [data-theme="dark"] main { background-color: #1a1a2e; color: #b3b3b3; } [data-theme="dark"] .nested-copy-line-height, [data-theme="dark"] .nested-copy-line-height * { color: #b3b3b3; } /* --- 文章卡片/摘要區 --- */ [data-theme="dark"] .bg-white { background-color: #16213e !important; } [data-theme="dark"] .bg-near-white { background-color: #1a1a2e !important; } /* --- Header & Footer（已是深色，微調） --- */ [data-theme="dark"] .bg-black { background-color: #0f0f23 !important; } [data-theme="dark"] .bg-black-60 { background-color: rgba(15, 15, 35, 0.75) !important; } [data-theme="dark"] footer { background-color: #0f0f23 !important; } /* --- 連結 --- */ [data-theme="dark"] a { color: #5199d4; } [data-theme="dark"] a:hover { color: #74afd6; } /* 導航列連結保持白色 */ [data-theme="dark"] nav a, [data-theme="dark"] footer a { color: inherit; } [data-theme="dark"] .hover-white:hover { color: #ffffff !important; } /* --- 標題 --- */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4 { color: #c8c8c8; } /* Hero 標題保持白色 */ [data-theme="dark"] header h1, [data-theme="dark"] header h2 { color: inherit; } /* --- 程式碼區塊 --- */ [data-theme="dark"] pre { background-color: #2d2d44 !important; color: #b3b3b3; } [data-theme="dark"] code { background-color: #2d2d44; color: #c9a044; } [data-theme="dark"] pre code { background-color: transparent; } /* --- 表格 --- */ [data-theme="dark"] table { border-color: #444; } [data-theme="dark"] th { background-color: #16213e; color: #b3b3b3; border-color: #444; } [data-theme="dark"] td { border-color: #444; color: #b3b3b3; } [data-theme="dark"] tr:nth-child(even) { background-color: rgba(255, 255, 255, 0.05); } /* --- 引用區塊 --- */ [data-theme="dark"] blockquote { border-left-color: #64b5f6; color: #8f8f8f; background-color: rgba(255, 255, 255, 0.03); } /* --- 水平線 --- */ [data-theme="dark"] hr { border-color: #444; } /* --- 圖片亮度微調 --- */ [data-theme="dark"] img { filter: brightness(0.9); } /* featured image 不調暗 */ [data-theme="dark"] header img, [data-theme="dark"] .cover img { filter: none; } /* --- 分頁器 --- */ [data-theme="dark"] .pagination a { color: #5199d4; } /* --- 標籤/分類 --- */ [data-theme="dark"] .tag, [data-theme="dark"] .category { color: #5199d4; } /* --- Tachyons 顏色覆寫 --- */ [data-theme="dark"] .dark-gray, [data-theme="dark"] .mid-gray, [data-theme="dark"] .near-black { color: #999999 !important; } [data-theme="dark"] .black-70, [data-theme="dark"] .black-80, [data-theme="dark"] .black-90, [data-theme="dark"] .black { color: #b3b3b3 !important; } [data-theme="dark"] .gray { color: #808080 !important; } [data-theme="dark"] .silver { color: #8f8f8f !important; } [data-theme="dark"] .light-silver { color: #a8a8a8 !important; } /* --- Dark Mode Toggle 按鈕 --- */ #dark-mode-toggle { font-size: 1.25rem; border: none; background: transparent; cursor: pointer; opacity: 0.9; transition: opacity 0.2s ease; vertical-align: middle; } #dark-mode-toggle:hover { opacity: 1; }