Color 色彩

Snake UI 用统一的色彩 token 表达品牌、状态、文字与界面层级。组件优先读取 CSS 变量，因此主题或明暗模式切换时无需逐个改色。

主题颜色

primary 是 Snake 绿，代表品牌和主要操作；dark、disabled、light 分别用于按压、禁用和浅底状态。

主题主色

Snake 绿--snake-color-primary

Dark
#2EBD7CDisabled
#A6EBD3Light
#EEFFE0

辅助色

Success--snake-color-success

Dark
#18B566Disabled
#71D5A1Light
#DBF1E1

Warning--snake-color-warning

Dark
#F29100Disabled
#FCBD71Light
#FDF6EC

Error--snake-color-error

Dark
#DD6161Disabled
#FAB6B6Light
#FEF0F0

Info--snake-color-info

Dark
#82848ADisabled
#C8C9CCLight
#F4F4F5

辅助色表达固定业务语义：成功、警告、错误和普通信息，不应仅因视觉偏好互换。

文本与界面

主要文字--snake-color-text#303133

常规文字--snake-color-text-secondary#606266

次要文字--snake-color-text-muted#909399

占位文字--snake-color-text-light#C0C4CC

边框--snake-color-border#DCDFE6

分割线--snake-color-divider#E4E7ED

页面背景--snake-color-background#F6F6F6

内容表面--snake-color-surface#FFFFFF

弱表面--snake-color-surface-muted#F1F1F1

页面使用 background，卡片和面板使用 surface，轻量分区使用 surface-muted；外框使用 border，内容分隔使用 divider。Snake UI 的页面背景为 #F6F6F6。

遮罩与阴影

Token	默认值	用途
--snake-color-mask	rgba(0, 0, 0, 0.4)	弹层遮罩
--snake-color-shadow	rgba(0, 0, 0, 0.1)	浮层阴影
--snake-color-white / --snake-color-black	#FFFFFF / #000000	纯色对比

在样式与脚本中使用

.action {
    color: var(--snake-color-primary-ink);
    background: var(--snake-color-primary);

    &:active {
        background: var(--snake-color-primary-dark);
    }
    &:disabled {
        background: var(--snake-color-primary-disabled);
    }
}

import { useTheme } from '@puresnake/snake-ui';

const { color } = useTheme();
console.log(color.primary, color.text);

多主题与暗黑模式

通过 --snake-color-* 或 color 读取颜色，不要在业务代码复制暗色值。主题配置方式见多主题与暗黑模式。