Pixso 主题配置说明

Pixso 颜色 token 说明

Token 名称	描述/用途
--color-border-brand-press	主题边框点击
--color-border-brand-normal	主题边框默认
--color-border-brand-hover	主题边框悬停
--color-border-brand-disable	主题边框禁用
--color-border-commentariste	用于评论框边框中的强调
--color-border-input-focus	输入框边框聚焦
--color-bg-modifier-active	用于激活状态的背景
--color-bg-switch-brand-normal	开关开启普通状态
--color-bg-switch-brand-disable	开关开启禁用状态
--color-text-tag-brand	一般标签/标签
--color-bg-tag-brand-primary	标签主要样式背景
--color-bg-brand-press	点击
--color-bg-brand-normal	普通
--color-bg-brand-hover	悬停
--color-bg-brand-disable	禁用
--color-bg-bottom-active	激活按钮/普通
--color-bg-bottom-active-hover	激活按钮/鼠标悬停
--color-bg-selected	选中项背景色
--color-bg-layer-primary	主页层-小层叠色
--color-bg-layer-secondary	主页层-子层叠色
--color-text-primary	一级文字/标题
--color-text-secondary	二级文字/标题
--color-text-tertiary	辅助文字/标题
--color-text-brand-press	主题点击
--color-text-brand-normal	主题普通
--color-text-brand-hover	主题悬停
--color-text-brand-disable	主题禁用
--color-text-brand-tertiary	/
--color-text-brand-untipe	用于 tip2
--color-MultiPlayer-brand	/
--color-bg-slider-active	滑动条激活颜色

配置说明

主题配置采用 JSON 格式，包含四种主题模式：

{
	"tokens": {
		"token名称": {
			"light": "色值",
			"dark": "色值",
			"dev_light": "色值",
			"dev_dark": "色值"
		}
	}
}

• light：浅色主题
• dark：深色主题
• dev_light：研发模式浅色主题
• dev_dark：研发模式深色主题

示例：

{
	"tokens": {
		"--color-border-brand-press": {
			"light": "#19BBFF",
			"dark": "#19BBFF",
			"dev_light": "#2DC86D",
			"dev_dark": "#2DC86D"
		},
		"--color-text-primary": {
			"light": "rgba(36, 81, 93, 1)",
			"dark": "rgba(255, 255, 255, 0.91)",
			"dev_light": "rgba(36, 81, 93, 1)",
			"dev_dark": "rgba(255, 255, 255, 0.91)"
		}
	}
}