import { useState } from "react";
import "@fontsource/roboto";
import {
  Card,
  CardHeader,
  Switch,
  CardContent,
  Box,
  Container,
  Typography,
  FormGroup,
  FormControlLabel,
  CssBaseline,
} from "@mui/material";
import { createTheme, ThemeProvider } from "@mui/material/styles";


<div className="App">
<Box component="div" p={5}></Box>
<Card>
  <CardHeader
    action={
        <FormGroup>
        <FormControlLabel
          control={
              <Switch checked={isDarkTheme} onChange={changeTheme} />
          }
          />
      </FormGroup>
    }
    />
  <CardContent>
    <Typography variant="h3" component="h3">
    {isDarkTheme? "Dark Theme" : "Light Theme"}
    </Typography>
  </CardContent>
</Card>
</div>