Refactor UI styles to use CSS variables for consistent theming

- Updated background colors across various templates to use CSS variables for better theming support.
- Replaced hardcoded colors with variables like `var(--ui-surface)` and `var(--ui-surface-soft)` for backgrounds.
- Adjusted text colors to use `var(--ui-text)` for improved readability and consistency.
- Enhanced the theme toggle functionality in the base template to dynamically change theme colors based on user preference.
- Ensured that all relevant templates reflect the new theming approach for a cohesive user experience.

Web/templates/notifications.html

@@ -17,7 +17,7 @@
   <div id="push-notification-settings" style="margin-bottom: 24px;"></div>
 
   <div style="display:grid; grid-template-columns:1fr; gap:14px;">
-    <section style="background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:16px;">
+    <section style="background: var(--ui-surface); border:1px solid #e2e8f0; border-radius:14px; padding:16px;">
       <h2 style="margin:0 0 12px; font-size:1.15rem;">Meine Benachrichtigungen</h2>
       {% if user_notifications %}
       <div style="display:grid; gap:10px;">
@@ -53,7 +53,7 @@
     </section>
 
     {% if is_admin_user %}
-    <section style="background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:16px;">
+    <section style="background: var(--ui-surface); border:1px solid #e2e8f0; border-radius:14px; padding:16px;">
       <h2 style="margin:0 0 12px; font-size:1.15rem;">Admin-Benachrichtigungen</h2>
       {% if admin_notifications %}
       <div style="display:grid; gap:10px;">