# @hlcloud/custom-themes

用于多个 `app` 公用的样式文件

## 用法

### 添加依赖

```bash
pnpm add @hlcloud/custom-themes
```

### 自定义主题

```ts
import '@hlcloud/custom-themes/element-plus';
import '@hlcloud/custom-themes/antd';
import '@hlcloud/custom-themes/tdesign';
```

## element-plus 主题

### 文件目录

```bash
packages/custom-themes/src/element-plus/index.scss 自定义样式
packages/custom-themes/src/element-plus/variables.scss 主题变量
packages/custom-themes/src/element-plus/reset.scss 重置样式
```

### 打包后文件目录

```bash
packages/custom-themes/dist/element-plus/index.css 包含element-plus主题的样式文件
packages/custom-themes/dist/element-plus/src/variables.scss 主题变量源文件
packages/custom-themes/dist/element-plus/src/index.scss 自定义样式源文件
```

### 使用方法

1. 全局引入

```ts
import '@hlcloud/custom-themes/element-plus';
or
import '@hlcloud/custom-themes/element-plus/src/index.scss';
```

2. Vite按需引入

```ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';

// https://vitejs.dev/config/
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@hlcloud/custom-themes/element-plus/src/variables.scss" as *;`
      }
    }
  },
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }), // 如果是全局引入则无需配置这个ElementPlusResolver()
    Components({
      resolvers: [ElementPlusResolver({ importStyle: 'sass' })]
    }) // 如果是全局引入则无需配置这个ElementPlusResolver()
  ],
  // ...
});

```

## tdesign 主题

### 文件目录

```bash
packages/custom-themes/src/tdesign/index.scss 自定义样式
packages/custom-themes/src/tdesign/variables.scss 主题变量
```

### 打包后文件目录

```bash
packages/custom-themes/dist/tdesign/index.css 包含tdesign主题的样式文件
packages/custom-themes/dist/tdesign/src/variables.scss 主题变量源文件
packages/custom-themes/dist/tdesign/src/index.scss 自定义样式源文件
```

### 使用方法

1. 全局引入

```ts
import '@hlcloud/custom-themes/tdesign';
or
import '@hlcloud/custom-themes/tdesign/src/index.scss';
```

2. Vite按需引入

```ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { TDesignResolver } from 'unplugin-vue-components/resolvers';

// https://vitejs.dev/config/
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@hlcloud/custom-themes/tdesign/src/variables.scss" as *;`
      }
    }
  },
  plugins: [
    vue(),
    AutoImport({
      resolvers: [TDesignResolver()]   // 如果是全局引入则无需配置这个TDesignResolver()
    }),
    Components({
      resolvers: [TDesignResolver()] // 如果是全局引入则无需配置这个TDesignResolver()
    })
  ]
})