# element-ui-theme

**Repository Path**: zlevai/element-ui-theme

## Basic Information

- **Project Name**: element-ui-theme
- **Description**: Element UI 的主题
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-10
- **Last Updated**: 2025-03-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# @zz/element-ui-theme

## Introduce

`@zz/element-ui-theme` 是一个 element-ui 主题覆盖工具包，其使用相关`css3变量` 来重写 element-ui 组件样式。初始默认色为element-ui官网主题色。

`全部CSS变量`详见

```scss
@zz/element-ui-theme/src/styles/vars
```

## Installation

```sh
yarn add @zz/element-ui-theme
```

## Usage

##### 1、主题样式对外入口文件

```scss
// # src/styles/module/theme/index.scss
@forward '@zz/element-ui-theme/src/styles/index.scss' with (
  $font-path: '~@zz/element-ui-theme/src/styles/fonts'
);

@use "./dark.scss";
@use "./light.scss";

```

##### 2、主题样式定义

```scss
// # src/styles/module/theme/dark|light.scss
@use 'sass:map';
@import "@zz/element-ui-theme/src/styles/mixins/var";

$--v-color-primary: #006051 !default;
$--v-color-info: #767d8b !default;
$--v-color-success: #00d082 !default;
$--v-color-warning:  #ffc600 !default;
$--v-color-danger: #f00 !default;

$colors: (
  "white": #fff,
  "black": #000,
  "primary": (
    "base": $--v-color-primary,
  ),
  "success": (
    "base": $--v-color-success,
  ),
  "warning": (
    "base": $--v-color-warning,
  ),
  "danger": (
    "base": $--v-color-danger,
  ),
  "error": (
    "base": $--v-color-danger,
  ),
  "info": (
    "base": $--v-color-info,
  ),
);

:root[data-theme="dark"] {
  @each $type in $types {
    @each $shade, $color in ('light': map.get($colors, 'white'), 'dark': map.get($colors, 'black')) {
      @for $i from 1 through 9 {
        @include set-color-mix-level($type, $i, $shade, $color);
      }
    }
  }

  @each $type in $types {
    @include set-css-color-rgb($type);
    @include set-css-color-type($colors, $type);
  }
  
   --v-text-color-primary: #fff;
  ...
}
```

##### 1.5、应用主题样式

```scss
// # src/styles/index.scss
// vars and mixins
...

// theme styles (dark, light, etc.)
@import './module/theme'; // 引用theme主题样式

// common modular defs
...
```