需使用深灰色背景（如#121212）替代纯黑，文字依wcag标准分层设灰阶色（标题#e0e0e0、正文#b0b0b0、辅助#6f6f6f），通过pixso变量系统绑定主题色值，添加?切换控件并配置300ms淡入淡出动画，最后校验开关、输入框、表格等组件在深色下的对比度与交互反馈。
如果您正在为Pixso项目设计暗黑模式UI，需要实现深色主题界面与浅色主题的平滑切换，则需兼顾视觉一致性、可访问性与交互逻辑。以下是完成该设计方案的具体步骤：
一、定义深色背景色系
纯黑色（#000000）在OLED屏幕上虽最省电，但易造成视觉压迫与疲劳；实际设计中应采用低饱和度的深灰色作为主背景色，以构建自然、舒适的明暗过渡层次。Pixso社区中成熟案例多使用#121212或#1E1E1E作为基础背景，辅以#2D2D2D用于卡片、模态框等次级表面。
1、在Pixso画布左侧图层面板中，选中画布根节点或全局背景图层。
2、于右侧属性面板中点击「填充」色块，输入十六进制值#121212。
3、为不同层级组件分别设定灰阶值：如导航栏用#1E1E1E，内容卡片用#2D2D2D，分割线用#3A3A3A。
二、配置文字层级与对比度
深色模式下文字不可简单使用纯白（#FFFFFF），否则会因过高对比引发眩光；应依据WCAG AA标准，对标题、正文、辅助文本分别设置透明度或灰阶，确保普通字体对比度≥4.5:1，大号字体≥3:1。
1、选中标题文本图层，在右侧「文字颜色」中选择#E0E0E0（90%白度）。
2、选中正文段落，在颜色面板中将白色设为#B0B0B0（70%白度）。
3、选中辅助说明文字（如提示语、禁用状态），设置为#6F6F6F（45%白度）并确认其与背景对比度满足可读要求。
三、建立主题变量系统
为支持一键切换白天/黑夜模式，必须将颜色、阴影、圆角等属性抽象为可复用的变量，避免硬编码导致后期维护困难。Pixso支持「本地变量」与「团队变量」两种机制，推荐使用本地变量进行原型验证。
1、点击顶部菜单栏「设计」→「变量」→「新建变量集」，命名为“Theme_Dark_Light”。
2、在变量集中依次添加：bg-primary（值设为#121212）、text-heading（#E0E0E0）、surface-card（#2D2D2D）等关键变量。
3、将各UI组件的填充、文字颜色等属性绑定至对应变量，而非固定色值。
四、设计模式切换控件与交互动效
用户需明确感知当前所处主题，并能即时触发切换；控件位置应符合平台惯例（如右上角用户区），且切换过程需有视觉反馈，避免突兀跳变。
1、在画布右上角区域拖入一个图标按钮，选用?图标（Unicode U+1F319）或自定义SVG。
2、为该按钮添加交互：「悬停」时图标微缩放至1.1倍，「点击」时触发变量集切换动作。
3、设置切换动画：在「交互设置」中启用「淡入淡出」过渡，持续时间设为300ms，确保色彩变化柔和连贯。
五、校验深色模式下的组件可用性
标准UI组件（如下拉菜单、开关、输入框、数据表格）在深色背景下易出现对比不足、焦点丢失等问题，须逐项检查其视觉表现与操作反馈是否符合无障碍规范。
1、检查所有开关控件：开启状态轨道色设为#007AFF，关闭状态设为#3A3A3A，滑块色统一为#FFFFFF。
2、检查输入框聚焦态：边框使用#007AFF，内阴影设为0 0 0 2px rgba(0,122,255,0.3)。
3、检查表格行悬停：背景色设为#2D2D2D，非默认选中态，确保与默认行区分明显。
