# 快速开始

## 安装

```shell
yarn add juln-color
```

## 使用

### 导入 JS 脚本和 css 样式文件

#### SPA 单页应用

```ts
// 导入JS脚本
import "juln-color";
// 导入本地主题色css文件，若有动态需求，可替换为 CDN 地址
import "juln-color/lib/theme.css";
// 若需要借助媒体查询，自动切换主题色，请开启
// import 'juln-color/lib/theme.media.css';
//……
```

#### SSR 项目

```tsx
import React, { useEffect } from "react";
// 导入本地主题色css文件，若有动态需求，可替换为 CDN 地址
import "juln-color/lib/theme.css";
// 若需要借助媒体查询，自动切换主题色，请开启
// import 'juln-color/lib/theme.media.css';

const App = () => {
  useEffect(() => {
    // 导入JS脚本
    require("@hupu/api-color");
  }, []);

  return <div>……</div>;
};
```

### 在 css | less | scss 文件中

```css
.element {
  background: var(--primary_button);
}
```

### css-in-js

#### 在某个 `jsx / tsx` 文件中

```tsx
import React, { memo } from "react";
import { getColor } from "juln-color";

interface AppProps {}

const colors = getColor();
export const App: React.FC<AppProps> = () => {
  return (
    <div
      style={{
        backgroudColor: colors.primary_button,
      }}
    >
      {}
    </div>
  );
};

export default memo(App);
```

## 更改主题色

通常情况下，你并不需要更改主题色，当前的主题色都是自动根据环境判断的，但也可能遇到需要手动更改的场景：

```ts
import { getMode, setDarkMode, setLightMode } from "juln-color";

const themeMode = getMode();

if (themeMode === "light") {
  setDarkMode();
}

if (themeMode === "dark") {
  setLightMode();
}
```