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/upload_admin.html

@@ -78,14 +78,14 @@
 
     .book-info {
         padding: 15px;
-        background-color: #fff;
+        background-color: var(--ui-surface);
         border: 1px solid #ddd;
         border-radius: 5px;
         margin-bottom: 10px;
     }
 
     .book-info h4 {
-        color: #333;
+        color: var(--ui-text);
         margin: 0 0 10px 0;
         font-size: 1.2em;
         font-weight: bold;
@@ -115,7 +115,7 @@
     }
 
     .book-description h5 {
-        color: #333;
+        color: var(--ui-text);
         margin: 0 0 8px 0;
         font-size: 1em;
         font-weight: bold;
@@ -125,7 +125,7 @@
         max-height: 150px;
         overflow-y: auto;
         padding: 5px;
-        background-color: #f8f9fa;
+        background-color: var(--ui-surface-soft);
         border: 1px solid #e9ecef;
         border-radius: 3px;
         font-size: 0.9em;
@@ -187,7 +187,7 @@
         font-style: italic;
         text-align: center;
         padding: 20px;
-        background-color: #f8f9fa;
+        background-color: var(--ui-surface-soft);
         border: 1px solid #dee2e6;
         border-radius: 4px;
     }
@@ -334,7 +334,7 @@
     }
 
     .popup-content p {
-        color: #333;
+        color: var(--ui-text);
         margin: 15px 0;
         line-height: 1.5;
         font-size: 1em;
@@ -380,7 +380,7 @@
     }
 
     .popup-close-x:hover {
-        color: #333;
+        color: var(--ui-text);
     }
 
     /* Upload form styles */
@@ -388,13 +388,13 @@
         max-width: 800px;
         margin: 0 auto;
         padding: 20px;
-        background-color: #fff;
+        background-color: var(--ui-surface);
         border-radius: 8px;
         box-shadow: 0 2px 10px rgba(0,0,0,0.1);
     }
 
     .upload-form h1 {
-        color: #333;
+        color: var(--ui-text);
         margin-bottom: 30px;
         text-align: center;
         font-size: 2em;
@@ -408,7 +408,7 @@
         display: block;
         margin-bottom: 5px;
         font-weight: bold;
-        color: #333;
+        color: var(--ui-text);
     }
 
     .form-group input,
@@ -428,14 +428,14 @@
     }
 
     .filter-inputs {
-        background-color: #f8f9fa;
+        background-color: var(--ui-surface-soft);
         padding: 20px;
         border-radius: 5px;
         margin: 20px 0;
     }
 
     .filter-inputs h3 {
-        color: #333;
+        color: var(--ui-text);
         margin-bottom: 15px;
         font-size: 1.2em;
     }