/*! * Ernest Chemical — Theme Tokens * --------------------------------------------------- * 绿色为默认主题；切换到蓝色只需改 。 * * 切换方式（任选其一）： * 1) HTML 根标签： * 2) JS 运行时：document.documentElement.setAttribute('data-theme', 'blue') * 3) URL 参数：?theme=blue （配合下方小段 JS 自动读取，见文件末尾注释） * * 修改本文件后无需改动业务样式 —— 所有颜色都引用 --color-* 变量。 * 业务 CSS 请全部使用 var(--color-primary) 等 token，禁止硬编码颜色。 */ /* ========================================================= 1. 绿色主题（DEFAULT） ========================================================= */ :root, :root[data-theme="green"] { /* Primary — 深草本绿 */ --color-primary: #2E7D32; --color-primary-dark: #1B5E20; --color-primary-light: #66BB6A; --color-primary-soft: #A5D6A7; --color-primary-bg: #E8F5E9; /* 极浅绿区块背景 */ /* Accent — 辅助蓝 */ --color-accent: #1565C0; --color-accent-dark: #0D47A1; --color-accent-bg: #E3F2FD; /* 中性色 */ --color-text: #212121; --color-text-secondary: #616161; --color-text-muted: #9E9E9E; --color-border: #E0E0E0; --color-bg: #FFFFFF; --color-bg-alt: #F5F7FA; --color-footer-bg: #1B5E20; /* 页脚用主色 Dark，随主题切换 */ /* 语义色（与主题无关，统一） */ --color-success: #43A047; --color-warning: #FB8C00; --color-error: #E53935; /* 交互态阴影 / 圆角（与主题无关） */ --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06); --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.12); --radius-btn: 6px; --radius-card: 8px; } /* ========================================================= 2. 蓝色主题（备用 —— 客户可一键切换） ========================================================= */ :root[data-theme="blue"] { --color-primary: #1565C0; --color-primary-dark: #0D47A1; --color-primary-light: #64B5F6; --color-primary-soft: #BBDEFB; --color-primary-bg: #E3F2FD; /* 蓝主调时，绿色降级为点缀（用于"绿色农业"板块） */ --color-accent: #2E7D32; --color-accent-dark: #1B5E20; --color-accent-bg: #E8F5E9; --color-footer-bg: #0D47A1; } /* ========================================================= 3. 语义化别名 token —— 业务样式优先用这些 ========================================================= */ :root { --color-link: var(--color-primary); --color-link-hover: var(--color-primary-dark); --color-button-bg: var(--color-primary); --color-button-text: #FFFFFF; --color-tag-bg: var(--color-primary-bg); --color-tag-text: var(--color-primary-dark); --color-focus-ring: rgba(46, 125, 50, 0.25); /* 绿色光环；蓝主题下方小段覆盖 */ } :root[data-theme="blue"] { --color-focus-ring: rgba(21, 101, 192, 0.25); } /* ========================================================= 4. 基础元素绑定（让现有模板立刻生效） ========================================================= */ body { color: var(--color-text); background: var(--color-bg); } a { color: var(--color-link); } a:hover { color: var(--color-link-hover); } /* 主按钮：复用模板里常见的 class，无副作用 */ .btn-primary, .btn-theme { background-color: var(--color-button-bg); color: var(--color-button-text); border-color: var(--color-primary); border-radius: var(--radius-btn); } .btn-primary:hover, .btn-theme:hover { background-color: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #FFFFFF; } /* 焦点可见 —— 无障碍（补全 button，覆盖主题切换等按钮元素） */ a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; box-shadow: 0 0 0 4px var(--color-focus-ring); } input, textarea, select { border-color: var(--color-border); border-radius: var(--radius-btn); } input:focus, textarea:focus, select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-focus-ring); outline: none; } /* * ========================================================= * 5. 可选：URL 参数 / 本地记忆自动切换主题 * --------------------------------------------------- * 在页面 内联（或放 frontend.js）这段小脚本， * 即可用 ?theme=blue 切换并记忆到 localStorage： * * * * 推荐在 顶部尽早执行，避免主题闪烁(FOUC)。 * ========================================================= */