🛠️Project Configuration

Configuration option for whole Template

Able Pro has a single source of truth for default configuration which lets users manage it effectively. It also makes it scalable for new configurations. you can set configs like font, border, theme layout, locale, etc. All those can be configured at ..src/config.js

fontFamily

Inter var

String

set font family

mode

light

String

light, dark

i18n

en

String

en - English

fr - français

ro - Română

zh - 中国人

themeDirection

ltr

boolean

set layout from right to left.

miniDrawer

false

boolean

true, false

container

true

boolean

see layout in stretch

presetColor

default

string

different preset for theme.

themeContrast

false

boolean

set box-shadow.

menuCaption

true

boolean

true, false

src/config.js

export const drawerWidth = 260;

export const twitterColor = '#1DA1F2';
export const facebookColor = '#3b5998';
export const linkedInColor = '#0e76a8';

export let ThemeMode;

(function (ThemeMode) {
  ThemeMode['LIGHT'] = 'light';
  ThemeMode['DARK'] = 'dark';
  ThemeMode['AUTO'] = 'auto';
})(ThemeMode || (ThemeMode = {}));

export let MenuOrientation;

(function (MenuOrientation) {
  MenuOrientation['VERTICAL'] = 'vertical';
  MenuOrientation['HORIZONTAL'] = 'horizontal';
})(MenuOrientation || (MenuOrientation = {}));

export let ThemeDirection;

(function (ThemeDirection) {
  ThemeDirection['LTR'] = 'ltr';
  ThemeDirection['RTL'] = 'rtl';
})(ThemeDirection || (ThemeDirection = {}));

...

// ==============================|| THEME CONFIG ||============================== //

const config = {
    fontFamily: `Inter var`,
    i18n: 'en',
    menuOrientation: MenuOrientation.VERTICAL,
    menuCaption: true,
    miniDrawer: false,
    container: false,
    mode: ThemeMode.LIGHT,
    presetColor: 'default',
    themeDirection: ThemeDirection.LTR,
    themeContrast: false
};

export default config;

Last updated