declarative-colors.tsx

const lightTheme = createTheme({
  palette: {
    daysToClose: {
      contrastText: “white”,
      main: “#444444”
    },
    appBackground: {
      main: “#e3e3e3”,
      contrastText: “#444444”
    }
  }
});
const darkTheme = createTheme({
  palette: {
    mode: ‘dark’,
    daysToClose: {
      contrastText: “white”,
      main: “#444444”
    },
    appBackground: {
      main: “black”,
      contrastText: “white”
    },
    text: {
      secondary: “#e3e3e3”
    }
  }
});

export default function App() {
  const body = (
    <Box
      display=”flex”
      backgroundColor=”appBackground.main”
      color=”appBackground.contrastText”
      padding=”12px”
      justifyContent=”space-between”
    >
      <Typography>123 Test</Typography>
      <Box backgroundColor=”daysToClose.main” color=”daysToClose.contrastText”>
        <ThemeProvider theme={darkTheme}>
          <Typography>10</Typography>
          <Typography color=”text.secondary” variant=”body2″>
            days to close
          </Typography>
        </ThemeProvider>
      </Box>
    </Box>
  );
  return (
    <Box display=”flex” gap=”24px” flexDirection=”column”>
      <ThemeProvider theme={lightTheme}>{body}</ThemeProvider>
      <ThemeProvider theme={darkTheme}>{body}</ThemeProvider>
    </Box>
  );
}