Crema React
v-3
v-3
  • About Crema
  • Crema 4.x (Next version)
  • Overview
    • Crema Overview
    • Folder Structure
      • @crema
      • page
      • redux
      • shared
      • types
    • GitHub Access
    • Slack Community
    • Figma File
  • Development
    • Installation
      • Pre-Requisites
      • Installing Crema
    • Route Overview
    • Add New Route
    • Auth User
    • Authentication Methods
    • API Calls
    • Multilingual
      • Adding New Language
      • Changing Language
    • Style Framework
  • MUI
    • Theme Color
    • Sidebar Configuration
      • Adding New Menu
      • Menu Color Theme
    • Navigation Style
    • Footer Configuration
      • Footer
      • Footer Type
    • Template Mode
    • Template Direction
  • Next-Js
    • About Next.JS
    • Folder Structure
    • Installing Next jS
    • Authentication
    • Add New Route
    • Deploy to server
  • FAQ
  • React Bootstrap
    • About React-Bootstrap
    • Styled Framework
    • RTL
    • Dark Theme
  • ANT Design
    • About Crema Ant
    • Style Framework
  • Servers
    • Python
    • Laravel
    • Mongoose
  • Credits
  • Crema V-2
Powered by GitBook
On this page

Was this helpful?

  1. MUI

Theme Color

The Crema uses MUI's theming by default. You can create theme color schemes with defining theme configuration objects.

The Crema uses MUI's theming by default. You can create theme color schemes with defining theme configuration objects.

For the configuration options checkout Material UI's configuration https://mui.com/customization/theming/

In the Crema you can find out the configuration @src/@crema/utility/AppContextProvider/defaultConfig.js

You can change defaultTheme value according to your requirements.

He has some default theme options like below you can also change your color according the requirements

src/shared/constants/ColorSets.js

const colorSet = [
  {
    mode: 'light',
    primary: {
      main: '#2196F2',
    },
    secondary: {
      main: '#FF4981',
    },
    background: backgroundLight,
    text: textLight,
    title: 'Light',
  },
  {
    primary: {
      main: '#2196F2',
    },
    secondary: {
      main: '#FF4981',
    },
    background: backgroundDark,
    text: textDark,
    title: 'Dark',
  },
  {
    mode: 'light',
    primary: {
      main: '#2745EA',
    },
    secondary: {
      main: '#F9911C',
    },
    background: backgroundLight,
    text: textLight,
    title: 'Light-1',
  },...
]

Last updated 3 years ago

Was this helpful?