# Settings Context

# Overview

Settings Context has been created so that the template is independent of the redux store for storing the variables used in the template.

# Properties

Following are the properties and their values that are stored in the Settings Context:

Properties Values Description
skin default, bordered Change template skin
mode light, dark, semi-dark Set Light or Dark mode for the template
direction ltr, rtl Content direction
navCollapsed true, false If true, the vertical navigation menu is collapsed
navHidden true, false If true, the navigation menu is hidden
layout vertical, horizontal Set Vertical or Horizontal layout for the template
lastLayout vertical, horizontal For internal usage (used when window is resized in Horizontal layout)
verticalNavToggleType accordion, collapse Set behavior of menu group in the vertical navigation menu
contentWidth full, boxed Full or container width of AppBar, Content and Footer
appBar fixed, static, hidden Change appBar position
appBarBlur true, false If true, background of appBar will have opacity
footer fixed, static, hidden Change footer position
themeColor primary, secondary, success, error, warning, info Change primary color in the template
toastPosition top-left, top-center, top-right, bottom-left, bottom-center, bottom-right Default toast position of react-hot-toast

# LocalStorage

Following are the properties and their values that are stored in localStorage from the Settings Context:

Properties Values Description
skin default, bordered Change template skin
mode light, dark, semi-dark Set Light or Dark mode for the template
direction ltr, rtl Content direction
navCollapsed true, false If true, the vertical navigation menu is collapsed
verticalNavToggleType accordion, collapse Set behavior of menu group in the vertical navigation menu
contentWidth full, boxed Full or container width of AppBar, Content and Footer
appBarBlur true, false If true, background of appBar will have opacity
themeColor primary, secondary, success, error, warning, info Change primary color in the template

# Provider and Consumer

Settings context relies on the context feature of React (opens new window) to pass the settings down to the components. Settings context exports SettingsProvider and SettingsConsumer and they must be parents of ThemeComponent in src/pages/_app.tsx file. See the following code:

<SettingsProvider>
  <SettingsConsumer>
    {({ settings }) => (
      <ThemeComponent settings={settings}>{getLayout(<Component {...pageProps} />)}</ThemeComponent>
    )}
  </SettingsConsumer>
</SettingsProvider>
Last Updated: 3/11/2024, 6:51:36 AM