I'm currently working on customizing the color palette for my project, but I am only able to modify the main attribute and not others. My development environment is JavaScript with MUI, 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',
},
},
});