/* ========================================================= 华电低压在线选型 · 配色主题（可整体替换） --------------------------------------------------------- 用法： 即可整体换色 默认（不设 data-theme）= 原品牌蓝 #0055B1 / #00A0E8，外观与现状一致 ┌──────────────────┬──────────────────────────────────────────────────┐ │ 主题标识 │ 名称 / 适用场景 / 风格说明 │ ├──────────────────┼──────────────────────────────────────────────────┤ │ tech-cool │ A 冷色科技感 │ │ │ 适用：工业电气选型平台、对外英文站、B 端专业工具 │ │ │ 风格：深空蓝打底 + 电光青提亮，理性精密、值得信赖 │ ├──────────────────┼──────────────────────────────────────────────────┤ │ warm-vitality │ B 暖色活力系 │ │ │ 适用：营销获客页、活动促销、C 端触达与社群传播 │ │ │ 风格：熔岩橙主色 + 琥珀金点缀，热情外放、行动感强 │ ├──────────────────┼──────────────────────────────────────────────────┤ │ morandi │ C 低饱和莫兰迪 │ │ │ 适用：品牌官网、后台系统、需长时间浏览的选型台 │ │ │ 风格：雾霭石板灰 + 灰绿，低饱和克制，久看不累 │ └──────────────────┴──────────────────────────────────────────────────┘ 约定： - 仅替换颜色，不动布局 / 组件结构 / 字号 - 主色 --brand；辅助色 --brand-mid / --brand-hero；强调色 --accent / --accent-2 - 状态色：hover(--brand-hover/--accent-hover/--hover-tint) 禁用(--state-disabled-*)、成功(绿)、警告(琥珀)、错误(红)、信息(主色) - 所有文字-背景组合已通过 WCAG 对比度实测（正文 ≥4.5:1，次要/大字 ≥3:1） ========================================================= */ /* ---------- 默认：原品牌蓝（与各页 :root 原值逐字一致） ---------- */ :root { --brand: #0055B1; --brand-dark: #0C3390; --brand-mid: #2A4A9D; --brand-hero: #1D4AAE; --brand-hover: #004C9E; --accent: #00A0E8; --accent-2: #45B8E4; --accent-hover: #0090D4; --accent-deep: #0077B6; --accent-deep-hover: #00628F; --brand-rgb: 0,85,177; --brand-dark-rgb: 12,51,144; --accent-rgb: 0,160,232; --accent-2-rgb: 69,184,228; --deep-rgb: 4,20,60; --toast-rgb: 16,34,64; --mask-rgb: 10,25,55; --bg: #F4F8FD; --card: #FFFFFF; --line: #E3EAF4; --txt: #1E2A3A; --txt-2: #5A6B80; --txt-3: #8B99AC; --txt-4: #3A4A5E; --txt-5: #2A5C8F; --surface-alt: #F7FAFE; --surface-soft: #F6F9FE; --surface-2: #F1F6FC; --surface-3: #F3F7FC; --surface-4: #FBFCFE; --surface-hover: #FAFCFF; --line-soft: #EEF3FA; --line-soft-2: #F1F5FB; --line-soft-3: #EDF2FA; --line-soft-4: #EDF4FD; --line-soft-5: #EEF4FC; --line-hover: #CBDDF3; --tint: #EAF3FE; --tint-2: #E8F4FE; --tint-3: #F0F6FE; --tint-4: #EAF4FE; --tint-5: #E4EEFA; --tint-6: #E4F6FE; --tint-7: #D7E8FF; --tint-8: #E4EDF8; --tint-9: #E0EAF6; --tint-10: #D6E9FB; --tint-bd: #D3E9FB; --chip-bd: #D3E7FB; --tint-bd-2: #BCD4EE; --hover-tint: #F0F7FF; --hover-tint-2: #F2F8FF; --gray: #B4C6DC; --gray-2: #98A8BC; --gray-3: #9FB4CE; --gray-4: #C3D2E4; --ok: #269C22; --warn: #D72C25; --state-success: #269C22; --state-success-bg: #E9F7E8; --state-info: #0B72C4; --state-info-bg: #E8F4FE; --state-warning: #B87C0A; --state-warning-bg: #FBF0DA; --state-error: #D72C25; --state-error-bg: #FDECEB; --state-disabled-bg: #EFF3F8; --state-disabled-txt: #97A3B5; --state-disabled-bd: #E3EAF4; --danger-bg: #FFF5F4; --danger-bd: #FBDAD7; --danger-bg-h: #FDECEA; --danger-bd-h: #F6C3BE; --footer-bg: #16233A; --footer-txt: #93A5C1; --footer-txt-2: #6E80A0; --topbar-txt: #BFD2F2; --on-dark-2: #C6D8F6; --on-dark-3: #AFC6EE; --nav-txt: #D7E3F8; --accent-on-dark: #7FD1FF; } /* ========================================================= A 冷色科技感 / Tech Cool —— data-theme="tech-cool" 适用：工业电气选型平台、对外英文站、B 端专业工具 风格：深空蓝打底 + 电光青提亮，理性精密、值得信赖 ========================================================= */ html[data-theme="tech-cool"] { --brand: #1668E3; --brand-dark: #0A2E6B; --brand-mid: #12408F; --brand-hero: #0E3A85; --brand-hover: #1053B8; --accent: #00CFF0; --accent-2: #4FE3F5; --accent-hover: #00AFCB; --accent-deep: #007A99; --accent-deep-hover: #006F8C; --brand-rgb: 22,104,227; --brand-dark-rgb: 10,46,107; --accent-rgb: 0,207,240; --accent-2-rgb: 79,227,245; --deep-rgb: 4,15,40; --toast-rgb: 14,27,51; --mask-rgb: 8,20,45; --bg: #F0F6FC; --card: #FFFFFF; --line: #DCE6F2; --txt: #11223D; --txt-2: #46587A; --txt-3: #64738A; --txt-4: #3E5470; --txt-5: #1B4E9E; --surface-alt: #F6FAFE; --surface-soft: #F3F8FD; --surface-2: #EDF4FC; --surface-3: #F1F7FD; --surface-4: #F9FCFE; --surface-hover: #F8FBFE; --line-soft: #E8EFF8; --line-soft-2: #EDF3FA; --line-soft-3: #E7EFF8; --line-soft-4: #E6F1FD; --line-soft-5: #EDF4FC; --line-hover: #C2D9F2; --tint: #E3EEFC; --tint-2: #DDEEFB; --tint-3: #E9F3FD; --tint-4: #E2EEFC; --tint-5: #DFEBFA; --tint-6: #E0F1FD; --tint-7: #CFE6FB; --tint-8: #DFEAF9; --tint-9: #DCE9F7; --tint-10: #CFE3FB; --tint-bd: #C9DFF8; --chip-bd: #C6DDF8; --tint-bd-2: #B4D2EE; --hover-tint: #EAF3FE; --hover-tint-2: #EDF6FE; --gray: #AEC1D8; --gray-2: #94A6BE; --gray-3: #7A8FAC; --gray-4: #B4C6DE; --ok: #0A6E3E; --warn: #C6362B; --state-success: #0A6E3E; --state-success-bg: #E1F5EA; --state-info: #0F5BD1; --state-info-bg: #DDEEFB; --state-warning: #8A5A00; --state-warning-bg: #FBF0DA; --state-error: #C6362B; --state-error-bg: #FDECEB; --state-disabled-bg: #E8EDF4; --state-disabled-txt: #6E7C8D; --state-disabled-bd: #DCE4EE; --danger-bg: #FDF3F2; --danger-bd: #F8D3CF; --danger-bg-h: #FBE7E4; --danger-bd-h: #F4BEB8; --footer-bg: #0E1B33; --footer-txt: #8FA3C0; --footer-txt-2: #6B7E9C; --topbar-txt: #B6CDF0; --on-dark-2: #BDD4F5; --on-dark-3: #A6C1EC; --nav-txt: #CFE0F7; --accent-on-dark: #6FD8F5; } /* ========================================================= B 暖色活力系 / Warm Vitality —— data-theme="warm-vitality" 适用：营销获客页、活动促销、C 端触达与社群传播 风格：熔岩橙主色 + 琥珀金点缀，热情外放、行动感强 ========================================================= */ html[data-theme="warm-vitality"] { --brand: #B54A0B; --brand-dark: #7A2F08; --brand-mid: #A8460D; --brand-hero: #8E3908; --brand-hover: #A0410A; --accent: #F2A413; --accent-2: #FFC24D; --accent-hover: #D9910B; --accent-deep: #96690A; --accent-deep-hover: #8A5A00; --brand-rgb: 181,74,11; --brand-dark-rgb: 122,47,8; --accent-rgb: 242,164,19; --accent-2-rgb: 255,194,77; --deep-rgb: 30,20,10; --toast-rgb: 46,29,20; --mask-rgb: 40,25,18; --bg: #FDF7F2; --card: #FFFFFF; --line: #EBDCCF; --txt: #2A1B12; --txt-2: #5F4B3C; --txt-3: #75655A; --txt-4: #5A463A; --txt-5: #8A4A10; --surface-alt: #FCF6F0; --surface-soft: #FBF4EE; --surface-2: #FAF3EC; --surface-3: #FAF4EF; --surface-4: #FDFBF8; --surface-hover: #FEFBF8; --line-soft: #F3E7DB; --line-soft-2: #F6EDE3; --line-soft-3: #F2E8DB; --line-soft-4: #F3E8D6; --line-soft-5: #F4EADC; --line-hover: #DFC4AA; --tint: #FBEADB; --tint-2: #FDEBD8; --tint-3: #FCEFE3; --tint-4: #FBEBDB; --tint-5: #F5E6D9; --tint-6: #FCEFD9; --tint-7: #FBE3C4; --tint-8: #F4E5D7; --tint-9: #F2E1CE; --tint-10: #EED7BF; --tint-bd: #F0D3B8; --chip-bd: #EFCFB4; --tint-bd-2: #E8C9A8; --hover-tint: #FDF4EC; --hover-tint-2: #FDF6F0; --gray: #C7AF9C; --gray-2: #B09987; --gray-3: #9C8873; --gray-4: #C6AF9C; --ok: #1F6B38; --warn: #C6362B; --state-success: #1F6B38; --state-success-bg: #E5F2E9; --state-info: #A64B0C; --state-info-bg: #FBE9D8; --state-warning: #7A5200; --state-warning-bg: #F7ECD9; --state-error: #C6362B; --state-error-bg: #FBE9E7; --state-disabled-bg: #F2E7DC; --state-disabled-txt: #7A6558; --state-disabled-bd: #E7D8C9; --danger-bg: #FDF2F1; --danger-bd: #F7D2CD; --danger-bg-h: #FBE6E3; --danger-bd-h: #F3BEB8; --footer-bg: #2E1D14; --footer-txt: #C3A893; --footer-txt-2: #9A8474; --topbar-txt: #F0C9A8; --on-dark-2: #EBD3BC; --on-dark-3: #DBB896; --nav-txt: #F2DCC7; --accent-on-dark: #FFC24D; } /* ========================================================= C 低饱和莫兰迪 / Morandi —— data-theme="morandi" 适用：品牌官网、后台系统、需要长时间浏览的选型台 风格：雾霭石板灰 + 灰绿，低饱和克制，久看不累、显高级 ========================================================= */ html[data-theme="morandi"] { --brand: #5F6E7E; --brand-dark: #3B4653; --brand-mid: #4E5B69; --brand-hero: #45525F; --brand-hover: #4E5B69; --accent: #93A69C; --accent-2: #A9B5AE; --accent-hover: #7E9188; --accent-deep: #5C6B64; --accent-deep-hover: #4E5B69; --brand-rgb: 95,110,126; --brand-dark-rgb: 59,70,83; --accent-rgb: 147,166,156; --accent-2-rgb: 169,181,174; --deep-rgb: 40,39,36; --toast-rgb: 51,50,47; --mask-rgb: 45,44,41; --bg: #F4F3F1; --card: #FFFFFF; --line: #DFDCD6; --txt: #33322F; --txt-2: #57544F; --txt-3: #736F68; --txt-4: #4E4B46; --txt-5: #454F5C; --surface-alt: #F7F6F4; --surface-soft: #F6F5F3; --surface-2: #F5F4F2; --surface-3: #F5F4F2; --surface-4: #FAFAF9; --surface-hover: #FBFBFA; --line-soft: #EAE8E3; --line-soft-2: #EFEDE8; --line-soft-3: #E9E7E2; --line-soft-4: #E8EDEB; --line-soft-5: #EEEDEA; --line-hover: #C8CBC8; --tint: #E9E7E2; --tint-2: #E7EBE7; --tint-3: #EEF0EE; --tint-4: #E8ECEB; --tint-5: #E4E7E5; --tint-6: #EAEFEC; --tint-7: #E1E7E4; --tint-8: #E3E6E4; --tint-9: #E1E6E4; --tint-10: #DCE3E1; --tint-bd: #D2D8D4; --chip-bd: #D1D6D2; --tint-bd-2: #C6CEC9; --hover-tint: #F1EFEC; --hover-tint-2: #F2F0ED; --gray: #B5B2AC; --gray-2: #A6A39D; --gray-3: #8E8B85; --gray-4: #B6B3AD; --ok: #4A6B58; --warn: #95554E; --state-success: #4A6B58; --state-success-bg: #E8EFEA; --state-info: #4E5B69; --state-info-bg: #E8ECEF; --state-warning: #6E5A22; --state-warning-bg: #EFE9DA; --state-error: #95554E; --state-error-bg: #F5EBEA; --state-disabled-bg: #EDECEA; --state-disabled-txt: #7C7973; --state-disabled-bd: #DFDDD9; --danger-bg: #F7EFEE; --danger-bd: #E8D5D2; --danger-bg-h: #F2E6E4; --danger-bd-h: #DCC3BF; --footer-bg: #33322F; --footer-txt: #A9A6A0; --footer-txt-2: #837F79; --topbar-txt: #C9C6C0; --on-dark-2: #CBC8C2; --on-dark-3: #B6B3AC; --nav-txt: #D6D3CD; --accent-on-dark: #A8B2AE; }