> For the complete documentation index, see [llms.txt](https://hypeople-studio.gitbook.io/yoda/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hypeople-studio.gitbook.io/yoda/react-version/customization.md).

# Customization

## Change Styles

Let's start with how to change Yoda color styles.

You can find our variables can be found `src/assets/less/_variables`

User variables can be found in `src/assets/less/_user-variables`. Uncomment Yoda variable on file and change it with yours.

## Customize Ant Design Components

Yoda Admin Template created based on [Ant Design Components](https://ant.design/components/overview/). 

Ant Design using less as the development language for styling. Components can customize with override [Ant Design Variables.](https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less) 

Ant Design variables can be found in `src/assets/less/variables/_ant-variables`

```css
@import "../../../../node_modules/antd/lib/style/themes/default.less";

@primary-color: @primary-1;
@info-color: @info-1;
@text-color: @b-100;
```

## Icon Customization

We used two different Icon set on Yoda Admin Template

1. [Remix Icon](https://react-icons.github.io/react-icons/icons?name=ri) 
2. [Iconly](https://react-iconly.jrgarciadev.com/)

Ant Design has special variable for icon font-prefix. If you want to use special icon make sure you add `.remix-icon` class to your icons. Or you can change your own prefix and use it for your icons.

```jsx
Ant Icon-font Css Prefix
@iconfont-css-prefix: remix-icon;

Icon Usage on Button component


 <Button
  className="da-mr-16 da-mb-16"
  type="primary"
  shape="circle"
  icon={<RiSearchLine className="remix-icon" />}
/>
```