build ok,

002_source/cms/src/components/dashboard/settings/theme-switch.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import CardHeader from '@mui/material/CardHeader';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Radio from '@mui/material/Radio';
+import RadioGroup from '@mui/material/RadioGroup';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { Gear as GearIcon } from '@phosphor-icons/react/dist/ssr/Gear';
+import { Moon as MoonIcon } from '@phosphor-icons/react/dist/ssr/Moon';
+import { Sun as SunIcon } from '@phosphor-icons/react/dist/ssr/Sun';
+
+export function ThemeSwitch(): React.JSX.Element {
+  return (
+    <Card>
+      <CardHeader
+        avatar={
+          <Avatar>
+            <GearIcon fontSize="var(--Icon-fontSize)" />
+          </Avatar>
+        }
+        title="Theme options"
+      />
+      <CardContent>
+        <Card variant="outlined">
+          <RadioGroup
+            defaultValue="light"
+            sx={{
+              gap: 0,
+              '& .MuiFormControlLabel-root': {
+                justifyContent: 'space-between',
+                p: '8px 12px',
+                '&:not(:last-of-type)': { borderBottom: '1px solid var(--mui-palette-divider)' },
+              },
+            }}
+          >
+            {[
+              { title: 'Light mode', description: 'Best for bright environments', value: 'light', icon: SunIcon },
+              { title: 'Dark mode', description: 'Recommended for dark rooms', value: 'dark', icon: MoonIcon },
+              { title: 'System', description: "Adapts to your device's theme", value: 'system', icon: SunIcon },
+            ].map((option) => (
+              <FormControlLabel
+                control={<Radio />}
+                key={option.value}
+                label={
+                  <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
+                    <Avatar>
+                      <option.icon fontSize="var(--Icon-fontSize)" />
+                    </Avatar>
+                    <div>
+                      <Typography variant="inherit">{option.title}</Typography>
+                      <Typography color="text.secondary" variant="caption">
+                        {option.description}
+                      </Typography>
+                    </div>
+                  </Stack>
+                }
+                labelPlacement="start"
+                value={option.value}
+              />
+            ))}
+          </RadioGroup>
+        </Card>
+      </CardContent>
+    </Card>
+  );
+}