new features, bookstack

frontend/src/pages/Settings.tsx

@@ -11,20 +11,23 @@ import {
   Divider,
   Box,
   Button,
+  ToggleButtonGroup,
+  ToggleButton,
 } from '@mui/material';
-import { Settings as SettingsIcon, Notifications, Palette, Language, Save } from '@mui/icons-material';
+import { Settings as SettingsIcon, Notifications, Palette, Language, Save, SettingsBrightness, LightMode, DarkMode } from '@mui/icons-material';
 import DashboardLayout from '../components/dashboard/DashboardLayout';
 import { useNotification } from '../contexts/NotificationContext';
+import { useThemeMode } from '../contexts/ThemeContext';
 
 function Settings() {
   const notification = useNotification();
+  const { themeMode, setThemeMode } = useThemeMode();
 
   // Settings state
   const [emailNotifications, setEmailNotifications] = useState(true);
   const [alarmNotifications, setAlarmNotifications] = useState(true);
   const [maintenanceReminders, setMaintenanceReminders] = useState(false);
   const [systemNotifications, setSystemNotifications] = useState(true);
-  const [darkMode, setDarkMode] = useState(false);
   const [compactView, setCompactView] = useState(true);
   const [animations, setAnimations] = useState(true);
 
@@ -105,18 +108,6 @@ function Settings() {
                 </Box>
                 <Divider sx={{ mb: 2 }} />
                 <FormGroup>
-                  <FormControlLabel
-                    control={
-                      <Switch
-                        checked={darkMode}
-                        onChange={(e) => {
-                          setDarkMode(e.target.checked);
-                          notification.showInfo('Dunkler Modus wird in einer zukünftigen Version verfügbar sein');
-                        }}
-                      />
-                    }
-                    label="Dunkler Modus (Vorschau)"
-                  />
                   <FormControlLabel
                     control={
                       <Switch
@@ -135,6 +126,30 @@ function Settings() {
                     }
                     label="Animationen"
                   />
+                  <Box sx={{ mt: 1 }}>
+                    <Typography variant="body2" sx={{ mb: 1 }}>
+                      Farbschema
+                    </Typography>
+                    <ToggleButtonGroup
+                      value={themeMode}
+                      exclusive
+                      onChange={(_e, value) => { if (value) setThemeMode(value); }}
+                      size="small"
+                    >
+                      <ToggleButton value="system">
+                        <SettingsBrightness fontSize="small" sx={{ mr: 0.5 }} />
+                        System
+                      </ToggleButton>
+                      <ToggleButton value="light">
+                        <LightMode fontSize="small" sx={{ mr: 0.5 }} />
+                        Hell
+                      </ToggleButton>
+                      <ToggleButton value="dark">
+                        <DarkMode fontSize="small" sx={{ mr: 0.5 }} />
+                        Dunkel
+                      </ToggleButton>
+                    </ToggleButtonGroup>
+                  </Box>
                 </FormGroup>
               </CardContent>
             </Card>