From 53d3a39fa5ad6980b47924acb610db1a30b490f9 Mon Sep 17 00:00:00 2001
From: OliverT87 <OliverT87@gmx.de>
Date: Sat, 21 Jun 2025 13:00:43 +0200
Subject: [PATCH] =?UTF-8?q?themes=20eingebaut,=20m=C3=BCssen=20noch=20verf?=
 =?UTF-8?q?einert=20werden?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Project_Periodensystem.Model/Theme.cs         |  9 ++
 Project_Periodensystem.View/AboutPage.axaml   | 80 ++++++++++-----
 .../AboutPage.axaml.cs                        | 37 ++++---
 .../Converters/SeriesToColorConverter.cs      | 37 +++----
 Project_Periodensystem.View/LandingPage.axaml | 72 +++++++++-----
 .../LandingPage.axaml.cs                      | 46 +++++++--
 Project_Periodensystem.View/MainWindow.axaml  |  5 +-
 .../MainWindow.axaml.cs                       | 99 +++++--------------
 .../PeriodicTablePage.axaml                   | 63 ++++++++----
 .../PeriodicTablePage.axaml.cs                | 66 ++++---------
 10 files changed, 281 insertions(+), 233 deletions(-)
 create mode 100644 Project_Periodensystem.Model/Theme.cs

diff --git a/Project_Periodensystem.Model/Theme.cs b/Project_Periodensystem.Model/Theme.cs
new file mode 100644
index 0000000..b54600b
--- /dev/null
+++ b/Project_Periodensystem.Model/Theme.cs
@@ -0,0 +1,9 @@
+namespace Project_Periodensystem.Model
+{
+    public enum AppTheme
+    {
+        Dark,
+        Light,
+        Classic
+    }
+}
\ No newline at end of file
diff --git a/Project_Periodensystem.View/AboutPage.axaml b/Project_Periodensystem.View/AboutPage.axaml
index 150e586..ca2170e 100644
--- a/Project_Periodensystem.View/AboutPage.axaml
+++ b/Project_Periodensystem.View/AboutPage.axaml
@@ -4,14 +4,35 @@
              xmlns:i="using:Avalonia.Interactivity"
              x:Class="Project_Periodensystem.View.AboutPage"
              Background="#5C5144">
+             
+    <UserControl.Styles>
+        <Style Selector="Button">
+            <Setter Property="Background" Value="Black"/>
+            <Setter Property="Foreground" Value="White"/>
+        </Style>
+        <Style Selector="Button:pointerover /template/ ContentPresenter">
+            <Setter Property="Background" Value="DarkRed"/>
+        </Style>
+        <Style Selector="Button:pressed /template/ ContentPresenter">
+            <Setter Property="Background" Value="Red"/>
+        </Style>
+    </UserControl.Styles>
+
     <Grid>
-        <StackPanel VerticalAlignment="Center" 
-                   HorizontalAlignment="Center">
+        <Grid.RowDefinitions>
+            <RowDefinition Height="*"/>
+            <RowDefinition Height="Auto"/>
+        </Grid.RowDefinitions>
+
+        <!-- Content -->
+        <StackPanel Grid.Row="0" 
+                    VerticalAlignment="Center" 
+                    HorizontalAlignment="Center">
             <TextBlock Text="Author: Oliver Träger"
-                     FontSize="20"
-                     Foreground="White"
-                     HorizontalAlignment="Center"
-                     Margin="0,0,0,10"/>
+                      FontSize="20"
+                      Foreground="White"
+                      HorizontalAlignment="Center"
+                      Margin="0,0,0,10"/>
             <TextBlock Text="Klasse: ITFS2"
                      FontSize="20"
                      Foreground="White"
@@ -24,23 +45,34 @@
                      Margin="0,0,0,40"/>
         </StackPanel>
 
