# Theme Configurations

# Overview

To configure your template, we will be using the src/configs/themeConfig.ts file, which has all the template configurations listed with their valid values. Just change the configurations as per your requirement and you are done.

If you are looking to match up with one of our demos, then please read demo configs doc.

Important

Make sure you clear the browser's local storage in order to see the config changes in the template. Refer: How to clear local storage? (opens new window)

# Properties

Following are the properties with their values that we have used in the theme:

# beforeVerticalNavMenuContentPosition

If the value is set to static, then the content will get scrolled along with the vertical navigation. If the value is set to fixed, then the content will not get scrolled along with the vertical navigation.

# beforeVerticalNavMenuContentPosition: 'static'


add-static-content-before-menu-items

# beforeVerticalNavMenuContentPosition: 'fixed'


add-fixed-content-before-menu-items

# afterVerticalNavMenuContentPosition

If the value is set to static, then the content will get scrolled along with the vertical navigation. If the value is set to fixed, then the content will not get scrolled along with the vertical navigation.

# afterVerticalNavMenuContentPosition: 'static'


add-static-content-after-menu-items

# afterVerticalNavMenuContentPosition: 'fixed'


add-fixed-content-after-menu-items

# Property Options

Following is the table of all the properties and their possible values that are available in the theme configurations:

Properties Values Description
templateName string Name of the template, project or company
layout vertical, horizontal Set Vertical or Horizontal layout for the template
mode light, dark, semi-dark Set Light or Dark mode for the template
direction ltr, rtl Content direction
skin default, bordered Change template skin
contentWidth full, boxed Full or container width of AppBar, Content and Footer
footer fixed, static, hidden Change footer position
routingLoader true, false Loader on top of the app on route change
navHidden true, false If true, the navigation menu is hidden
menuTextTruncate true, false If true, text truncate in the navigation menu is enabled
navSubItemIcon string Change icon for the sub menus in the navigation menu
verticalNavToggleType accordion, collapse Set behavior of menu group in the vertical navigation menu
navCollapsed true, false If true, the vertical navigation menu is collapsed
navigationSize number Width of navigation menu when menu is not collapsed
collapsedNavigationSize number Width of navigation menu when menu is collapsed
afterVerticalNavMenuContentPosition fixed, static Position of the content which is added after the vertical navigation menu
beforeVerticalNavMenuContentPosition fixed, static Position of the content which is added before the vertical navigation menu
horizontalMenuToggle click, hover Set behavior of menu group in the horizontal navigation menu
horizontalMenuAnimation true, false If true, animation is enabled for the horizontal navigation menu
appBar fixed, static, hidden Change appBar position
appBarBlur true, false If true, background of appBar will have opacity
responsiveFontSizes true, false If true, responsive font sizes are enabled
disableRipple true, false If true, the Ripple effect is disabled
disableCustomizer true, false If true, customizer is disabled as right sidebar to configure in live app
toastPosition top-left, top-center, top-right, bottom-left, bottom-center, bottom-right Set default toast position in the template
Last Updated: 3/11/2024, 6:51:36 AM