Color Presets

How to change available color presets

Berry has several color themes to choose from, including 6+ preset options. To change the color theme, you can follow these steps:

Color Preset files are available in src\assets\scss\ directory.

src\assets\scss\

..
├── _theme1.module.scss
├── _theme2.module.scss
├── ..
├── ..
├── ..
├── _theme6.module.scss

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

presetColor: theme1

TypeScript

const config = {
    ...
    presetColor: 'default', // default, theme1, theme2 to theme6 available
    ...
    ...
    ...
}

TypeScript

import { PaletteMode } from '@material-ui/core';

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

export default config;

For Remix

Color Preset files are available in app\assets\scss\ directory.

app\assets\scss\

..
├── _theme1.module.scss
├── _theme2.module.scss
├── ..
├── ..
├── ..
├── _theme6.module.scss

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

presetColor: theme1

TypeScript

import type { ConfigProps } from 'types/config';
...

const config: ConfigProps = {
    ...
    presetColor: 'default', // default, theme1, theme2, theme3, theme4, theme5, theme6
    ...
};