feat: Add application-level settings for CSS color management

- Introduced a new table `application_setting` to store configurable application options.
- Implemented functions to manage CSS color settings, including loading, updating, and reading environment overrides.
- Added a new settings view to render and manage theme colors.
- Updated UI to include a settings page with theme color management and environment overrides display.
- Enhanced CSS styles for the settings page and sidebar navigation.
- Created unit and end-to-end tests for the new settings functionality and CSS management.

static/js/settings.js

@@ -0,0 +1,200 @@
+(function () {
+  const dataScript = document.getElementById("theme-settings-data");
+  const form = document.getElementById("theme-settings-form");
+  const feedbackEl = document.getElementById("theme-settings-feedback");
+  const resetBtn = document.getElementById("theme-settings-reset");
+  const panel = document.getElementById("theme-settings");
+
+  if (!dataScript || !form || !feedbackEl || !panel) {
+    return;
+  }
+
+  const apiUrl = panel.getAttribute("data-api");
+  if (!apiUrl) {
+    return;
+  }
+
+  const parsed = JSON.parse(dataScript.textContent || "{}");
+  const currentValues = { ...(parsed.variables || {}) };
+  const defaultValues = parsed.defaults || {};
+  let envOverrides = { ...(parsed.envOverrides || {}) };
+
+  const previewElements = new Map();
+  const inputs = Array.from(form.querySelectorAll(".color-value-input"));
+
+  inputs.forEach((input) => {
+    const key = input.name;
+    const field = input.closest(".color-form-field");
+    const preview = field ? field.querySelector(".color-preview") : null;
+    if (preview) {
+      previewElements.set(input, preview);
+    }
+
+    if (Object.prototype.hasOwnProperty.call(envOverrides, key)) {
+      const overrideValue = envOverrides[key];
+      input.value = overrideValue;
+      input.disabled = true;
+      input.setAttribute("aria-disabled", "true");
+      input.dataset.envOverride = "true";
+      if (field) {
+        field.classList.add("is-env-override");
+      }
+      if (preview) {
+        preview.style.background = overrideValue;
+      }
+      return;
+    }
+
+    input.addEventListener("input", () => {
+      const previewEl = previewElements.get(input);
+      if (previewEl) {
+        previewEl.style.background = input.value || defaultValues[key] || "";
+      }
+    });
+  });
+
+  function setFeedback(message, type) {
+    feedbackEl.textContent = message;
+    feedbackEl.classList.remove("hidden", "success", "error");
+    if (type) {
+      feedbackEl.classList.add(type);
+    }
+  }
+
+  function clearFeedback() {
+    feedbackEl.textContent = "";
+    feedbackEl.classList.add("hidden");
+    feedbackEl.classList.remove("success", "error");
+  }
+
+  function updateRootVariables(values) {
+    if (!values) {
+      return;
+    }
+    const root = document.documentElement;
+    Object.entries(values).forEach(([key, value]) => {
+      if (typeof key === "string" && typeof value === "string") {
+        root.style.setProperty(key, value);
+      }
+    });
+  }
+
+  function resetTo(source) {
+    inputs.forEach((input) => {
+      const key = input.name;
+      if (input.disabled) {
+        const previewEl = previewElements.get(input);
+        const fallback = envOverrides[key] || currentValues[key];
+        if (previewEl && fallback) {
+          previewEl.style.background = fallback;
+        }
+        return;
+      }
+      if (Object.prototype.hasOwnProperty.call(source, key)) {
+        input.value = source[key];
+        const previewEl = previewElements.get(input);
+        if (previewEl) {
+          previewEl.style.background = source[key];
+        }
+      }
+    });
+  }
+
+  // Initialize previews to current values after page load.
+  resetTo(currentValues);
+
+  resetBtn?.addEventListener("click", () => {
+    resetTo(defaultValues);
+    clearFeedback();
+    setFeedback("Reverted to default values. Submit to save.", "success");
+  });
+
+  form.addEventListener("submit", async (event) => {
+    event.preventDefault();
+    clearFeedback();
+
+    const payload = {};
+    inputs.forEach((input) => {
+      if (input.disabled) {
+        return;
+      }
+      payload[input.name] = input.value.trim();
+    });
+
+    try {
+      const response = await fetch(apiUrl, {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ variables: payload }),
+      });
+
+      if (!response.ok) {
+        let detail = "Unable to save theme settings.";
+        try {
+          const errorData = await response.json();
+          if (errorData?.detail) {
+            detail = Array.isArray(errorData.detail)
+              ? errorData.detail.map((item) => item.msg || item).join("; ")
+              : errorData.detail;
+          }
+        } catch (parseError) {
+          // Ignore JSON parse errors and use default detail message.
+        }
+        setFeedback(detail, "error");
+        return;
+      }
+
+      const data = await response.json();
+      const variables = data?.variables || {};
+      const responseOverrides = data?.env_overrides || {};
+
+      Object.assign(currentValues, variables);
+      envOverrides = { ...responseOverrides };
+
+      inputs.forEach((input) => {
+        const key = input.name;
+        const field = input.closest(".color-form-field");
+        const previewEl = previewElements.get(input);
+        const isOverride = Object.prototype.hasOwnProperty.call(
+          envOverrides,
+          key,
+        );
+
+        if (isOverride) {
+          const overrideValue = envOverrides[key];
+          input.value = overrideValue;
+          if (!input.disabled) {
+            input.disabled = true;
+            input.setAttribute("aria-disabled", "true");
+          }
+          if (field) {
+            field.classList.add("is-env-override");
+          }
+          if (previewEl) {
+            previewEl.style.background = overrideValue;
+          }
+        } else if (input.disabled) {
+          input.disabled = false;
+          input.removeAttribute("aria-disabled");
+          if (field) {
+            field.classList.remove("is-env-override");
+          }
+          if (
+            previewEl &&
+            Object.prototype.hasOwnProperty.call(variables, key)
+          ) {
+            previewEl.style.background = variables[key];
+          }
+        }
+      });
+
+      updateRootVariables(variables);
+      resetTo(variables);
+      setFeedback("Theme colors updated successfully.", "success");
+    } catch (error) {
+      setFeedback("Network error: unable to save settings.", "error");
+    }
+  });
+})();