-        <Button x:Name="BackButton" 
-                Click="BackButton_Click"
-                HorizontalAlignment="Left"
-                VerticalAlignment="Top"
-                Margin="20"
-                Padding="20,10"
-                Background="Black"
-                Foreground="White">
-            <Button.Styles>
-                <Style Selector="Button:pointerover /template/ ContentPresenter">
-                    <Setter Property="Background" Value="DarkRed"/>
-                </Style>
-                <Style Selector="Button:pressed /template/ ContentPresenter">
-                    <Setter Property="Background" Value="Red"/>
-                </Style>
-            </Button.Styles>
-            Back
-        </Button>
+        <!-- Footer with Buttons -->
+        <Grid Grid.Row="1" 
+              Margin="20,0,20,20">
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="Auto"/>
+                <ColumnDefinition Width="*"/>
+                <ColumnDefinition Width="Auto"/>
+            </Grid.ColumnDefinitions>
+
+            <Button Name="ThemeButton"
+                    Grid.Column="0"
+                    Click="ThemeButton_Click"
+                    Width="250"
+                    Height="40">
+                <TextBlock Text="Theme wechseln"
+                          FontSize="16"
+                          HorizontalAlignment="Center"/>
+            </Button>
+
+            <Button x:Name="BackButton" 
+                    Grid.Column="2"
+                    Click="BackButton_Click"
+                    Width="200"
+                    Height="40">
+                <TextBlock Text="Back"
+                          FontSize="16"
+                          HorizontalAlignment="Center"/>
+            </Button>
+        </Grid>
     </Grid>
 </UserControl>
\ No newline at end of file
diff --git a/Project_Periodensystem.View/AboutPage.axaml.cs b/Project_Periodensystem.View/AboutPage.axaml.cs
index 418e7a7..0de901c 100644
--- a/Project_Periodensystem.View/AboutPage.axaml.cs
+++ b/Project_Periodensystem.View/AboutPage.axaml.cs
@@ -3,6 +3,7 @@ using Avalonia.Controls;
 using Avalonia.Interactivity;
 using Avalonia.Markup.Xaml;
 using Avalonia.VisualTree;
+using Project_Periodensystem.Model;
 
 namespace Project_Periodensystem.View
 {
@@ -14,26 +15,30 @@ namespace Project_Periodensystem.View
         }
 
         private void InitializeComponent()
-            => AvaloniaXamlLoader.Load(this);
-
-        private void BackButton_Click(object sender, RoutedEventArgs e)
         {
-            try
+            AvaloniaXamlLoader.Load(this);
+        }
+
+        private void BackButton_Click(object? sender, RoutedEventArgs e)
+        {
+            if (this.Parent is ContentControl content && content.Parent is MainWindow mainWindow)
             {
-                var mainWindow = this.FindAncestorOfType<MainWindow>();
-                if (mainWindow != null)
-                {
-                    mainWindow.ShowLanding();
-                }
-                else
-                {
-                    Console.WriteLine("MainWindow nicht gefunden!");
-                }
+                mainWindow.ShowLandingPage();
             }
-            catch (Exception ex)
+        }
+
+        private void ThemeButton_Click(object? sender, RoutedEventArgs e)
+        {
+            var nextTheme = MainWindow.CurrentTheme switch
             {
-                Console.WriteLine($"Fehler in BackButton_Click: {ex.Message}");
-                Console.WriteLine($"StackTrace: {ex.StackTrace}");
+                AppTheme.Dark => AppTheme.Light,
+                AppTheme.Light => AppTheme.Classic,
+                _ => AppTheme.Dark
+            };
+
+            if (this.Parent is ContentControl content && content.Parent is MainWindow mainWindow)
+            {
+                mainWindow.UpdateTheme(nextTheme);
             }
         }
     }
diff --git a/Project_Periodensystem.View/Converters/SeriesToColorConverter.cs b/Project_Periodensystem.View/Converters/SeriesToColorConverter.cs
index d6cabe7..b191b6d 100644
--- a/Project_Periodensystem.View/Converters/SeriesToColorConverter.cs
+++ b/Project_Periodensystem.View/Converters/SeriesToColorConverter.cs
@@ -1,7 +1,7 @@
-using System;
-using System.Globalization;
 using Avalonia.Data.Converters;
 using Avalonia.Media;
+using System;
+using System.Globalization;
 
 namespace Project_Periodensystem.View.Converters
 {
@@ -9,26 +9,27 @@ namespace Project_Periodensystem.View.Converters
     {
         public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
         {
-            if (value is not string series)
-                return new SolidColorBrush(Color.Parse("#222222")); // fallback
-
-            return series switch
+            if (value == null) return new SolidColorBrush(Colors.Gray);
+            
+            return value.ToString() switch
             {
-                "Nichtmetall"           => new SolidColorBrush(Color.Parse("#3e6418")),
-                "Metall"                => new SolidColorBrush(Color.Parse("#711019")), // Übergangsmetall
-                "Post-Übergangsmetall"  => new SolidColorBrush(Color.Parse("#555555")), // neu hinzugefügt
-                "Halbmetall"            => new SolidColorBrush(Color.Parse("#015146")),
-                "Edelgas"               => new SolidColorBrush(Color.Parse("#3a2151")),
-                "Halogen"               => new SolidColorBrush(Color.Parse("#846011")),
-                "Alkalimetall"          => new SolidColorBrush(Color.Parse("#6c3b01")),
-                "Erdalkalimetall"       => new SolidColorBrush(Color.Parse("#846011")),
-                "Lanthanoid"            => new SolidColorBrush(Color.Parse("#402c17")),
-                "Actinoid"              => new SolidColorBrush(Color.Parse("#732e4c")),
-                _                       => new SolidColorBrush(Color.Parse("#222222")),
+                "Nichtmetall" => new SolidColorBrush(Color.Parse("#3e6418")),
+                "Metall" => new SolidColorBrush(Color.Parse("#711019")),
+                "Post-Übergangsmetall" => new SolidColorBrush(Color.Parse("#555555")),
+                "Halbmetall" => new SolidColorBrush(Color.Parse("#015146")),
+                "Edelgas" => new SolidColorBrush(Color.Parse("#3a2151")),
+                "Halogen" => new SolidColorBrush(Color.Parse("#846011")),
+                "Alkalimetall" => new SolidColorBrush(Color.Parse("#6c3b01")),
+                "Erdalkalimetall" => new SolidColorBrush(Color.Parse("#846011")),
+                "Lanthanoid" => new SolidColorBrush(Color.Parse("#402c17")),
+                "Actinoid" => new SolidColorBrush(Color.Parse("#732e4c")),
+                _ => new SolidColorBrush(Color.Parse("#222222"))
             };
         }
 
-        public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture) =>
+        public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
+        {
             throw new NotImplementedException();
+        }
     }
 }
diff --git a/Project_Periodensystem.View/LandingPage.axaml b/Project_Periodensystem.View/LandingPage.axaml
index fe02edd..34374fa 100644
--- a/Project_Periodensystem.View/LandingPage.axaml
+++ b/Project_Periodensystem.View/LandingPage.axaml
@@ -2,30 +2,56 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              x:Class="Project_Periodensystem.View.LandingPage"
              Background="#5C5144">
+    <UserControl.Styles>
+        <Style Selector="Button">
+            <Setter Property="Background" Value="Black"/>
+            <Setter Property="Foreground" Value="White"/>
+        </Style>
+        <Style Selector="Button:pointerover /template/ ContentPresenter">
+            <Setter Property="Background" Value="DarkRed"/>
+        </Style>
+        <Style Selector="Button:pressed /template/ ContentPresenter">
+            <Setter Property="Background" Value="Red"/>
+        </Style>
+    </UserControl.Styles>
+
     <Grid>
-        <TextBlock Text="Willkommen zum Periodensystem der Elemente!" 
-                  FontSize="36" 
-                  HorizontalAlignment="Center"
-                  VerticalAlignment="Top"
-                  Margin="0,40,0,0"/>
-        <Button Name="StartButton" 
-                Click="StartButton_Click"
-                HorizontalAlignment="Center" 
-                VerticalAlignment="Center"
-                Width="200"
-                Height="50"
-                Background="Black"
-                Foreground="White">
-                            <Button.Styles>
-                <Style Selector="Button:pointerover /template/ ContentPresenter">
-                    <Setter Property="Background" Value="DarkRed"/>
-                </Style>
-                <Style Selector="Button:pressed /template/ ContentPresenter">
-                    <Setter Property="Background" Value="Red"/>
-                </Style>
-            </Button.Styles>
-            <TextBlock Text="Start" 
-                      FontSize="24" 
+        <Grid.RowDefinitions>
+            <RowDefinition Height="*"/>
+            <RowDefinition Height="Auto"/>
+        </Grid.RowDefinitions>
+
+        <!-- Hauptcontent -->
+        <Grid Grid.Row="0">
+            <StackPanel VerticalAlignment="Center" 
+                       Margin="0,-100,0,0">
+                <TextBlock Text="Willkommen zum Periodensystem der Elemente!" 
+                          FontSize="36" 
+                          HorizontalAlignment="Center"
+                          Margin="0,0,0,20"/>
+                <Button Name="StartButton" 
+                        Click="StartButton_Click"
+                        HorizontalAlignment="Center" 
+                        Width="200"
+                        Height="50">
+                    <TextBlock Text="Start" 
+                              FontSize="24" 
+                              HorizontalAlignment="Center"/>
+                </Button>
+            </StackPanel>
+        </Grid>
+
+        <!-- Theme Button -->
+        <Button Name="ThemeButton"
+                Grid.Row="1"
+                Click="ThemeButton_Click"
+                HorizontalAlignment="Left"
+                VerticalAlignment="Bottom"
+                Width="250"
+                Height="40"
+                Margin="20,0,0,20">
+            <TextBlock Text="Theme wechseln"
+                      FontSize="16"
                       HorizontalAlignment="Center"/>
         </Button>
     </Grid>
diff --git a/Project_Periodensystem.View/LandingPage.axaml.cs b/Project_Periodensystem.View/LandingPage.axaml.cs
index a78ce8c..eadabfe 100644
--- a/Project_Periodensystem.View/LandingPage.axaml.cs
+++ b/Project_Periodensystem.View/LandingPage.axaml.cs
@@ -2,21 +2,35 @@ using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Interactivity;
 using Avalonia.Markup.Xaml;
-using Avalonia.VisualTree;
+using Avalonia.Media;
+using Project_Periodensystem.Model;
 using System;
+using System.Collections.Generic;
 
 namespace Project_Periodensystem.View
 {
     public partial class LandingPage : UserControl
     {
+        private readonly Random random = new();
+        private readonly Dictionary<AppTheme, string> themeColors;
+        private AppTheme currentTheme;
         private Button? startButton;
         private DateTime lastClickTime = DateTime.MinValue;
         private const int DEBOUNCE_MS = 500;
 
         public LandingPage()
         {
-            Logger.Log("=== LandingPage wird initialisiert ===");
+            Logger.Log($"=== LandingPage wird initialisiert am {DateTime.Now:dd.MM.yyyy HH:mm:ss} ===");
             InitializeComponent();
+            
+            themeColors = new Dictionary<AppTheme, string>
+            {
+                { AppTheme.Dark, "#5C5144" },
+                { AppTheme.Light, "#E8DFD8" },
+                { AppTheme.Classic, "#7B8B6F" }
+            };
+            
+            SetRandomTheme();
             startButton = this.Find<Button>("StartButton");
             
             if (startButton != null)
@@ -36,6 +50,25 @@ namespace Project_Periodensystem.View
             AvaloniaXamlLoader.Load(this);
         }
 
+        private void SetRandomTheme()
+        {
+            var themes = Enum.GetValues<AppTheme>();
+            currentTheme = themes[random.Next(themes.Length)];
+            this.Background = new SolidColorBrush(Color.Parse(themeColors[currentTheme]));
+            Logger.Log($"Theme gewählt: {currentTheme}");
+        }
+
+        private void ThemeButton_Click(object? sender, RoutedEventArgs e)
+        {
+            var themes = Enum.GetValues<AppTheme>();
+            currentTheme = themes[(Array.IndexOf(themes, currentTheme) + 1) % themes.Length];
+            
+            if (this.Parent is ContentControl content && content.Parent is MainWindow mainWindow)
+            {
+                mainWindow.UpdateTheme(currentTheme);
+            }
+        }
+
         private void StartButton_Click(object? sender, RoutedEventArgs e)
         {
             // Stop event propagation
@@ -54,16 +87,9 @@ namespace Project_Periodensystem.View
             
             try 
             {
-                var mainWindow = this.FindAncestorOfType<MainWindow>();
-                if (mainWindow != null)
+                if (this.Parent is ContentControl content && content.Parent is MainWindow mainWindow)
                 {
-                    Logger.Log("MainWindow gefunden, starte Navigation...");
                     mainWindow.ShowPeriodicTable();
-                    Logger.Log("Navigation ausgeführt");
-                }
-                else
-                {
-                    Logger.Log("FEHLER: MainWindow nicht gefunden!");
                 }
             }
             catch (Exception ex)
diff --git a/Project_Periodensystem.View/MainWindow.axaml b/Project_Periodensystem.View/MainWindow.axaml
index 635d4a4..3c02340 100644
--- a/Project_Periodensystem.View/MainWindow.axaml
+++ b/Project_Periodensystem.View/MainWindow.axaml
@@ -5,7 +5,6 @@
         Width="1024" 
         Height="768">
     
-    <Grid>
-        <ContentControl Name="MainContent"/>
-    </Grid>
+    <ContentControl Name="MainContent"/>
+    
 </Window>
diff --git a/Project_Periodensystem.View/MainWindow.axaml.cs b/Project_Periodensystem.View/MainWindow.axaml.cs
index de6f842..23cb6ba 100644
--- a/Project_Periodensystem.View/MainWindow.axaml.cs
+++ b/Project_Periodensystem.View/MainWindow.axaml.cs
@@ -1,101 +1,52 @@
+using Avalonia;
 using Avalonia.Controls;
-using Avalonia.Markup.Xaml;
+using Avalonia.Media;
+using Project_Periodensystem.Model;
 using System;
+using System.Collections.Generic;
 
 namespace Project_Periodensystem.View
 {
     public partial class MainWindow : Window
     {
-        private readonly ContentControl? mainContent;
+        private ContentControl? mainContent;
+        public static AppTheme CurrentTheme { get; set; } = AppTheme.Dark;
+        public static Dictionary<AppTheme, string> ThemeColors { get; } = new()
+        {
+            { AppTheme.Dark, "#5C5144" },
+            { AppTheme.Light, "#E8DFD8" },
+            { AppTheme.Classic, "#7B8B6F" }
+        };
 
         public MainWindow()
         {
             InitializeComponent();
-            try
-            {
-                Console.WriteLine("MainWindow wird initialisiert...");
-                var content = this.Find<ContentControl>("MainContent");
-                if (content == null)
-                {
-                    Console.WriteLine("FEHLER: MainContent nicht gefunden!");
-                    throw new Exception("MainContent control not found.");
-                }
-                
-                mainContent = content;
-                Console.WriteLine("Navigation zur Landing Page...");
-                ShowLanding();
-            }
-            catch (Exception ex)
-            {
-                Console.WriteLine($"FEHLER in MainWindow Constructor: {ex.Message}");
-            }
+            mainContent = this.FindControl<ContentControl>("MainContent");
+            ShowLandingPage();
         }
 
-        public void ShowLanding()
+        public void ShowLandingPage()
         {
-            try
-            {
-                Console.WriteLine("ShowLanding wird aufgerufen...");
-                if (mainContent != null)
-                {
-                    mainContent.Content = new LandingPage();
-                }
-                else
-                {
-                    Console.WriteLine("FEHLER: mainContent ist null in ShowLanding!");
-                }
-            }
-            catch (Exception ex)
-            {
-                Console.WriteLine($"FEHLER in ShowLanding: {ex.Message}");
-            }
+            mainContent!.Content = new LandingPage();
         }
 
         public void ShowPeriodicTable()
         {
-            try
-            {
-                Logger.Log("ShowPeriodicTable wird aufgerufen...");
-                if (mainContent != null)
-                {
-                    var periodicTablePage = new PeriodicTablePage();
-                    mainContent.Content = periodicTablePage;
-                    Logger.Log("PeriodicTablePage wurde geladen");
-                }
-                else
-                {
-                    Logger.Log("FEHLER: mainContent ist null in ShowPeriodicTable!");
-                }
-            }
-            catch (Exception ex)
-            {
-                Logger.Log($"FEHLER in ShowPeriodicTable: {ex.Message}");
-            }
+            mainContent!.Content = new PeriodicTablePage();
         }
 
-        public void ShowAbout()
+        public void ShowAboutPage()
         {
-            try
-            {
-                Console.WriteLine("ShowAbout wird aufgerufen...");
-                if (mainContent != null)
-                {
-                    mainContent.Content = new AboutPage();
-                }
-                else
-                {
-                    Console.WriteLine("FEHLER: mainContent ist null in ShowAbout!");
-                }
-            }
-            catch (Exception ex)
-            {
-                Console.WriteLine($"FEHLER in ShowAbout: {ex.Message}");
-            }
+            mainContent!.Content = new AboutPage();
         }
 
-        private void InitializeComponent()
+        public void UpdateTheme(AppTheme theme)
         {
-            AvaloniaXamlLoader.Load(this);
+            CurrentTheme = theme;
+            if (mainContent?.Content is UserControl control)
+            {
+                control.Background = new SolidColorBrush(Color.Parse(ThemeColors[theme]));
+            }
         }
     }
 }
diff --git a/Project_Periodensystem.View/PeriodicTablePage.axaml b/Project_Periodensystem.View/PeriodicTablePage.axaml
index ce3bcc2..595cd88 100644
--- a/Project_Periodensystem.View/PeriodicTablePage.axaml
+++ b/Project_Periodensystem.View/PeriodicTablePage.axaml
@@ -5,6 +5,19 @@
              x:Class="Project_Periodensystem.View.PeriodicTablePage"
              Background="#5C5144">
 
+    <UserControl.Styles>
+        <Style Selector="Button">
+            <Setter Property="Background" Value="Black"/>
+            <Setter Property="Foreground" Value="White"/>
+        </Style>
+        <Style Selector="Button:pointerover /template/ ContentPresenter">
+            <Setter Property="Background" Value="DarkRed"/>
+        </Style>
+        <Style Selector="Button:pressed /template/ ContentPresenter">
+            <Setter Property="Background" Value="Red"/>
+        </Style>
+    </UserControl.Styles>
+
     <UserControl.Resources>
         <conv:SeriesToColorConverter x:Key="SeriesToColor"/>
     </UserControl.Resources>
@@ -25,7 +38,7 @@
                   HorizontalAlignment="Center"
                   Margin="0,0,0,20"/>
 
-        <!-- Periodensystem Grid -->
+        <!-- Periodic Table Grid -->
         <ScrollViewer Grid.Row="1" 
                      HorizontalScrollBarVisibility="Auto" 
                      VerticalScrollBarVisibility="Auto">
@@ -67,24 +80,34 @@
             </Grid>
         </ScrollViewer>
 
-        <!-- Footer with About Button -->
-        <Button Grid.Row="2" 
-                x:Name="AboutButton"
-                Content="About"
-                Click="AboutButton_Click"
-                HorizontalAlignment="Right"
-                Margin="0,20,0,0"
-                Padding="20,10"
-                Background="Black"
-                Foreground="White">
-            <Button.Styles>
-                <Style Selector="Button:pointerover /template/ ContentPresenter">
-                    <Setter Property="Background" Value="DarkRed"/>
-                </Style>
-                <Style Selector="Button:pressed /template/ ContentPresenter">
-                    <Setter Property="Background" Value="Red"/>
-                </Style>
-            </Button.Styles>
-        </Button>
+        <!-- Footer with Buttons -->
+        <Grid Grid.Row="2" 
+              Margin="0,20,0,0">
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="Auto"/>
+                <ColumnDefinition Width="*"/>
+                <ColumnDefinition Width="Auto"/>
+            </Grid.ColumnDefinitions>
+                
+            <Button Name="ThemeButton"
+                    Grid.Column="0"
+                    Click="ThemeButton_Click"
+                    Width="250"
+                    Height="40">
+                <TextBlock Text="Theme wechseln"
+                          FontSize="16"
+                          HorizontalAlignment="Center"/>
+            </Button>
+
+            <Button x:Name="AboutButton"
+                    Grid.Column="2"
+                    Click="AboutButton_Click"
+                    Width="200"
+                    Height="40">
+                <TextBlock Text="About"
+                          FontSize="16"
+                          HorizontalAlignment="Center"/>
+            </Button>
+        </Grid>
     </Grid>
 </UserControl>
\ No newline at end of file
diff --git a/Project_Periodensystem.View/PeriodicTablePage.axaml.cs b/Project_Periodensystem.View/PeriodicTablePage.axaml.cs
index a0dbb10..086d415 100644
--- a/Project_Periodensystem.View/PeriodicTablePage.axaml.cs
+++ b/Project_Periodensystem.View/PeriodicTablePage.axaml.cs
@@ -1,42 +1,17 @@
-using System;
-using System.Globalization;
-using System.Linq;
 using Avalonia;
 using Avalonia.Controls;
-using Avalonia.Data.Converters;
 using Avalonia.Interactivity;
 using Avalonia.Markup.Xaml;
 using Avalonia.Media;
-using Avalonia.VisualTree;
+using Project_Periodensystem.Model;
 using Project_Periodensystem.Persistence;
 using Project_Periodensystem.View.Converters;
+using System;
+using System.Globalization;
+using System.Linq;
 
 namespace Project_Periodensystem.View
 {
-    // Converter to map element series to a color
-    public class SeriesToColorConverter
-    {
-        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
-        {
-            if (value == null) return new SolidColorBrush(Colors.Gray);
-            
-            return value.ToString() switch
-            {
-                "Nichtmetall" => new SolidColorBrush(Color.Parse("#3e6418")),
-                "Metall" => new SolidColorBrush(Color.Parse("#711019")),
-                "Post-Übergangsmetall" => new SolidColorBrush(Color.Parse("#555555")),
-                "Halbmetall" => new SolidColorBrush(Color.Parse("#015146")),
-                "Edelgas" => new SolidColorBrush(Color.Parse("#3a2151")),
-                "Halogen" => new SolidColorBrush(Color.Parse("#846011")),
-                "Alkalimetall" => new SolidColorBrush(Color.Parse("#6c3b01")),
-                "Erdalkalimetall" => new SolidColorBrush(Color.Parse("#846011")),
-                "Lanthanoid" => new SolidColorBrush(Color.Parse("#402c17")),
-                "Actinoid" => new SolidColorBrush(Color.Parse("#732e4c")),
-                _ => new SolidColorBrush(Color.Parse("#222222"))
-            };
-        }
-    }
-
     public partial class PeriodicTablePage : UserControl
     {
         private readonly Grid? periodicGrid;
@@ -129,25 +104,26 @@ namespace Project_Periodensystem.View
             }
         }
 
+        private void ThemeButton_Click(object? sender, RoutedEventArgs e)
+        {
+            var nextTheme = MainWindow.CurrentTheme switch
+            {
+                AppTheme.Dark => AppTheme.Light,
+                AppTheme.Light => AppTheme.Classic,
+                _ => AppTheme.Dark
+            };
+
+            if (this.Parent is ContentControl content && content.Parent is MainWindow mainWindow)
+            {
+                mainWindow.UpdateTheme(nextTheme);
+            }
+        }
+
         private void AboutButton_Click(object? sender, RoutedEventArgs e)
         {
-            try
+            if (this.Parent is ContentControl content && content.Parent is MainWindow mainWindow)
             {
-                Logger.Log("AboutButton wurde geklickt");
-                var mainWindow = this.FindAncestorOfType<MainWindow>();
-                if (mainWindow != null)
-                {
-                    Logger.Log("Navigation zu About Page");
-                    mainWindow.ShowAbout();
-                }
-                else
-                {
-                    Logger.Log("FEHLER: MainWindow nicht gefunden");
-                }
-            }
-            catch (Exception ex)
-            {
-                Logger.Log($"FEHLER im AboutButton_Click: {ex.Message}");
+                mainWindow.ShowAboutPage();
             }
         }
     }