Refactor test cases for improved readability and consistency

- Updated test functions in various test files to enhance code clarity by formatting long lines and improving indentation.
- Adjusted assertions to use multi-line formatting for better readability.
- Added new test cases for theme settings API to ensure proper functionality.
- Ensured consistent use of line breaks and spacing across test files for uniformity.

static/js/theme.js

@@ -0,0 +1,108 @@
+// static/js/theme.js
+
+document.addEventListener('DOMContentLoaded', () => {
+  const themeSettingsForm = document.getElementById('theme-settings-form');
+  const colorInputs = themeSettingsForm
+    ? themeSettingsForm.querySelectorAll('input[type="color"]')
+    : [];
+
+  // Function to apply theme settings to CSS variables
+  function applyTheme(theme) {
+    const root = document.documentElement;
+    if (theme.primary_color)
+      root.style.setProperty('--color-primary', theme.primary_color);
+    if (theme.secondary_color)
+      root.style.setProperty('--color-secondary', theme.secondary_color);
+    if (theme.accent_color)
+      root.style.setProperty('--color-accent', theme.accent_color);
+    if (theme.background_color)
+      root.style.setProperty('--color-background', theme.background_color);
+    if (theme.text_color)
+      root.style.setProperty('--color-text-primary', theme.text_color);
+    // Add other theme properties as needed
+  }
+
+  // Save theme to local storage
+  function saveTheme(theme) {
+    localStorage.setItem('user-theme', JSON.stringify(theme));
+  }
+
+  // Load theme from local storage
+  function loadTheme() {
+    const savedTheme = localStorage.getItem('user-theme');
+    return savedTheme ? JSON.parse(savedTheme) : null;
+  }
+
+  // Real-time preview for color inputs
+  colorInputs.forEach((input) => {
+    input.addEventListener('input', (event) => {
+      const cssVar = `--color-${event.target.id.replace('-', '_')}`;
+      document.documentElement.style.setProperty(cssVar, event.target.value);
+    });
+  });
+
+  if (themeSettingsForm) {
+    themeSettingsForm.addEventListener('submit', async (event) => {
+      event.preventDefault();
+
+      const formData = new FormData(themeSettingsForm);
+      const themeData = Object.fromEntries(formData.entries());
+
+      try {
+        const response = await fetch('/api/theme-settings', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(themeData),
+        });
+
+        if (response.ok) {
+          alert('Theme settings saved successfully!');
+          applyTheme(themeData);
+          saveTheme(themeData);
+        } else {
+          const errorData = await response.json();
+          alert(`Error saving theme settings: ${errorData.detail}`);
+        }
+      } catch (error) {
+        console.error('Error:', error);
+        alert('An error occurred while saving theme settings.');
+      }
+    });
+  }
+
+  // Load and apply theme on page load
+  const initialTheme = loadTheme();
+  if (initialTheme) {
+    applyTheme(initialTheme);
+    // Populate form fields if on the theme settings page
+    if (themeSettingsForm) {
+      for (const key in initialTheme) {
+        const input = themeSettingsForm.querySelector(
+          `#${key.replace('_', '-')}`
+        );
+        if (input) {
+          input.value = initialTheme[key];
+        }
+      }
+    }
+  } else {
+    // If no saved theme, load from backend (if available)
+    async function loadAndApplyThemeFromServer() {
+      try {
+        const response = await fetch('/api/theme-settings'); // Assuming a GET endpoint for theme settings
+        if (response.ok) {
+          const theme = await response.json();
+          applyTheme(theme);
+          saveTheme(theme); // Save to local storage for future use
+        } else {
+          console.error('Failed to load theme settings from server');
+        }
+      } catch (error) {
+        console.error('Error loading theme settings from server:', error);
+      }
+    }
+    loadAndApplyThemeFromServer();
+  }
+});