Auto Dark Mode - 自动生成暗黑样式

使用说明

0. 配置参数

配置颜色变量地址，建议在项目根目录下 .vscode 目录下的 settings.json 配置此参数

``` json
  // .vscode/settings.json

  {
    "bs.css.variables": "path/to/your/variables/files",
  }
```

1. 替换旧版色值

在 vue 文件下使用命令或点击工具栏按钮替换旧版色值

点击工具栏
命令方式 cmd + shift + p，然后搜索 Replace Color 执行

2. 生成暗黑样式

在 vue 文件下使用命令或点击工具栏按钮生成样式

点击工具栏
命令方式 cmd + shift + p，然后搜索 Auto Dark Mode 执行

3. 根据HTML结构生成style

在 vue 文件下使用命令或点击工具栏按钮根据HTML结构生成style

点击工具栏
命令方式 cmd + shift + p，然后搜索 Generate Style Tree 执行

其他情况

1. 不需要转换某些样式，如何处理？

在不需要转换样式的类名或属性上方添加注释 // disable auto-dark-mode

只禁用某一行，此时 background 将不会转换颜色

  .btn {
    // disable auto-dark-mode
    background: @l-boss-500;
    color: @l-white;
  }

禁用一个类名，此时 .btn 下的全部颜色将不会转换

  // disable auto-dark-mode
  .btn {
    background: @l-boss-500;
    color: @l-white;
  }

2. 我想覆盖自动生成的样式，如何处理？

在生成的暗黑样式下方添加额外的 @media (prefers-color-scheme: dark) 覆盖，或者其他提升优先级的方式

特别注意：不要在自动生成的代码块内覆盖样式，否则下次生成样式时，自定义样式将丢失

/* auto injected by auto-dark-mode start */
@media (prefers-color-scheme: dark) and (max-device-width: 1024px) {
    .btn {
      background: @d-boss-500;
      color: @d-white;
    }
}
/* auto injected by auto-dark-mode end */

@media (prefers-color-scheme: dark) and (max-device-width: 1024px) {
  // 需要覆盖的样式写在这里
  .btn {
    background: @d-blue-500;
    color: @d-white;
  }
}

3. 我想保留生成的暗黑代码里的所有颜色

默认配置下，生成的暗黑代码只保留了能够匹配出色值的颜色比如下面只会保留 background 的色值

.btn{
  color: #135246; // 无应的色值
  background: #F5F5F6; // 对应 @l-grey-100
}
/* auto injected by auto-dark-mode start */
@media (prefers-color-scheme: dark) and (max-device-width: 1024px) {
  .btn{
    background: @d-grey-100;
  }
}
/* auto injected by auto-dark-mode end */

如果想保留所有色值需配置 bs.css.saveUnconvertedColor: true，配置后将保留原色值

.btn{
  color: #135246; // 无应的色值
  background: #F5F5F6; // 对应 @l-grey-100
}
/* auto injected by auto-dark-mode start */
@media (prefers-color-scheme: dark) and (max-device-width: 1024px) {
  .btn{
    color: #135246; // 保留原色值
    background: @d-grey-100;
  }
}
/* auto injected by auto-dark-mode end */

auto dark mode

Colory Panda