# UI customization
Use a `public/config.json` (or `dist/config.json` after build) file for customizing theme, logos,...

## Images
Change the image of the logo, login banner, error page, etc.
```json
{
  "logo": "assets/logo.svg",
  "banner": "assets/banner.svg",
  "error": {
    "404": "assets/404.png",
    "403": "assets/403.png",
    "500": "assets/500.png"
  }
}
```

- `logo` changes the logo top-left side image.
- `banner` changes the login banner image.
- `error.404` change the image of error Page not found.
- `error.403` change the image of error Forbidden.
- `error.500` change the image of error Internal Server Error.

## Theme
Customize themes like colors, border color, etc.
```json
{
  "theme": {
    "@primary-color": "#1890ff",
    "@success-color": "#52c41a",
    "@processing-color": "#1890ff",
    "@warning-color": "#faad14",
    "@error-color": "#f5222d",
    "@font-size-base": "14px",
    "@heading-color": "rgba(0, 0, 0, 0.85)",
    "@text-color": "rgba(0, 0, 0, 0.65)",
    "@text-color-secondary": "rgba(0, 0, 0, 0.45)",
    "@disabled-color": "rgba(0, 0, 0, 0.25)",
    "@border-color-base": "#d9d9d9",
    "@logo-width": "256px",
    "@logo-height": "64px",
    "@banner-width": "700px",
    "@banner-height": "110px",
    "@error-width": "256px",
    "@error-height": "256px"
  }
}
```

- `@logo-background-color` changes the logo background color.
- `@project-nav-background-color` changes the navigation menu background color of the project .
- `@project-nav-text-color` changes the navigation menu background color of the project view.
- `@navigation-background-color` changes the navigation menu background color.
- `@navigation-text-color` changes the navigation text color.
- `@primary-color` change the major background color of the page (background button, icon hover, etc).
- `@primary-color-light` changes selected menu item bg-color and hovered table cell bg-color.
- `@dashboard-graph-normal-color` changes the -normal- color of stroke in graphs in the Root admin's dashboard.
- `@dashboard-graph-exception-color` changes the -danger- color of stroke in graphs in the Root admin's dashboard.
- `@dashboard-tile-runningvms-bg` changes bg color of the "Running VMs" tile in the non-Root admin's dashboard.
- `@dashboard-tile-stoppedvms-bg` changes bg color of the "Stopped VMs" tile in the non-Root admin's dashboard.
- `@dashboard-tile-totalvms-bg` changes bg color of the "Total VMs" tile in the non-Root admin's dashboard.
- `@dashboard-tile-totalvolumes-bg` changes bg color of the "Total volumes" tile in the non-Root admin's dashboard.
- `@dashboard-tile-totalnetworks-bg` changes bg color of the "Total networks" tile in the non-Root admin's dashboard.
- `@dashboard-tile-totalips-bg` changes bg color of the "Total IPs" tile in the non-Root admin's dashboard.
- `@link-color` changes the link color.
- `@link-hover-color` changes the link hover color.
- `@loading-color` changes the message loading color and page loading bar at the top page.
- `@success-color` change success state color.
- `@processing-color` change processing state color. Exp: progress status.
- `@warning-color` change warning state color.
- `@error-color` change error state color.
- `@heading-color` change table header color.
- `@text-color` change in major text color.
- `@text-color-secondary` change of secondary text color (breadcrumb icon).
- `@disabled-color` change disable state color (disabled button, switch, etc).
- `@border-color-base` change in major border color.
- `@logo-width` change the width of the logo top-left side.
- `@logo-height` change the height of the logo top-left side.
- `@banner-width` changes the width of the login banner.
- `@banner-height` changes the height of the login banner.
- `@error-width` changes the width of the error image.
- `@error-height` changes the height of the error image.

Assorted primary theme colours:

- Blue: #1890FF
- Red: #F5222D
- Yellow: #FAAD14
- Cyan: #13C2C2
- Green: #52C41A
- Purple: #722ED1

Also, to add other properties, we can add new properties into `theme.config.js` based on the Ant Design Vue Less variable.
Refer: https://www.antdv.com/docs/vue/customize-theme/#Ant-Design-Vue-Less-variables