0.0.4

暗黑模式 ​

Uniboot UI 支持暗黑模式。

我们将所需变量抽取并统一为 CSS 变量，便于基于 CSS Vars 实现主题切换。

如何开启？ ​

首先可以增加一个开关，用于切换 html 上的 dark 类。

若仅需暗黑模式，可直接给 html 加上 dark 类。

html
<html class="dark">
  <head></head>
  <body></body>
</html>

若需要明暗切换，推荐使用 useDark | VueUse。

然后在入口文件中引入一行样式即可：

main.ts
ts
// 若只需引入 CSS
import 'uniboot-ui/theme-chalk/dark/css-vars.css'

完整示例可参考 uniboot-ui-vite-starter。

自定义变量 ​

通过 CSS ​

直接用 CSS 变量覆盖即可。

例如新建 styles/dark/css-vars.css：

css
html.dark {
  /* 自定义暗黑背景色 */
  --u-bg-color: #626aef;
}

在 Uniboot UI 样式之后引入：

main.ts
ts
import 'uniboot-ui/theme-chalk/dark/css-vars.css'
import './styles/dark/css-vars.css'

通过 SCSS ​

若使用 SCSS，也可以引入 scss 文件参与编译。

更多说明见 主题。

styles/uniboot/index.scss
scss
/* 按需覆盖 */
@forward 'uniboot-ui/theme-chalk/src/dark/var.scss' with (
  $bg-color: (
    'page': #0a0a0a,
    '': #626aef,
    'overlay': #1d1e1f,
  )
);
main.ts
ts
import './styles/uniboot/index.scss'

// 或仅引入 scss 版变量？
// import 'uniboot-ui/theme-chalk/src/dark/css-vars.scss'