# antd-theme-vars

> Since Ant Design does not have a way to handle theme switch. This package will scan your theme folder and generate css and theme vars to override your less variables.

Latest version **0.3.3** (published 2022-10-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install antd-theme-vars
pnpm add antd-theme-vars
yarn add antd-theme-vars
bun add antd-theme-vars
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.3 |
| Published | 2022-10-18 |
| First published | 2022-10-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=16 |
| Dependencies | 4 |
| Unpacked size | 34.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | welliton gervickas |
| Maintainers | wellitogervickas |

## Links

- npm: https://www.npmjs.com/package/antd-theme-vars
- Repository: https://github.com/wellitongervickas/antd-theme-vars
- npm.io page: https://npm.io/package/antd-theme-vars

## Dependencies (4)

- [fs-extra](https://npm.io/package/fs-extra.md) ^10.1.0
- [@types/fs-extra](https://npm.io/package/@types/fs-extra.md) ^9.0.13
- [less-vars-to-js](https://npm.io/package/less-vars-to-js.md) ^1.3.0
- [@rollup/plugin-replace](https://npm.io/package/@rollup/plugin-replace.md) ^5.0.0

## Recent versions

- 0.3.3 (latest) — 2022-10-18
- 0.3.2 — 2022-10-17
- 0.3.1 — 2022-10-17
- 0.3.0 — 2022-10-17
- 0.2.9 — 2022-10-17
- 0.2.8 — 2022-10-17
- 0.2.7 — 2022-10-17
- 0.2.6 — 2022-10-17
- 0.2.5 — 2022-10-17
- 0.2.4 — 2022-10-17
- 0.2.3 — 2022-10-17
- 0.2.2 — 2022-10-17
- 0.2.1 — 2022-10-17
- 0.2.0 — 2022-10-17
- 0.1.13 — 2022-10-17
- … 9 more at https://npm.io/package/antd-theme-vars/versions

## README

# Antd Theme Vars

Since Ant Design does not have a way to handle theme switch.
This package will scan your theme folder and generate css and theme vars to override your less variables.

## How it works:

### Theme files
dark.less
```less
@primary-color: #000000;
```

light.less
```less
@primary-color: #AAAAAA;
```

Output theme.css:
```css
.light {
  --primary-color: #AAAAAA;
}

.dark {
  --primary-color: #000000;
}
```

Output theme.vars:
```js
{
  ['primary-color']: 'var(--primary-color);'
}
```

## How to use
### Create your theme files .less with only variables
- src/themes/dark.less
- src/themes/light.less


**example**: src/themes/dark.less
```less
@primary-color: red; // primary color for all components
@gray-1: #ffffff;
@gray-2: #fafafa;
@gray-3: #f5f5f5;
@gray-4: #f0f0f0;
@gray-5: #d9d9d9;
@gray-6: #bfbfbf;
@gray-7: #8c8c8c;
@gray-8: #595959;
@gray-9: #434343;
@gray-10: #262626;
```

## Create your theme.config.json on root folder
```
{
  "themesPath": "src/themes"
}
```

## Update your next.config.js
```js
const withLess = require('next-with-less')

// only server side
const { theme } = require('antd-theme-vars')

// ...

const nextConfig = {
  // ...
  publicRuntimeConfig: {
    theme: theme.vars // optionally only if you want to use available vars on client-side.
  },
  // ....
}

// ...

module.exports = withLess({
  ...nextConfig,
  lessLoaderOptions: {
    // it will add your themes by context, eg: .dark { --primary-color: red; } .light { --primary-color: yellow; }
    additionalData: theme.css,
    lessOptions: {
      // it will modify less vars, eg: { ['primary-color']: '--var(--primary-color)' }
      modifyVars: theme.vars,
      javascriptEnabled: true,
    }
  }
})

...
```

## Create your theme switcher with Styled Components
**example**: src/themes/Theme.tsx
```jsx
import getConfig from 'next/config';
import { ReactNode, useState } from 'react';
import { ThemeProvider as StyledThemeProvider } from 'styled-components';

export interface ThemeProviderProps {
  children: ReactNode
}

export function ThemeProvider({ children }: ThemeProviderProps) {
  const { publicRuntimeConfig } = getConfig()
  const [dark, setIsDark] = useState(false)

  return (
    <StyledThemeProvider theme={publicRuntimeConfig.theme || {}}>
      <div className={dark ? 'dark': 'light'}>
        <button onClick={() => setIsDark(!dark)}>Toggle theme</button>
        {children}
      </div>
    </StyledThemeProvider>
  )
}
```

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