mui_boost_provider_quickstart_with_theme_mode_toggle.ts

1import React from 'react';
2import { BoostProvider, useThemeMode } from '@andreciornavei/mui-boost';
3import { Button, Box, Typography } from '@mui/material';
4
5const ThemeToggle = () => {
6  const { mode, toggleThemeMode } = useThemeMode();
7
8  return (
9    <Box sx={{ p: 4, textAlign: 'center' }}>
10      <Typography variant="h4" gutterBottom>
11        Current Mode: {mode}
12      </Typography>
13      <Button variant="contained" onClick={toggleThemeMode}>
14        Toggle Theme
15      </Button>
16    </Box>
17  );
18};
19
20const App = () => {
21  return (
22    <BoostProvider>
23      <ThemeToggle />
24    </BoostProvider>
25  );
26};
27
28export default App;