I am trying to customize the palette colors for my project but I'm able to use only main attribute of it and not other. I am using MUI under JavaScript not Typescript
import './App.css';
import {BrowserRouter as Router, Route, Routes} from 'react-router-dom'
import Navbar from './components/Navbar/Navbar';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import Home from './components/Home/Home';
import Contact from './components/Contact/Contact';
import Pricing from './components/Pricing/Pricing';
import About from './components/About/About';
const theme = createTheme({
palette: {
primary: {
light: '#f5f6fc', //highlight
main: '#f6f6f6', //site bg gray...this works (light, dark doesn't)
dark: '#000629', //navbar items
contrastText: '#fff', //main text large font
},
secondary: {
light: '#cdd0d9', //paragraph text dark gray
main: '#dce6ff', // for content bg light blue......this works (light, dark doesn't)
dark: '#ba000d', //hover buttons
contrastText: '#000',
},
},
});
For adding multiple primary/secondary colors, you'll need to use custom variables.
Replacing primary to myPrimaryColor or something of your choice will make it custom variable which can be used down the line.
const theme = createTheme({
myPrimaryColor: {
success: 'green',
danger: 'red',
},
});
followed by
`theme.myPrimaryColor.success`