使用说明

Soul VSCode 效率插件，目前支持主题 scss/css snippets、重命名日夜间图片。

1. Snippet

语法提示，一键生成主题代码。

1.1 国内版主题

1.1.1 颜色语法提示

为了避免污染正常语法提示，输入 #282828 时请替换为 A282828 ，前缀 A 即 App ，表示国内版。 使用新版css变量方案时，需使用前缀 V，即 Variables

使用前缀A效果：

.header {
  @include setThemes(color, text-default);
}

// ===>
// .theme-light .header {
//   color: #474747;
// }
// .theme-dark .header {
//   color: #686881;
// }

使用前缀V：

.header {
  color: var(--text-default);
}

1.1.2 图片语法提示：

效果：

.header {
  @include setThemesBgImg('./assets/icon');
}

.footer {
  @include setThemesBgImg('./assets/icon', gif);
}

// ===>
// .theme-light .header {
//   background-image: url('./assets/icon-light.png');
// }
// .theme-dark .header {
//   background-image: url('./assets/icon-dark.png');
// }

// .theme-light .footer {
//   background-image: url('./assets/icon-light.gif');
// }
// .theme-dark .footer {
//   background-image: url('./assets/icon-dark.gif');
// }

1.1.3 一键生成主题配置

输入 app-theme 即可出现提示

1.2 国际版主题

1.2.1 颜色语法提示： 为了避免污染正常语法提示，输入 #282828 时请替换为 I282828 ，前缀 I 即 Intl ，表示国际版。

1.2.2 图片语法提示同上。

1.3

Sobee组件库，键入so开头，即可智能提示，并生成代码

2. 重命名日夜间图片

左侧资源栏 - 多选日夜间图片 - 右键菜单 - S_重命名国内主题图片 即可按照以下规则重命名图片：

• 将名称不带daytime/night的图片重命名为xxx-daytime
• 将名称带_night的图片重命名为xxx-night