timetable-app

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README | LICENSE

ThemeSwitch.tsx (1182B)

      1 import {
      2 	FormControl,
      3 	FormLabel,
      4 	RadioGroup,
      5 	FormControlLabel,
      6 	Radio,
      7 	Box,
      8 } from '@mui/material';
      9 import { useColorScheme } from '@mui/material/styles';
     10 import { useCallback } from 'react';
     11 
     12 import type { ChangeEvent } from 'react';
     13 
     14 export default function ThemeSwitch() {
     15 	const { mode, setMode } = useColorScheme();
     16 	const handleThemeChange = useCallback(
     17 		(_: ChangeEvent<HTMLInputElement>, newMode: string) => {
     18 			if (newMode === 'light' || newMode === 'system' || newMode === 'dark') {
     19 				setMode(newMode);
     20 			}
     21 		},
     22 		[setMode],
     23 	);
     24 
     25 	return (
     26 		<Box width={1}>
     27 			<FormControl fullWidth>
     28 				<FormLabel id='theme-selection'>テーマ</FormLabel>
     29 				<RadioGroup
     30 					aria-labelledby='theme-selection'
     31 					value={mode}
     32 					onChange={handleThemeChange}
     33 				>
     34 					<FormControlLabel
     35 						value='light'
     36 						control={<Radio />}
     37 						label='ライト（白系）'
     38 					/>
     39 					<FormControlLabel
     40 						value='dark'
     41 						control={<Radio />}
     42 						label='ダーク（黒系）'
     43 					/>
     44 					<FormControlLabel
     45 						value='system'
     46 						control={<Radio />}
     47 						label='システムの設定に合わせる'
     48 					/>
     49 				</RadioGroup>
     50 			</FormControl>
     51 		</Box>
     52 	);
     53 }