Theming

The template offers a powerful and flexible theming system that allows for deep customization to suit your branding and aesthetic needs. Below is a comprehensive guide to utilizing the theming capabilities within the template, with insights from Material-UI (MUI).

Theme Structure

The theming system is structured into specific folders that contain TypeScript files for defining various theming options:

  • src/theme/base: Contains foundational theme settings that apply universally.
  • src/theme/dark: Holds the theme settings for the dark mode variant.
  • src/theme/light: Contains the theme settings for the light mode variant.


Each of these folders contains files that contribute to the theme's configuration:

  • create-components.tsx: Defines component-level overrides for MUI components.
  • create-options.ts: Sets up the options for theme customization.
  • create-palette.ts: Establishes the color palette used across the dashboard.
  • create-shadows.ts: Provides drop shadow definitions for UI elements.
  • create-typography.ts: Specifies typography settings such as font size, weight, and family.
Color Presets

The dashboard template leverages a dynamic color system defined in

utils.ts
that allows the application of different color presets for primary UI elements. The
getPrimary
function maps preset names to color values:

1export const getPrimary = (preset?: ColorPreset): PaletteColor => { 2 // ... switch case for presets 3};

Users can switch between predefined color presets such as 'royalBlue', 'livingCoral', and others, to instantly change the look and feel of the dashboard.

Customizing Dimensions

For customization of the layout dimensions, such as sidebar width and header height, users need to modify the

utils.ts
for TypeScript templates or
utils.js
for JavaScript templates.

Within

utils.ts
, you'll find predefined constants:

1// Extended Sidebar Layout 2export const SIDEBAR_WIDTH = 288; 3export const SIDEBAR_WIDTH_COLLAPSED = 98; 4export const HEADER_HEIGHT = 54; 5 6// Common 7export const BORDER_RADIUS = 6; 8export const SPACING_UNIT = 10;

These constants set the default values for the sidebar's width (both expanded and collapsed) and the header's height. Changing these values will immediately reflect in the layout's dimensions.

These constants ensure consistency throughout the dashboard and can be adjusted to modify the UI's spacing and border styles globally.