Twilight白天黑夜切换组件

2024-06-28 23:52:33首发，2小时前更新

ax-twilight组件可页面整体切换dark模式，也支持局部切换dark模式。

前言

目前网页终端设备基本上都支持暗黑风格切换，切换的方式主要有两种：

1. 自动获得用户浏览器自身是否设置了dark模式，通过媒体查询prefers-color-scheme属性，更新全局css变量
2. 通过对网页的根节点设置dark属性或者scheme=dark属性，以改变全局css变量

第一种方式完全自动，除非用户主动取消浏览器的dark模式；第二种方式完全手动，通过按钮切换根节点的dark属性。两者各有优劣，可混合使用。

---

切换按钮

本框架提供一个twilight切换按钮专门用来切换dark模式。

只需插入ax-twilight节点即可，通过点击该按钮可让body节点追加scheme=dark属性，以实现暗黑风格。

尺寸

通过size属性可设置按钮的尺寸，支持3种尺寸，sm（高18px）、md（高22px，默认）和lg（高28px）。

简化按钮

通过feature属性可简化按钮：

• feature=icon：将删除label节点，只保留图标
• feature=plain：只保留图标，label、背景和边框全部取消。

指定根节点

通过target属性设置被设置scheme属性的节点，该属性为节点选择器，如果能找到该节点则设置，如果找不到还是设置body节点。