/** * Aurora Design System - Theme Toggle * 深色/浅色模式切换 * * 使用方法： * 1. 引入本文件 * 2. 在 标签上添加 data-theme="light" 或 "dark" * 3. 使用 theme-toggle.js 实现切换逻辑 */ /* ==================== 默认：深色模式 ==================== */ :root, [data-theme="dark"] { /* 背景 */ --bg-primary: #000000; --bg-secondary: #0a0a0a; --bg-tertiary: #1a0f2e; --bg-surface: rgba(255, 255, 255, 0.03); --bg-elevated: rgba(255, 255, 255, 0.05); /* 文字 */ --text-primary: #ffffff; --text-secondary: rgba(255, 255, 255, 0.8); --text-tertiary: rgba(255, 255, 255, 0.6); --text-muted: rgba(255, 255, 255, 0.4); /* 边框 */ --border-default: rgba(255, 255, 255, 0.08); --border-subtle: rgba(255, 255, 255, 0.05); --border-strong: rgba(255, 255, 255, 0.12); /* 玻璃效果 */ --glass-bg: rgba(255, 255, 255, 0.03); --glass-border: rgba(255, 255, 255, 0.08); /* 卡片悬浮 */ --card-hover-bg: rgba(255, 255, 255, 0.05); --card-hover-border: rgba(245, 158, 11, 0.3); /* 阴影 */ --shadow-color: rgba(0, 0, 0, 0.3); /* Hero 背景 */ --hero-bg: radial-gradient(ellipse at center, #1a0f2e 0%, #000 70%); /* 粒子颜色 */ --particle-color: rgba(245, 158, 11, 0.8); /* 脉冲光晕 */ --pulse-glow: rgba(245, 158, 11, 0.15); } /* ==================== 浅色模式 ==================== */ [data-theme="light"] { /* 背景 */ --bg-primary: #FAFAF9; --bg-secondary: #FFFFFF; --bg-tertiary: #FEF3E2; /* 浅琥珀色 */ --bg-surface: rgba(245, 158, 11, 0.05); --bg-elevated: rgba(245, 158, 11, 0.08); /* 文字 */ --text-primary: #1a1a1a; --text-secondary: rgba(0, 0, 0, 0.7); --text-tertiary: rgba(0, 0, 0, 0.5); --text-muted: rgba(0, 0, 0, 0.4); /* 边框 */ --border-default: rgba(0, 0, 0, 0.08); --border-subtle: rgba(0, 0, 0, 0.05); --border-strong: rgba(0, 0, 0, 0.12); /* 玻璃效果 */ --glass-bg: rgba(255, 255, 255, 0.8); --glass-border: rgba(245, 158, 11, 0.15); /* 卡片悬浮 */ --card-hover-bg: rgba(245, 158, 11, 0.08); --card-hover-border: rgba(245, 158, 11, 0.3); /* 阴影 */ --shadow-color: rgba(0, 0, 0, 0.1); /* Hero 背景 */ --hero-bg: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(124, 58, 237, 0.06) 100% ); /* 粒子颜色 */ --particle-color: rgba(245, 158, 11, 0.6); /* 脉冲光晕 */ --pulse-glow: rgba(245, 158, 11, 0.1); } /* ==================== 平滑过渡 ==================== */ body, .bento-item, .nav, .hero, .section { transition: background-color 0.3s ease, color 0.3s ease; } /* ==================== 主题特定样式 ==================== */ /* 深色模式专属 */ [data-theme="dark"] body { background: var(--bg-primary); color: var(--text-primary); } [data-theme="dark"] .hero { background: var(--hero-bg); } [data-theme="dark"] .nav { background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-default); } /* 浅色模式专属 */ [data-theme="light"] body { background: var(--bg-primary); color: var(--text-primary); } [data-theme="light"] .hero { background: var(--hero-bg); } [data-theme="light"] .nav { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-default); } [data-theme="light"] .hero-title { /* 浅色模式下，标题渐变调整 */ background: linear-gradient(135deg, var(--color-primary-700) 0%, var(--color-secondary-700) 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ==================== 通用样式调整 ==================== */ .bento-item { background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .bento-item:hover { background: var(--card-hover-bg); border-color: var(--card-hover-border); } /* ==================== 主题切换按钮 ==================== */ .theme-toggle { position: fixed; bottom: 32px; right: 32px; z-index: 1000; width: 56px; height: 56px; border-radius: 50%; background: var(--glass-bg); border: 1px solid var(--border-default); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 12px var(--shadow-color); } .theme-toggle:hover { transform: scale(1.1); background: var(--card-hover-bg); border-color: var(--card-hover-border); } .theme-toggle-icon { font-size: 24px; transition: transform 0.3s ease; } .theme-toggle:hover .theme-toggle-icon { transform: rotate(180deg); } /* 深色模式：显示太阳图标 */ [data-theme="dark"] .theme-toggle-icon-sun { display: block; } [data-theme="dark"] .theme-toggle-icon-moon { display: none; } /* 浅色模式：显示月亮图标 */ [data-theme="light"] .theme-toggle-icon-sun { display: none; } [data-theme="light"] .theme-toggle-icon-moon { display: block; } /* 手机端位置调整 */ @media (max-width: 767px) { .theme-toggle { bottom: 24px; right: 24px; width: 48px; height: 48px; } .theme-toggle-icon { font-size: 20px; } }