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

@@ -61,7 +61,7 @@
         bottom: 125%;
         left: 50%;
         transform: translateX(-50%);
-        background-color: #333;
+        background-color: var(--ui-text);
         color: white;
         padding: 5px 10px;
         border-radius: 4px;
@@ -405,7 +405,7 @@ document.addEventListener('DOMContentLoaded', function() {
     }
     
     .borrowed-item {
-        background-color: #fff;
+        background-color: var(--ui-surface);
         border: 1px solid #dee2e6;
         border-radius: 8px;
         padding: 20px;
@@ -457,7 +457,7 @@ document.addEventListener('DOMContentLoaded', function() {
     
     .exemplar-details {
         margin-top: 10px;
-        background-color: #f8f9fa;
+        background-color: var(--ui-surface-soft);
         padding: 10px;
         border-radius: 5px;
         border-left: 3px solid #6c757d;
@@ -515,7 +515,7 @@ document.addEventListener('DOMContentLoaded', function() {
     .no-items-message {
         text-align: center;
         padding: 30px;
-        background-color: #f8f9fa;
+        background-color: var(--ui-surface-soft);
         border-radius: 5px;
         color: #6c757d;
         margin-top: 20px;