Theme Fonts

  • To get the default value of font family or headning font family style, navigate to this path src/store/setting/state.ts.
Body Font Family
  • Property: "body_font_family"
  • for font style of body.
  • Please add the default font family for according to your requirements instead of null. See the code below for the necessary changes.
  • Values are in string

Example

"body_font_family": {"value": null}
Heading Font Family
  • Property: "heading_font_family"
  • for font style of heading.
  • Please add the default font family for according to your requirements instead of null. See the code below for the necessary changes.
  • Values are in string

Example

"heading_font_family": {"value": null}
Font Size
  • Property: "theme_font_size"
  • for font size.
  • Choices: "theme-fs-sm", "theme-fs-md", "theme-fs-lg"
  • Values are in string

Example

"theme_font_size": {"value": "theme-fs-md"}
To get the current value of the following you can use:
  • first import useSelector from next-redux.
  • import the selectors files from src/store/setting/selectors in your component.
  • import this file as top of your component using following example code in your component.
import { useSelector } from "next-redux";
import * as SettingSelector from '../store/setting/selectors'
  • then use the following code in your component to get the current value.
Body Font family
const bodyFontFamily = useSelector(SettingSelector.body_font_family)
Heading Font Family
const headingFontFamily = useSelector(SettingSelector.heading_font_family)
Font Size
const themeFontSize = useSelector(SettingSelector.theme_font_size);
To use action you can use dispatch to update state.js.
  • first import usedispatch from next-redux.
  • import the actions files from src/store/setting/actons in your component.
  • import this file as top of your component using following example code in your component.
import { useDispatch } from "next-redux";
import { body_font_family } from "../../../store/setting/actions";
  • then write the following code inside the function component for use of dispatch method inside your component.
const dispatch = useDispatch();
  • then use the following code in your component to dispatch or change the new value of scheme.
Body Font family
dispatch(body_font_family('Inter'))
Heading Font Family
dispatch(heading_font_family('Inter'))
Font Size
dispatch(theme_font_size('value'))