You can find all the configuration files related to the RapidAdminReact® theme in the @rapidAdmin/theme directory. Below is the directory structure for the theme directory.
theme
├── colors
│ ├── rapidAmber.js
│ ├── rapidBlue.js
│ ├── rapidDarkBlue.js
│ ├── rapidGreen.js
│ ├── rapidGrey.js
│ ├── rapidLightBlue.js
│ ├── rapidPink.js
│ └── rapidRed.js
├── darkTheme
│ ├── rapidActionColorsDark.js
│ ├── rapidBackgroundDark.js
│ └── rapidTextColorDark.js
├── index.js
├── lightTheme
│ ├── rapidActionColors.js
│ ├── rapidBackground.js
│ └── rapidTextColor.js
├── theme.js
├── themeDark.js
└── typography
└── rapidTypography.js
You can customize the existing colors and typography files or you can add your own colors as well using the same format as any of the existing color or typography files.
Adding New Color Files
Simply create a new file in the colors directory. Let’s create a sample file and call it purple.js. Once you have created the file create an object defining all the material colors in the files. For more information on material colors refer Material Colors
const purple = {
50: '#E0EBFA',
100: '#B3CEF3',
200: '#80ADEC',
300: '#4D8CE4',
400: '#2673DE',
500: '#005AD8',
600: '#0052D4',
700: '#0048CE',
800: '#003FC8',
900: '#002EBF',
A100: '#E7EBFF',
A200: '#B4C1FF',
A400: '#8197FF',
A700: '#6881FF',
};
export default purple;
Once, you have created the color file you can then easily assign this to the theme object. To do so just import the javascript object that you just created and assign it to the palette you want to override in the theme in the theme.js file. If you want to override the color in the dark theme you can do so in the themeDark.js file.
import {createMuiTheme} from '@material-ui/core/styles';
import purple from "./colors/purple";
const theme = createMuiTheme({
palette: {
primary: purple,
},
});
Generating Material Colors
There are a lot of online tools which you can use to generate the material color variants from the base color that you want to use. You can have a look at Material Design Pallete Generator
