# agilab-element-theme

> 深知element-ui主题定制

Latest version **1.0.1** (published 2019-04-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install agilab-element-theme
pnpm add agilab-element-theme
yarn add agilab-element-theme
bun add agilab-element-theme
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2019-04-02 |
| First published | 2019-04-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 5.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | 冉晨光 |
| Maintainers | rcg1994 |

## Links

- npm: https://www.npmjs.com/package/agilab-element-theme
- Repository: https://github.com/agilab/agilab-element-theme
- npm.io page: https://npm.io/package/agilab-element-theme

## Recent versions

- 1.0.1 (latest) — 2019-04-02
- 1.0.0 — 2019-04-02

## README

### 使用方法
```
yarn add agilab-element-theme
```

在 main.js 中引入 (在 `Vue.use(elementui)` 之前)
```
import 'agilab-element-theme/theme/agilab-theme.scss'
```

### 目前修改的样式

```
  /* 
  * 更多变量：
  * https://github.com/ElemeFE/element/blob/dev/packages/theme-chalk/src/common/var.scss
  */

  /* 改变主题色变量 */
  $--color-primary: #2C7CFF;
  /// color|1|SecondaryColor|1
  $--color-success: #00C853 !default;
  /// color|1|SecondaryColor|1
  $--color-warning: #FFAB00 !default;
  /// color|1|SecondaryColor|1
  $--color-danger: #E57373 !default;
  /// color|1|SecondaryColor|1
  $--color-info: #909399 !default;
  $--color-text-regular: #666666 !default;
  $--border-color-base: #ddd !default;

  // $--disabled-fill-base: #ddd !default;
  $--disabled-color-base: #ddd !default;
  // $--disabled-border-base: #ddd !default;

  /* 改变按钮样式 */
  $--button-padding-horizontal: 19px !default;
  $--button-medium-border-radius: 4px !default;
  $--button-medium-padding-vertical: 10px !default;
  $--button-medium-padding-horizontal: 15px !default;
  $--button-small-border-radius: 3px !default;
  $--button-small-padding-horizontal: 15px !default;
  /* 单选框样式 */
  $--radio-disabled-input-border-color: #dddddd !default;
  $--radio-disabled-input-fill: #eeeeee !default;
  $--radio-disabled-icon-color: #fff !default;
  $--radio-disabled-checked-input-border-color: #dddddd !default;
  $--radio-disabled-checked-input-fill: #dddddd !default;
  $--radio-disabled-checked-icon-color: #fff !default;
  /* 复选框样式 */
  $--checkbox-disabled-input-border-color: #dddddd !default;
  $--checkbox-disabled-input-fill: #eeeeee !default;
  $--checkbox-disabled-checked-input-border-color: #dddddd !default;
  $--checkbox-disabled-checked-input-fill: #dddddd !default;
  $--checkbox-disabled-checked-icon-color: #ffffff !default;
  /* 输入框样式 */
  $--input-disabled-color: #666666 !default;
  $--input-disabled-fill: #f5f5f5 !default;
  $--input-disabled-border: #dddddd !default;

  /* 改变 icon 字体路径变量，必需 */
  $--font-path: '~element-ui/lib/theme-chalk/fonts';

  @import "~element-ui/packages/theme-chalk/src/index";

  @import './agilab-element-reset.scss'
```

---
_Source: https://npm.io/package/agilab-element-theme · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._