Crema React
v-2
v-1v-2v-3v-4 Vitev-4 CRAv-4 Nextjsv-4 nx
v-2
v-1v-2v-3v-4 Vitev-4 CRAv-4 Nextjsv-4 nx
  • About Crema(CRA)
  • Product Overview
  • Folder Structure
  • Installation
    • Pre-Requisites
    • Installing Crema
  • Default Route
  • Customization
    • Template Style
    • Template Mode
    • Template and Sidebar Color
    • Tempate Direction
    • Navigation Style
    • Footer
    • Footer Type
    • Route Transition
  • Multi-Lingual Support
    • Changing Language
    • Adding New Language
  • Sidebar Menu
    • Adding New Menu
  • Route Protection
  • Loggedin User
  • Axios Setup
  • Package.json
  • GitHub Access
  • Slack Community
  • FAQ
  • Next.js
    • About Next.JS
    • Installation
    • Folder Structure
    • Route Protection
    • Deploy to server
  • Servers
    • Python
    • Mongoose
    • Laravel
Powered by GitBook
On this page

Was this helpful?

  1. Customization

Template Style

Last updated 4 years ago

Was this helpful?

We have included two template Styles in the Crema Admin Template. First is Material-UI based Standard theme style and Second is Modern Style. By Default, you will get Standard style, however, switching between the two is very easy. You can change theme style during run-time or during development mode.

Changing Template Style in run time:-

Click on the Settings button on the right corner of the screen just below the notification icon, a drawer will open in which you will find Theme Style Option and from there, you can choose between Standard and Modern theme style.

Changing Template Style in development mode (setting default Style) :-

To set the default template style, go to the following file:-

src/@crema/utility/ContextProvider/defaultConfig.js

In this file, you will find a property named 'themeStyle'. You need to set the value of 'themeStyle' according to your choice from the accepted values. You can find the accepted values of 'themeStyle' in the file with the path:-

src/shared/constants/AppEnums.js

After setting the value of 'themeStyle', you need to set the 'borderRadius' of all the muiComponents present in the 'overrides' property in the defaultConfig.js file.

The value of borderRadius for 'Standard Style' should be fixed at '4' for all the components starting with the word 'Mui'. You don't need to set the value for 'Modern Style' as by default all the values are set according to 'Modern Style'.