How to create your own custom theme
For an optimal experience with our template, we suggest utilizing the default theme we've provided. Crafting a custom theme can be complex and demands considerable time and expertise.
Please be aware that introducing a new theme may lead to runtime errors, given that our entire template is closely integrated with the existing theme settings. If you decide to create your own theme, please be aware that it may alter the intended appearance of the template. Should any issues arise, you may need to address them independently.
Still want to create your own custom theme, please follow the steps mentioned below:
-
Open the file
src/components/theme/userTheme.ts
and add your custom theme as shown below:src/components/theme/userTheme.tsconst userTheme = () => {
return {
// Write your custom theme object here.
colorSchemes: {
...
},
mainColorChannels: {
...
},
customShadows: {
...
}
} as Theme
} -
Open the
src/components/theme/index.tsx
file and add and remove the imports and shown below:- import defaultCoreTheme from '@core/theme'
+ import userTheme from './userTheme' -
Now use
userTheme
instead ofdefaultCoreTheme
in theCustomThemeProvider
component as shown below:src/components/theme/index.tsx- const coreTheme = deepmerge(defaultCoreTheme(), ...)
+ const coreTheme = deepmerge(userTheme(), ...)