Dark Theme

[elicharlese]

Dark

To create a dark theme in TypeScript and MUI, you can create a theme.ts file and set up a custom theme with a dark color scheme. Here's an example:

import { createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
  palette: {
    type: 'dark',
    primary: {
      main: '#90caf9',
    },
    secondary: {
      main: '#f48fb1',
    },
  },
});

export default theme;

In this example, we're creating a dark theme with a primary color of #90caf9 and a secondary color of #f48fb1. You can customize the colors to your preference.

To use this theme in your application, you'll need to wrap your app in a ThemeProvider and pass in the theme object. Here's an example:

import React from 'react';
import { ThemeProvider } from '@material-ui/core/styles';
import theme from './theme';

function App() {
  return (
    <ThemeProvider theme={theme}>
      {/* Your app goes here */}
    </ThemeProvider>
  );
}

export default App;

Once you've set up the theme, all MUI components in your app will use the dark color scheme.

Light

import { createTheme } from '@material-ui/core/styles';

const lightTheme = createTheme({
  palette: {
    type: 'light',
    primary: {
      main: '#0069d9',
    },
    secondary: {
      main: '#19857b',
    },
    background: {
      default: '#fff',
      paper: '#fff',
    },
  },
});

export default lightTheme;

In this theme, we set the type of the palette to light and specify the primary and secondary colors using the main property. We also set the background color to white for both the default and paper elements. You can modify these colors to fit your needs.