Skip to main content

Theme Configurations

Overview

In order to configure your template, you will need to work with the src/configs/themeConfig.ts file. This file contains various template configurations along with their valid values. By making changes to these configurations, you can customize the template according to your specific requirements.

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

warning

To ensure consistent layout and avoid unexpected behavior, it is recommended to keep the contentWidth property equal for the navbar content, page content, and footer content.

Important

Before you can see the configuration changes reflected in the template, it's essential to clear your browser's local storage. You can find instructions on how to clear local storage in the browser here.

Properties

The themeConfig object contains various properties and their default values that control the appearance and behavior of the template. Following are the properties with their values that we have used in the theme:


Property Options

Here is a table that lists all the properties available in the themeConfig object, along with their possible values and a brief description of each:

PropertyValuesDescription
templateNamestringSpecifies the name of the template, project, or company
homePageUrlstringSets the URL for the home page
settingsCookieNamestringSpecifies the name of the cookie that stores the settings
modesystem, light, dark,Sets the color mode for the template (system, light, or dark)
skindefault, borderedChanges the skin of the template
semiDarktrue, falseEnables or disables semi-dark mode for the template
layoutvertical, horizontal, collapsedDefines the layout type
layoutPaddingnumberSets the padding for the layout in px.
compactContentWidthnumberSpecifies the width of the content area
navbar.typefixed, staticDetermines the position of the navbar (fixed or static)
navbar.contentWidthcompact, wideSets the width of the navbar
navbar.floatingtrue, falseEnables or disables floating for the navbar
navbar.detachedtrue, falseControls whether the navbar is detached
navbar.blurtrue, falseEnables or disables blur for the navbar
contentWidthcompact, wideSets the width of the content area
footer.typefixed, staticSpecifies the type of the footer
footer.contentWidthcompact, wideSets the width of the footer
footer.detachedtrue, falseControls whether the footer is detached
disableRippletrue, falseEnables or disables ripple effect
toastPositiontop-right, top-center, top-left, bottom-right, bottom-center, bottom-leftSpecifies the position of the toast message

You can customize these properties according to your project's requirements to achieve the desired look and feel for your template.