Custom theme

Interface layout

Revisesrc\store\app\index.ts, modify the variables you need to customize

• footerText: Set the end of the page text, which is generally used to display copyright information, and is preset toCopyright © 2024 chansee97
• theme: Global component library topic variable coverage, please refer to the next section for details, preset asthemeConfig
• primaryColor: Theme color configuration, preset to#18a058
• collapsed: Whether to expand or collapse, preset tofalse
• grayMode: Whether to enable gray mode, preset tofalse
• colorWeak: Whether to enable color blind mode, preset tofalse
• loadFlag: Page overload tags, no modification required
• showLogo: Whether to display the logo, preset totrue
• showTabs: Whether to display the tab, preset totrue
• showFooter: Whether to display the end of the page, preset totrue
• showProgress: Whether to display the progress bar, preset totrue
• showBreadcrumb: Whether to display breadcrumb navigation, preset totrue
• showBreadcrumbIcon: Whether to display the breadcrumb navigation diagram, preset totrue
• showWatermark: Whether to display a watermark, preset tofalse
• showSetting: Whether to display the display setting window, preset tofalse
• transitionAnimation: Transition animation type, preset to'fade-slide'
• layoutMode: Interface layout type, preset to'vertical'

Component library styles

Revisesrc\store\app\theme.json, add the style variables you need, please refer toNaive-UI

{
  "common": {
    "primaryColor": "#20a6b3",
    "primaryColorHover": "#24b4c1",
    "primaryColorPressed": "#1c929d",
    "primaryColorSuppl": "#20a6b3",

    "infoColor": "#2080f0",
    "infoColorHover": "#4098fc",
    "infoColorPressed": "#1060c9",
    "infoColorSuppl": "#4098fc",

    "successColor": "#18a058",
    "successColorHover": "#36ad6a",
    "successColorPressed": "#0c7a43",
    "successColorSuppl": "#36ad6a",

    "warningColor": "#f0a020",
    "warningColorHover": "#fcb040",
    "warningColorPressed": "#c97c10",
    "warningColorSuppl": "#fcb040",

    "errorColor": "#d03050",
    "errorColorHover": "#de576d",
    "errorColorPressed": "#ab1f3f",
    "errorColorSuppl": "#de576d"
  }
}