When we use UI libraries like Material UI in our React project, sometimes we need to customize color in both dark and light modes instead of using its default colors. This post will instruct you how to do that. First, make sure you have installed Material UI if you have not installed it yet, let's type: npm install @mui/material @emotion/react @emotion/styled Next, we will create a file named custom-themes.ts : // custom-themes.ts import { experimental_extendTheme as extendTheme } from " @mui/material/styles " ; //If you are using TypeScript, you must declare your custom color's name in both PaletteOptions and Palette in module "@mui/material/styles" declare module " @mui/material/styles " { interface PaletteOptions { " bg-text-input " : string ; } interface Palette { " bg-text-input " : string ; } } const customTheme = extendTheme ({ cssVarPrefix : "" , colorSchemes : { light : { palette : { " bg-text-input " : " #C0C0C0 " , // Specify color in light mode for "bg-text-input" }, }, dark : { palette : { "…