Material UI Theme provider With REACT

Material UI Theme provider With REACT

//theme.ts
import { createTheme } from '@mui/material/styles';

// Light Theme
const lightTheme = createTheme({
palette: {
mode: 'light',
primary: {
main: '#1976d2', // Blue primary color
},
secondary: {
main: '#dc004e', // Pink secondary color
},
background: {
default: '#f5f5f5', // Light background color
},
},
typography: {
fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', // Global font family
h1: {
fontSize: '2.5rem',
fontWeight: 700,
},
h2: {
fontSize: '2rem',
fontWeight: 600,
},
},
});

// Dark Theme
const darkTheme = createTheme({
palette: {
mode: 'dark', // Enables dark mode
primary: {
main: '#90caf9', // Light blue for dark mode
},
secondary: {
main: '#f48fb1', // Light pink for dark mode
},
background: {
default: '#121212', // Dark background for the whole app
paper: '#1d1d1d', // Dark paper background for card-like components
},
text: {
primary: '#ffffff', // Light text on dark background
secondary: '#bdbdbd', // Slightly dimmed text for secondary content
},
action: {
active: '#ffffff', // Active states (hover, focus, etc.)
},
},
typography: {
fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
h1: {
fontSize: '2.5rem',
fontWeight: 700,
},
h2: {
fontSize: '2rem',
fontWeight: 600,
},
h3: {
fontSize: '1.75rem',
fontWeight: 500,
},
body1: {
fontSize: '1rem',
},
body2: {
fontSize: '0.875rem',
},
},
components: {
MuiButton: {
styleOverrides: {
root: {
borderRadius: '8px',
},
},
},
MuiCard: {
styleOverrides: {
root: {
backgroundColor: '#1d1d1d', // Card background color
},
},
},
MuiTypography: {
styleOverrides: {
h1: {
fontSize: '2.5rem',
fontWeight: 700,
color: '#ffffff', // White text for headings
},
h2: {
fontSize: '2rem',
fontWeight: 600,
color: '#ffffff', // White text for headings
},
body1: {
color: '#ffffff', // White text for body content
},
},
},
MuiAppBar: {
styleOverrides: {
root: {
backgroundColor: '#212121', // Dark background for AppBar
color: '#ffffff', // White text color
boxShadow: 'none', // Remove shadow for a flat look
},
},
},
MuiIconButton: {
styleOverrides: {
root: {
color: '#ffffff', // Ensure icons appear in white on the dark AppBar
},
},
},
MuiCssBaseline: {
styleOverrides: {
body: {
backgroundColor: '#121212', // Dark background color for body
color: '#ffffff', // Ensures text color is white on dark background
margin: 0, // Remove default margin
fontFamily: 'Roboto, Arial, sans-serif', // Set default font family
},
},
},
},
});

export { lightTheme, darkTheme };

Тэги:

#Learning #React-Router-Dom_and_Typescript_Add_Multiple_Layout_With_MUI #React-Router-Dom #Typescript #Multiple_Layout #MUI #React_UI #Material_UI #React_With_Material_UI #React_+_Material_UI #React_and_Material_UI #React_with_Multiple_Layout #React_add_Multiple_Layout #React_add_Multiple_Layout_with_Material_UI #Material_UI_Theme_provider_With_REACT #Material_UI_Theme_provider #Theme_provider

Скачать видео