Mantis MUI React
v3.1.0
v3.1.0
  • Documentation
  • Pre-requisites
  • Quick Start
  • Folder Structure
  • State Management
  • Internationalization
  • Authentication
    • Switch to Auth0
    • Switch to Firebase
    • Switch to AWS Cognito
  • Axios API Calls
  • Routing
  • Project Configuration
  • Color Presets
  • Theme/Style Configuration
  • How to
    • Login as First Page
    • Remove Authentication
      • Vite
      • NextJS
  • Figma
  • Integration
    • Seed
    • Comparison
    • To Existing Project
  • Components
    • Avatar
    • BreadCrumb
    • Button
    • Dot
    • Main Card
    • Progress
    • SnackBar
    • Tooltip
    • Transitions
  • Dependencies
    • Vite js
    • Next js
  • Roadmap
  • Support
  • Changelog
  • Mantis Eco System
  • FAQ
Powered by GitBook
On this page

Color Presets

How to change available color presets

Mantis come up with 6+ theme color presets. You can now change the available color presets by doing the following steps:

Color Preset files are available in src\themes\theme\ directory.

..
├── default.js
├── theme1.js
├── ..
├── ..
├── ..
├── theme8.js

Edit & Choose your desire preset color setting in src\config.js file. Change the presetColor value to theme1, theme2 to theme6

config.js
const config = {
    ...
    presetColor: 'default', // default, theme1, theme2 to theme8 available
    ...
    ...
    ...
}
config.ts
import { PaletteMode } from '@material-ui/core';

const config: {
    ...
    theme: PaletteMode;
    ...
} = {
    ...
    presetColor: 'default', // default, theme1, theme2, theme3 upto theme8
    ...
};

export default config;
PreviousProject ConfigurationNextTheme/Style Configuration