Customization

How to customize styles?

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.

Ant Design using less as the development language for styling. Components can customize with override Ant Design Variables.

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

@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

2. Iconly

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.

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" />}
/>