|
|
@@ -36,18 +36,52 @@
|
|
|
|
|
|
`pnpm build`
|
|
|
|
|
|
-### 主题
|
|
|
+### 主题及主题化
|
|
|
|
|
|
主题可以在 /views/vent/sys/setting/index.vue 中找到设置入口
|
|
|
|
|
|
常规的颜色、变量在 /design/color.less 或 /design/themify/ 下添加，图片资源应在 /assets/images/themify/ 下添加
|
|
|
|
|
|
-各个页面的主题化标准模板可以参考登录页 /views/sys/login/Login.vue
|
|
|
+一般来说，主题化开发可以参考以下代码
|
|
|
|
|
|
-下面是配合主题化使用的工具，输入页面的 css 样式，即可输出标准模板所需的资源
|
|
|
+```less
|
|
|
+// import theme variables
|
|
|
+@import '/@/design/theme.less';
|
|
|
+
|
|
|
+// scope the selector
|
|
|
+@{theme-deepblue} {
|
|
|
+ .your-component-root-class-name {
|
|
|
+ --image-a: url('/@/assets/images/themify/deepblue/a.png');
|
|
|
+ --bg-a: #ffffff;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// scope the selector
|
|
|
+@{theme-dark} {
|
|
|
+ .your-component-root-class-name {
|
|
|
+ --image-a: url('/@/assets/images/themify/dark/a.png');
|
|
|
+ --bg-a: #000000;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// default css
|
|
|
+.your-component-root-class-name {
|
|
|
+ --image-a: url('/@/assets/images/a.png');
|
|
|
+ --bg-a: #888888;
|
|
|
+
|
|
|
+ .class-name-a {
|
|
|
+ background-image: var(--image-a);
|
|
|
+ background-color: var(--bg-a);
|
|
|
+ }
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+更加详细的页面主题化标准模板可以参考登录页 /views/sys/login/Login.vue
|
|
|
+
|
|
|
+如果已经写了css代码，想要支持主题化，则下面是配合主题化使用的工具，用于将已有样式代码输出为主题化代码。输入页面的 css 样式，即可输出标准模板所需的资源（返回的数据第一项为变量集合，第二项为css代码文本）
|
|
|
|
|
|
```javascript
|
|
|
-// Please make sure these requires before using this function:
|
|
|
+// Take note of requires below before using this function:
|
|
|
// 1. replace all url patterns to patterns like `url(/@/xxx/xxx.xxx)`.
|
|
|
// 2. remove all the in-line comments(//) or replace them to block comments(/** */).
|
|
|
// 3. replace all rbg/rgba/hsa or any other css color functions to hex colors(#xxxxxx).
|
