/* * 蜻蜓伴读 · 主题令牌层 * 色值与 App (entry/src/main/ets/common/theme/ThemeData.ets) 完全一致，7 套可切换。 * 只用 CSS 变量，无依赖；切换 = 改 。 */ :root, [data-theme="light"] { --primary: #8B5000; --on-primary: #FFFFFF; --primary-container: #FFDCC2; --on-primary-container: #2C1600; --secondary-container: #F6DFC8; --on-secondary-container: #271905; --tertiary-container: #D5EDC0; --on-tertiary-container: #0E2004; --surface: #FFF8F5; --surface-low: #FCF1EA; --surface-container: #F2C9A8; --surface-container-high: #F3E6DE; --surface-highest: #EDE0D8; --on-surface: #211A14; --on-surface-variant: #51443B; --outline-variant: #D6C3B6; --inverse-surface: #362F28; --inverse-on-surface: #FBEEE5; --inverse-primary: #FFB77C; --error: #B3261E; --on-error: #FFFFFF; --error-container: #F9DEDC; --nav-bg: rgba(255,248,245,.82); --shadow-tint: rgba(139,80,0,.14); } [data-theme="dark"] { --primary: #FFB77C; --on-primary: #211A14; --primary-container: #6E3D00; --on-primary-container: #FFDCC2; --secondary-container: #51443B; --on-secondary-container: #FFE8D0; --tertiary-container: #3D4D30; --on-tertiary-container: #D5EDC0; --surface: #211A14; --surface-low: #2C2620; --surface-container: #362F28; --surface-container-high: #3B332C; --surface-highest: #473E36; --on-surface: #FBEEE5; --on-surface-variant: #CBBBAE; --outline-variant: #51443B; --inverse-surface: #FBEEE5; --inverse-on-surface: #362F28; --inverse-primary: #8B5000; --error: #F2B8B5; --on-error: #211A14; --error-container: #8C1D18; --nav-bg: rgba(33,26,20,.82); --shadow-tint: rgba(0,0,0,.5); } [data-theme="custom"] { --primary: #E64A19; --on-primary: #FFFFFF; --primary-container: #FFDBCF; --on-primary-container: #3B0A00; --secondary-container: #FFE0B2; --on-secondary-container: #2C1600; --tertiary-container: #FFF3E0; --on-tertiary-container: #271905; --surface: #FFFFFF; --surface-low: #FFF8F0; --surface-container: #FFE0B2; --surface-container-high: #FFF3E0; --surface-highest: #FFE8CC; --on-surface: #333333; --on-surface-variant: #666666; --outline-variant: #FFCC80; --inverse-surface: #4A3B2E; --inverse-on-surface: #FFF3E0; --inverse-primary: #FF8A65; --error: #B3261E; --on-error: #FFFFFF; --error-container: #F9DEDC; --nav-bg: rgba(255,255,255,.82); --shadow-tint: rgba(230,74,25,.16); } [data-theme="purple"] { --primary: #6750A4; --on-primary: #FFFFFF; --primary-container: #EADDFF; --on-primary-container: #21005D; --secondary-container: #E8DEF8; --on-secondary-container: #1D192B; --tertiary-container: #FFD8E4; --on-tertiary-container: #31111D; --surface: #FEF7FF; --surface-low: #F7F2FA; --surface-container: #F3EDF7; --surface-container-high: #ECE6F0; --surface-highest: #E6E0E9; --on-surface: #1D1B20; --on-surface-variant: #49454F; --outline-variant: #CAC4D0; --inverse-surface: #322F35; --inverse-on-surface: #F5EFF7; --inverse-primary: #D0BCFF; --error: #B3261E; --on-error: #FFFFFF; --error-container: #F9DEDC; --nav-bg: rgba(254,247,255,.82); --shadow-tint: rgba(103,80,164,.16); } [data-theme="purpleDark"] { --primary: #D0BCFF; --on-primary: #381E72; --primary-container: #4F378B; --on-primary-container: #EADDFF; --secondary-container: #4A4458; --on-secondary-container: #E8DEF8; --tertiary-container: #633B48; --on-tertiary-container: #FFD8E4; --surface: #141218; --surface-low: #1C1B1F; --surface-container: #211F26; --surface-container-high: #2B2930; --surface-highest: #36343B; --on-surface: #E6E0E9; --on-surface-variant: #CAC4D0; --outline-variant: #49454F; --inverse-surface: #E6E0E9; --inverse-on-surface: #322F35; --inverse-primary: #6750A4; --error: #F2B8B5; --on-error: #601410; --error-container: #8C1D18; --nav-bg: rgba(20,18,24,.82); --shadow-tint: rgba(0,0,0,.5); } [data-theme="coral"] { --primary: #984061; --on-primary: #FFFFFF; --primary-container: #FFD9E2; --on-primary-container: #3E001D; --secondary-container: #F6DDE4; --on-secondary-container: #31101D; --tertiary-container: #FFDBCA; --on-tertiary-container: #2C1600; --surface: #FFF8F8; --surface-low: #FCF0F2; --surface-container: #F6EBED; --surface-container-high: #F3E5E9; --surface-highest: #EEE0E3; --on-surface: #201A1B; --on-surface-variant: #524346; --outline-variant: #D5C2C6; --inverse-surface: #352F30; --inverse-on-surface: #FAEEEF; --inverse-primary: #FFB0C8; --error: #B3261E; --on-error: #FFFFFF; --error-container: #F9DEDC; --nav-bg: rgba(255,248,248,.82); --shadow-tint: rgba(152,64,97,.16); } [data-theme="coralDark"] { --primary: #FEB1C9; --on-primary: #620833; --primary-container: #7D2649; --on-primary-container: #FED9E4; --secondary-container: #5B3F48; --on-secondary-container: #FCDAE3; --tertiary-container: #5E402C; --on-tertiary-container: #FFDBC6; --surface: #181213; --surface-low: #201A1C; --surface-container: #241E20; --surface-container-high: #2E282A; --surface-highest: #393335; --on-surface: #E8E1E3; --on-surface-variant: #D4C2C7; --outline-variant: #514347; --inverse-surface: #E8E1E3; --inverse-on-surface: #352F30; --inverse-primary: #984061; --error: #F2B8B5; --on-error: #601410; --error-container: #8C1D18; --nav-bg: rgba(24,18,19,.82); --shadow-tint: rgba(0,0,0,.5); } :root { --radius: 20px; --shadow: 0 10px 40px var(--shadow-tint); --shadow-sm: 0 4px 16px var(--shadow-tint); /* 「深色面板」统一走 inverse 对，浅/深主题下都保证对比度 */ --panel: linear-gradient(135deg, var(--inverse-surface), var(--primary)); --panel-ink: var(--inverse-on-surface); --panel-accent: var(--inverse-primary); } /* ==== 主题切换器 ==== */ .themer { display: flex; align-items: center; gap: 7px; } .themer .tbtn { width: 19px; height: 19px; border-radius: 50%; padding: 0; cursor: pointer; border: 2px solid var(--outline-variant); background: var(--swatch, var(--primary)); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; } .themer .tbtn:hover { transform: scale(1.18); } .themer .tbtn[aria-pressed="true"] { border-color: var(--on-surface); box-shadow: 0 0 0 3px var(--primary-container); transform: scale(1.12); } .themer .tbtn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }