Bug Fixing, buttons nicht sichtbar im hellen modus, Logout zu weit rechts. Von hell auf dunkel standard

frontend/src/components/LightDarkToggle.jsx

@@ -1,22 +1,24 @@
-// src/components/LightDarkToggle.jsx
+import { useEffect, useState } from 'react';
+import '../css/lightDarkToggle.css';
 
 function LightDarkToggle() {
-  const toggleTheme = () => {
-    const body = document.body;
-    const currentTheme = body.classList.contains('dark') ? 'dark' : 'light';
+  const [darkMode, setDarkMode] = useState(() => {
+    return localStorage.getItem('theme') === 'light' ? false : true;
+  });
 
-    if (currentTheme === 'dark') {
-      body.classList.remove('dark');
-      body.classList.add('light');
-    } else {
-      body.classList.remove('light');
-      body.classList.add('dark');
-    }
-  };
+  useEffect(() => {
+    const mode = darkMode ? 'dark' : 'light';
+    document.body.classList.remove('light', 'dark');
+    document.body.classList.add(mode);
+    localStorage.setItem('theme', mode);
+  }, [darkMode]);
 
   return (
-    <button className="navbar-btn" onClick={toggleTheme}>
-      🌓 Wechsel Theme
+    <button
+      className="toggle-button"
+      onClick={() => setDarkMode(prev => !prev)}
+    >
+      {darkMode ? '🌞 Hell' : '🌙 Dunkel'}
     </button>
   );
 }

frontend/src/components/LoginForm.jsx

@@ -19,7 +19,7 @@ function LoginForm() {
   };
 
   return (
-    <div>
+    <div className="main-content">
       <h2>Login</h2>
       <input
         value={username}

frontend/src/components/Md5Tool.jsx

@@ -16,7 +16,7 @@ function Md5Tool() {
   };
 
   return (
-    <div>
+    <div className="main-content">
       <h2>MD5 Hasher</h2>
       <input
         type="text"

frontend/src/components/ToolOverview.jsx

@@ -5,7 +5,7 @@ function ToolOverview() {
   const role = localStorage.getItem('role');
 
   return (
-    <div>
+    <div className="main-content">
       <h2>Tool-Übersicht</h2>
       <p>Wähle ein Tool aus:</p>