> For the complete documentation index, see [llms.txt](https://codedthemes.gitbook.io/datta/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://codedthemes.gitbook.io/datta/project-config.md).

# Project Configuration

Datta Able has a single source of truth for the default configuration, allowing users to manage it effectively. It also makes it scalable for new configurations. You can set configs like font, border, theme, layout, etc. All those can be configured at **`src/config`**

{% tabs %}
{% tab title="VITE ( TS )" %}
{% code title="src/config.ts" %}

```typescript
import { DefaultConfigProps } from 'types/config';

// ==============================|| THEME CONSTANT ||============================== //

export const APP_DEFAULT_PATH = '/dashboard/default';
export const DRAWER_WIDTH = 260;

export enum MenuOrientation {
  VERTICAL = 'vertical',
  HORIZONTAL = 'horizontal',
  TAB = 'tab',
  LAYOUT2 = 'layout 2',
  LAYOUT3 = 'layout 3'
}

export enum ThemeMode {
  LIGHT = 'light',
  DARK = 'dark',
  AUTO = 'auto'
}

export enum Gender {
  MALE = 'Male',
  FEMALE = 'Female'
}
export enum ThemeDirection {
  LTR = 'ltr',
  RTL = 'rtl'
}

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

const config: DefaultConfigProps = {
  fontFamily: `'Public Sans', sans-serif`,
  i18n: 'en',
  menuOrientation: MenuOrientation.VERTICAL,
  container: false,
  mode: ThemeMode.LIGHT,
  presetColor: 'default',
  caption: true,
  sidebarTheme: false,
  themeDirection: ThemeDirection.LTR,
  customColor: 'preset-1',
  headerColor: '',
  navbarColor: '',
  logoColor: '',
  navbarCaptionColor: '',
  navbarImg: '',
  menuIcon: 'preset-1',
  menuLinkIcon: 'preset-1'
};

export default config;
```

{% endcode %}
{% endtab %}

{% tab title="VITE ( JS )" %}
{% code title="src/config.js" %}

```javascript
// ==============================|| THEME CONSTANT ||============================== //

export const APP_DEFAULT_PATH = '/dashboard/default';
export const DRAWER_WIDTH = 260;

export let MenuOrientation;

(function (MenuOrientation) {
  MenuOrientation['VERTICAL'] = 'vertical';
  MenuOrientation['HORIZONTAL'] = 'horizontal';
  MenuOrientation['TAB'] = 'tab';
  MenuOrientation['LAYOUT2'] = 'layout 2';
  MenuOrientation['LAYOUT3'] = 'layout 3';
})(MenuOrientation || (MenuOrientation = {}));

export let ThemeMode;

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

export let Gender;

(function (Gender) {
  Gender['MALE'] = 'Male';
  Gender['FEMALE'] = 'Female';
})(Gender || (Gender = {}));

export let ThemeDirection;

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

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

const config = {
  fontFamily: `'Public Sans', sans-serif`,
  i18n: 'en',
  menuOrientation: MenuOrientation.VERTICAL,
  container: false,
  mode: ThemeMode.LIGHT,
  presetColor: 'default',
  caption: true,
  sidebarTheme: false,
  themeDirection: ThemeDirection.LTR,
  customColor: 'preset-1',
  headerColor: '',
  navbarColor: '',
  logoColor: '',
  navbarCaptionColor: '',
  navbarImg: '',
  menuIcon: 'preset-1',
  menuLinkIcon: 'preset-1'
};

export default config;
```

{% endcode %}
{% endtab %}
{% endtabs %}