/** * Bubblegum 深色模式 (v1.2.0 · 第三阶段 3.1) * * 通过 元素的 data-theme 属性激活深色模式： * - data-theme="dark" 用户/站点强制深色 * - data-theme="light" 用户/站点强制亮色 * - data-theme="auto" 跟随系统 prefers-color-scheme（默认） * * 深色变量覆盖动态注入的 :root（bubblegum-dynamic-colors）， * 并修复 style.css / DynamicStyles.php 中的硬编码浅色值。 */ /* ============================================================ * A) 变量覆盖（供 body 及组件引用） * 通过一套 :root[data-theme] 声明，避免重复定义 * ============================================================ */ /* A1. 跟随系统：系统偏好深色时，auto 状态启用深色变量 */ @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --primary-color: #ff8fab; --secondary-color: #4ecdc4; --accent-color: #ffd166; --bg-primary: #1a1226; --bg-secondary: #241a33; --text-dark: #f3e9fb; --text-light: #ffffff; --shadow-light: rgba(255, 143, 171, 0.25); --shadow-medium: rgba(0, 0, 0, 0.45); --gradient-primary: linear-gradient(135deg, #ff8fab 0%, #4ecdc4 100%); } } /* A2. 用户/站点强制深色 */ :root[data-theme="dark"] { --primary-color: #ff8fab; --secondary-color: #4ecdc4; --accent-color: #ffd166; --bg-primary: #1a1226; --bg-secondary: #241a33; --text-dark: #f3e9fb; --text-light: #ffffff; --shadow-light: rgba(255, 143, 171, 0.25); --shadow-medium: rgba(0, 0, 0, 0.45); --gradient-primary: linear-gradient(135deg, #ff8fab 0%, #4ecdc4 100%); } /* ============================================================ * B) 深色场景选择器（两种触发方式共用一套样式规则） * 通过给两种属性状态叠加类名的方式统一处理 * ============================================================ */ /* 系统偏好深色 且 处于 auto 状态 */ @media (prefers-color-scheme: dark) { :root[data-theme="auto"] body { color: var(--text-dark); background-color: var(--bg-primary); background-image: radial-gradient(circle at 20% 30%, rgba(255, 143, 171, 0.10) 0%, transparent 20%), radial-gradient(circle at 80% 70%, rgba(78, 205, 196, 0.10) 0%, transparent 25%); } :root[data-theme="auto"] a { color: #ff8fab; } :root[data-theme="auto"] a:hover { color: #ffb6c1; } :root[data-theme="auto"] .site-header { background: rgba(30, 20, 44, 0.75); border: 2px solid #382a4d; box-shadow: var(--shadow-medium), 0 6px 0 #2a1e3d; } :root[data-theme="auto"] .site-title a, :root[data-theme="auto"] .site-description { color: var(--text-dark); } :root[data-theme="auto"] .main-navigation a, :root[data-theme="auto"] .menu-toggle { color: var(--text-dark); } :root[data-theme="auto"] .bubble-speech, :root[data-theme="auto"] .bubble-widget, :root[data-theme="auto"] .card, :root[data-theme="auto"] .entry-content, :root[data-theme="auto"] .widget { background: var(--bg-secondary); color: var(--text-dark); } :root[data-theme="auto"] .breadcrumb-candy { background: rgba(36, 26, 51, 0.7); } :root[data-theme="auto"] .bubble-speech::before { border-right-color: var(--bg-secondary); } :root[data-theme="auto"] body .site-header.is-scrolled { background: rgba(26, 18, 38, 0.9) !important; } } /* 强制深色状态 */ :root[data-theme="dark"] body { color: var(--text-dark); background-color: var(--bg-primary); background-image: radial-gradient(circle at 20% 30%, rgba(255, 143, 171, 0.10) 0%, transparent 20%), radial-gradient(circle at 80% 70%, rgba(78, 205, 196, 0.10) 0%, transparent 25%); } :root[data-theme="dark"] a { color: #ff8fab; } :root[data-theme="dark"] a:hover { color: #ffb6c1; } :root[data-theme="dark"] .site-header { background: rgba(30, 20, 44, 0.75); border: 2px solid #382a4d; box-shadow: var(--shadow-medium), 0 6px 0 #2a1e3d; } :root[data-theme="dark"] .site-title a, :root[data-theme="dark"] .site-description { color: var(--text-dark); } :root[data-theme="dark"] .main-navigation a, :root[data-theme="dark"] .menu-toggle { color: var(--text-dark); } :root[data-theme="dark"] .bubble-speech, :root[data-theme="dark"] .bubble-widget, :root[data-theme="dark"] .card, :root[data-theme="dark"] .entry-content, :root[data-theme="dark"] .widget { background: var(--bg-secondary); color: var(--text-dark); } :root[data-theme="dark"] .breadcrumb-candy { background: rgba(36, 26, 51, 0.7); } :root[data-theme="dark"] .bubble-speech::before { border-right-color: var(--bg-secondary); } :root[data-theme="dark"] body .site-header.is-scrolled { background: rgba(26, 18, 38, 0.9) !important; } /* ============================================================ * C) 主题切换按钮样式 * ============================================================ */ .bubblegum-theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 14px; margin-left: 12px; border: none; border-radius: 22px; background: linear-gradient(135deg, #ffb6c1 0%, #b0e0e6 100%); color: #5a3d52; font-size: 1.1em; font-weight: 600; cursor: pointer; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.1); transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease; } .bubblegum-theme-toggle:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(0, 0, 0, 0.12); } .bubblegum-theme-toggle:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1); } .bubblegum-theme-toggle:focus-visible { outline: 3px solid #f5576c; outline-offset: 2px; } .bubblegum-theme-toggle .theme-toggle-icon { font-size: 1.15em; } .bubblegum-theme-toggle .theme-toggle-label { font-size: 0.85em; } @media (max-width: 768px) { .bubblegum-theme-toggle .theme-toggle-label { display: none; } .bubblegum-theme-toggle { min-width: 44px; padding: 0 10px; margin-left: 8px; } } /* 尊重「减少动态效果」：禁用切换动画 */ @media (prefers-reduced-motion: reduce) { .bubblegum-theme-toggle, .bubblegum-theme-toggle:hover, .bubblegum-theme-toggle:active { transition: none; transform: none; } } /* ============================================ * v1.3.0 · 4.9 深色模式对比度复检微调 * 针对深色背景上对比不足的组件补充高对比色 * ============================================ */ @media (prefers-color-scheme: dark) { :root[data-theme="auto"] .back-to-top-link, :root[data-theme="auto"] .back-to-top-link:hover { background: #3a2f50; color: #f3e9fb; border-color: #554a70; } :root[data-theme="auto"] .back-to-top-link { box-shadow: 0 5px 0 #2a1e3d; } :root[data-theme="auto"] .back-to-top-link:hover { box-shadow: 0 2px 0 #2a1e3d; } :root[data-theme="auto"] .widget-title { color: #ffb6c1; } :root[data-theme="auto"] .site-description { color: #b9a8d0; } :root[data-theme="auto"] .entry-title a { color: #ffc2d6; } :root[data-theme="auto"] .site-info, :root[data-theme="auto"] .site-info a { color: #b9a8d0; } :root[data-theme="auto"] .site-info a:hover { color: #ffb6c1; } :root[data-theme="auto"] .pagination-candy .page-numbers, :root[data-theme="auto"] .pagination-candy-wrapper .page-numbers { color: #cbb8e0; background: #2a1e3d; border-color: #4a3b6a; } :root[data-theme="auto"] .pagination-candy .page-numbers.current, :root[data-theme="auto"] .pagination-candy-wrapper .page-numbers.current { background: #ff8fab; color: #1a1226; border-color: #ff8fab; } :root[data-theme="auto"] .pagination-candy .page-numbers:hover, :root[data-theme="auto"] .pagination-candy-wrapper .page-numbers:hover { background: #3a2f50; color: #ffc2d6; } } :root[data-theme="dark"] .back-to-top-link, :root[data-theme="dark"] .back-to-top-link:hover { background: #3a2f50; color: #f3e9fb; border-color: #554a70; } :root[data-theme="dark"] .back-to-top-link { box-shadow: 0 5px 0 #2a1e3d; } :root[data-theme="dark"] .back-to-top-link:hover { box-shadow: 0 2px 0 #2a1e3d; } :root[data-theme="dark"] .widget-title { color: #ffb6c1; } :root[data-theme="dark"] .site-description { color: #b9a8d0; } :root[data-theme="dark"] .entry-title a { color: #ffc2d6; } :root[data-theme="dark"] .site-info, :root[data-theme="dark"] .site-info a { color: #b9a8d0; } :root[data-theme="dark"] .site-info a:hover { color: #ffb6c1; } :root[data-theme="dark"] .pagination-candy .page-numbers, :root[data-theme="dark"] .pagination-candy-wrapper .page-numbers { color: #cbb8e0; background: #2a1e3d; border-color: #4a3b6a; } :root[data-theme="dark"] .pagination-candy .page-numbers.current, :root[data-theme="dark"] .pagination-candy-wrapper .page-numbers.current { background: #ff8fab; color: #1a1226; border-color: #ff8fab; } :root[data-theme="dark"] .pagination-candy .page-numbers:hover, :root[data-theme="dark"] .pagination-candy-wrapper .page-numbers:hover { background: #3a2f50; color: #ffc2d6; }