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

@@ -129,7 +129,7 @@ function createLoadingIndicator(message) {
             }
             
             .reset-loading-message {
-                color: #333;
+                color: var(--ui-text);
                 font-size: 16px;
                 font-weight: 500;
             }