Skip to content

Latest commit

 

History

History
94 lines (87 loc) · 4.1 KB

customize.md

File metadata and controls

94 lines (87 loc) · 4.1 KB

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.

{
  "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.

{
  "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