FlyTeam/SkyTeam/SettingsPage.xaml

<Page x:Class="SkyTeam.SettingsPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
      Title="SettingsPage"
      Background="{DynamicResource PageBackground}">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="180"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Border Grid.Row="0" Grid.ColumnSpan="2" Background="#FF1E88E5" Padding="15">
            <StackPanel Orientation="Horizontal">
                <Ellipse Width="36" Height="36" Fill="White" Margin="0,0,10,0"/>
                <StackPanel>
                    <TextBlock Text="Sky Team Airlines" FontSize="20" FontWeight="Bold" Foreground="White"/>
                    <TextBlock Text="Sichere und komfortable Flüge weltweit" FontSize="12" Foreground="White"/>
                </StackPanel>
            </StackPanel>
        </Border>

        <StackPanel Grid.Row="1" Grid.Column="0" Background="{DynamicResource SidebarBackground}">
            <Button Height="50" Margin="5" Click="HomeButton_Click" Background="Transparent" BorderThickness="0">
                <StackPanel Orientation="Horizontal">
                    <iconPacks:PackIconMaterial Kind="Home" Width="20" Margin="0,0,10,0" Foreground="{DynamicResource PrimaryText}"/>
                    <TextBlock Text="Home" Foreground="{DynamicResource PrimaryText}"/>
                </StackPanel>
            </Button>

            <Button Height="50" Margin="5" Click="BookingsButton_Click" Background="Transparent" BorderThickness="0">
                <StackPanel Orientation="Horizontal">
                    <iconPacks:PackIconMaterial Kind="Airplane" Width="20" Margin="0,0,10,0" Foreground="{DynamicResource PrimaryText}"/>
                    <TextBlock Text="Meine Buchungen" Foreground="{DynamicResource PrimaryText}"/>
                </StackPanel>
            </Button>

            <Button Height="50" Margin="5" Background="{DynamicResource CardBackground}" BorderThickness="0">
                <StackPanel Orientation="Horizontal">
                    <iconPacks:PackIconMaterial Kind="Cog" Width="20" Margin="0,0,10,0" Foreground="{DynamicResource PrimaryText}"/>
                    <TextBlock Text="Einstellungen" FontWeight="Bold" Foreground="{DynamicResource PrimaryText}"/>
                </StackPanel>
            </Button>

            <Button Height="50" Margin="5" Background="#FFEBEB" BorderBrush="#FFB71C1C" Foreground="#D32F2F" FontWeight="Bold" Click="LogoutButton_Click">
                <StackPanel Orientation="Horizontal">
                    <iconPacks:PackIconMaterial Kind="Logout" Width="20" Margin="0,0,10,0"/>
                    <TextBlock Text="Abmelden"/>
                </StackPanel>
            </Button>
        </StackPanel>

        <Grid Grid.Row="1" Grid.Column="1" Margin="30">
            <StackPanel>
                <TextBlock Text="Einstellungen" FontSize="28" FontWeight="Bold" Foreground="{DynamicResource PrimaryText}"/>
                <TextBlock Text="Passen Sie Ihr Erlebnis an" FontSize="16" Foreground="{DynamicResource SecondaryText}" Margin="0,0,0,25"/>

                <Border Background="{DynamicResource CardBackground}" CornerRadius="12" Padding="25" Margin="0,0,0,25">
                    <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                        <iconPacks:PackIconMaterial Kind="ThemeLightDark" Width="32" Height="32" Foreground="{DynamicResource PrimaryText}" Margin="0,0,15,0"/>

                        <StackPanel VerticalAlignment="Center" Width="300">
                            <TextBlock Text="Dark Mode" FontSize="18" FontWeight="Bold" Foreground="{DynamicResource PrimaryText}"/>
                            <TextBlock Text="Dunkles Design aktivieren" FontSize="14" Foreground="{DynamicResource SecondaryText}"/>
                        </StackPanel>

                        <ToggleButton x:Name="DarkModeToggle"
                                      Width="60"
                                      Height="30"
                                      Checked="DarkModeToggle_Checked"
                                      Unchecked="DarkModeToggle_Unchecked">
                            <ToggleButton.Style>
                                <Style TargetType="ToggleButton">
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate TargetType="ToggleButton">
                                                <Border x:Name="Border" CornerRadius="15" Background="#E0E0E0" BorderBrush="#999" BorderThickness="1">
                                                    <Grid>
                                                        <Ellipse x:Name="Dot" Width="24" Height="24" HorizontalAlignment="Left" Margin="2,0,0,0" Fill="White">
                                                            <Ellipse.Effect>
                                                                <DropShadowEffect BlurRadius="4" ShadowDepth="1" Opacity="0.3"/>
                                                            </Ellipse.Effect>
                                                        </Ellipse>
                                                    </Grid>
                                                </Border>
                                                <ControlTemplate.Triggers>
                                                    <Trigger Property="IsChecked" Value="True">
                                                        <Setter TargetName="Border" Property="Background" Value="#1E88E5"/>
                                                        <Setter TargetName="Dot" Property="HorizontalAlignment" Value="Right"/>
                                                        <Setter TargetName="Dot" Property="Margin" Value="0,0,2,0"/>
                                                    </Trigger>
                                                </ControlTemplate.Triggers>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </ToggleButton.Style>
                        </ToggleButton>
                    </StackPanel>
                </Border>

                <Border Background="#FEF2F2" CornerRadius="12" Padding="25" BorderBrush="#EF5350" BorderThickness="1">
                    <StackPanel>
                        <StackPanel Orientation="Horizontal" Margin="0,0,0,15">
                            <iconPacks:PackIconMaterial Kind="Alert" Width="24" Height="24" Foreground="#D32F2F" Margin="0,0,10,0"/>
                            <TextBlock Text="Gefahrenzone" FontSize="20" FontWeight="Bold" Foreground="#D32F2F"/>
                        </StackPanel>

                        <TextBlock Text="Das Löschen Ihres Kontos ist endgültig und kann nicht rückgängig gemacht werden." FontSize="14" Foreground="#B71C1C" Margin="0,0,0,15"/>

                        <Button x:Name="DeleteAccountButton" Width="220" Height="45" Background="#D32F2F" Foreground="White" FontWeight="Bold" HorizontalAlignment="Left" Click="DeleteAccountButton_Click">
                            <StackPanel Orientation="Horizontal">
                                <iconPacks:PackIconMaterial Kind="AccountRemove" Width="20" Margin="0,0,10,0"/>
                                <TextBlock Text="Konto löschen"/>
                            </StackPanel>
                        </Button>
                    </StackPanel>
                </Border>

            </StackPanel>
        </Grid>
    </Grid>
</Page>