---
order: 5
title: Customize Theme
---

DPL allows you to customize some basic design aspects in order to meet the needs of UI diversity from business and brand, including primary color, border radius, border color, etc.

## Less variables

We are using [Less](http://lesscss.org/) as the development language for styling. A set of less variables are defined for each design aspect that can be customized to your needs.

## How to do it

We recommend [modifyVars](http://lesscss.org/usage/#using-less-in-the-browser-modify-variables) to override the default values of the variables. There are two ways to achieve it in practice.

### 1) Using `theme` property

Specify the `theme` property in the `package.json` or `.roadhogrc` file, whose value can be either an object or the path to a JS file that contains the custom values of specific variables:
- example of directly specifying the custom values as an object:
```js
"theme": {
  "primary-color": "#1DA57A",
},
```
- example of specifying a file path to a JS file:
```js
"theme": "./theme.js",
```

You can write a webpack config about [less-loader modifyVars](https://github.com/webpack/less-loader#less-options).

Note:

- Importing styles from less files is necessary.
  - If you import styles by specifying the `style` option of [babel-plugin-import](https://github.com/ant-design/babel-plugin-import), change it from `'css'` to `true`, which will import the `less` version of DPL.
  - If you import styles from `'@enos/dpl/dist/dpl.css'`, change it to `@enos/dpl/dist/dpl.less`.

### 2) Overriding Less variables

Override variables via less definition files.

Create a standalone less file like the one below, and import it in your project.

   ```css
   @import "~@enos/dpl/dist/dpl.less";   // import official less entry file
   @import "your-theme-file.less";   // override variables here
   ```

Note: This way will load the styles of all components, regardless of your demand, which cause `style` option of `babel-plugin-import` not working.

## Official Themes 🌈

We have some official themes, try them out and give us some feedback!

- 🌑 Dark Theme (supported in 0.7.10+)

### Use dark theme

Method 1: Import dpl.dark.less in the style file:

```js
import '@enos/dpl/dist/dpl.dark.less'; // Introduce the official dark less style entry file
```

If the project does not use Less, you can import dpl.dark.css in the CSS file:

```js
import '@enos/dpl/dist/dpl.dark.css';
```

> Note that you don't need to import `@enos/dpl/dist/dpl.less` or `@enos/dpl/dist/dpl.css` anymore, please remove it, and remove babel-plugin-import `style` config too. You can't enable two or more theme at the same time by this method.

Method 2: using [less-loader](https://github.com/webpack-contrib/less-loader) in `webpack.config.js` to introduce as needed:

```diff
const { getThemeVariables } = require('@enos/dpl/dist/theme');

// webpack.config.js
module.exports = {
  rules: [{
    test: /\.less$/,
    use: [{
      loader: 'style-loader',
    }, {
      loader: 'css-loader', // translates CSS into CommonJS
    }, {
      loader: 'less-loader', // compiles Less to CSS
+     options: {
+       lessOptions: { // If you are using less-loader@5 please spread the lessOptions to options directly
+         modifyVars: getThemeVariables({
+           dark: true, // Turn on dark mode
+         }),
+         javascriptEnabled: true,
+       },
+     },
    }],
  }],
};
```

#### Extra work

Because the icon of Empty component does not support dark style, you need to call the following code in the entry file to replace the icon.但0.7.34版本后可移除此代码，图标会根据主题切换自动变更

```js
import { Empty } from '@enos/dpl';

Empty.useDark();
```