# easy-theme-config

**Repository Path**: nickzhan/easy-theme-config

## Basic Information

- **Project Name**: easy-theme-config
- **Description**: 基于JavaScript的简单主题配置
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-12-21
- **Last Updated**: 2022-12-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### Welcome to use EasyThemeConfig



#### Install

```shell
npm i easy-theme-config
```



#### Add your config file

```javascript
// theme-config.js
const themeConfig = [
    {
        theme: "default",
        config: {
            "--proj-background": "#efefef",
            "--proj-text-color": "#000000"
        }
    },
    {
        theme: "dark",
        config: {
            "--proj-background": "#000000",
            "--proj-text-color": "#FFFFFF"
        }
    },
    {
        theme: "pink",
        config: {
            "--proj-background": "#ff97c3",
            "--proj-text-color": "#3360be"
        }
    },
    {
        theme: "blue",
        config: {
            "--proj-background": "#2e9aff",
            "--proj-text-color": "#FFFFFF"
        }
    },
    {
        theme: "green",
        config: {
            "--proj-background": "#45e0a6",
            "--proj-text-color": "#7b878d"
        }
    }
]

export default themeConfig
```



#### css

```css
html, body {
    background-color: var(--proj-background);
  	color: var(--proj-text-color);
}
```



#### Init EasyThemeConfig

```javascript
// specify first theme 使用这种方式指定第一种主题
var ETC = new EasyThemeConfig(themeConfig)
    
// specify default theme 使用这种方式指定默认的主题
// var ETC = new EasyThemeConfig(themeConfig, 1)
```



#### Change your theme

```javascript
// ETC.setCurrentThemeByIndex([themeIndex])
ETC.setCurrentThemeByIndex(4)
ETS.setCurrentThemeByName("pink")
```

see more information! you can run the 'demo' with server!

[fork this project or start](https://github.com/FerrymanZhan/easy-theme-config)