Add configurable sidebar contrast settings

public/app.js

@@ -48,6 +48,8 @@ const localDbFields = document.querySelector("#localDbFields");
 const localDbInputs = document.querySelectorAll("#localDbFields input");
 const testLocalDbButton = document.querySelector("#testLocalDbButton");
 const localDbTestResult = document.querySelector("#localDbTestResult");
+const lightContrastSelect = document.querySelector("#lightContrastSelect");
+const darkContrastSelect = document.querySelector("#darkContrastSelect");
 const nativeFetch = window.fetch.bind(window);
 window.fetch = (input, init = {}) => {
     const url = typeof input === "string" ? input : input.url;
@@ -128,6 +130,7 @@ const productFieldMap = {
 };
 await loadStatus();
 loadTheme();
+loadAppearance();
 renderFields();
 renderTableHeader();
 setTableWidth();
@@ -210,6 +213,8 @@ for (const input of transactionModeInputs)
 for (const input of localDbInputs)
     input.addEventListener("change", saveLocalDbSettings);
 testLocalDbButton.addEventListener("click", testLocalDbConnection);
+lightContrastSelect.addEventListener("change", saveAppearance);
+darkContrastSelect.addEventListener("change", saveAppearance);
 loadDatabaseMode();
 syncSidebarForViewport();
 window.matchMedia("(min-width: 981px)").addEventListener("change", syncSidebarForViewport);
@@ -864,6 +869,25 @@ function loadTheme() {
     themeToggle.querySelector("span").textContent = isDark ? "Light theme" : "Dark theme";
     themeToggle.setAttribute("aria-pressed", String(isDark));
 }
+function loadAppearance() {
+    const settings = JSON.parse(localStorage.getItem("catalog-maker:appearance") || "{}");
+    lightContrastSelect.value = settings.lightContrast || "medium";
+    darkContrastSelect.value = settings.darkContrast || "medium";
+    applyAppearance();
+}
+function saveAppearance() {
+    localStorage.setItem("catalog-maker:appearance", JSON.stringify({
+        lightContrast: lightContrastSelect.value,
+        darkContrast: darkContrastSelect.value,
+    }));
+    applyAppearance();
+}
+function applyAppearance() {
+    const root = document.documentElement;
+    root.classList.remove("contrast-light-low", "contrast-light-medium", "contrast-light-high", "contrast-dark-low", "contrast-dark-medium", "contrast-dark-high");
+    root.classList.add(`contrast-light-${lightContrastSelect.value || "medium"}`);
+    root.classList.add(`contrast-dark-${darkContrastSelect.value || "medium"}`);
+}
 function toggleTheme() {
     const isDark = !document.documentElement.classList.contains("dark");
     localStorage.setItem("catalog-maker:theme", isDark ? "dark" : "light");

public/app.ts

@@ -48,6 +48,8 @@ const localDbFields = document.querySelector("#localDbFields");
 const localDbInputs = document.querySelectorAll("#localDbFields input");
 const testLocalDbButton = document.querySelector("#testLocalDbButton");
 const localDbTestResult = document.querySelector("#localDbTestResult");
+const lightContrastSelect = document.querySelector("#lightContrastSelect");
+const darkContrastSelect = document.querySelector("#darkContrastSelect");
 
 const nativeFetch = window.fetch.bind(window);
 window.fetch = (input, init = {}) => {
@@ -134,6 +136,7 @@ const productFieldMap = {
 
 await loadStatus();
 loadTheme();
+loadAppearance();
 renderFields();
 renderTableHeader();
 setTableWidth();
@@ -209,6 +212,8 @@ for (const input of permissionInputs) input.addEventListener("change", saveSetti
 for (const input of transactionModeInputs) input.addEventListener("change", saveSettings);
 for (const input of localDbInputs) input.addEventListener("change", saveLocalDbSettings);
 testLocalDbButton.addEventListener("click", testLocalDbConnection);
+lightContrastSelect.addEventListener("change", saveAppearance);
+darkContrastSelect.addEventListener("change", saveAppearance);
 
 loadDatabaseMode();
 syncSidebarForViewport();
@@ -954,6 +959,28 @@ function loadTheme() {
   themeToggle.setAttribute("aria-pressed", String(isDark));
 }
 
+function loadAppearance() {
+  const settings = JSON.parse(localStorage.getItem("catalog-maker:appearance") || "{}");
+  lightContrastSelect.value = settings.lightContrast || "medium";
+  darkContrastSelect.value = settings.darkContrast || "medium";
+  applyAppearance();
+}
+
+function saveAppearance() {
+  localStorage.setItem("catalog-maker:appearance", JSON.stringify({
+    lightContrast: lightContrastSelect.value,
+    darkContrast: darkContrastSelect.value,
+  }));
+  applyAppearance();
+}
+
+function applyAppearance() {
+  const root = document.documentElement;
+  root.classList.remove("contrast-light-low", "contrast-light-medium", "contrast-light-high", "contrast-dark-low", "contrast-dark-medium", "contrast-dark-high");
+  root.classList.add(`contrast-light-${lightContrastSelect.value || "medium"}`);
+  root.classList.add(`contrast-dark-${darkContrastSelect.value || "medium"}`);
+}
+
 function toggleTheme() {
   const isDark = !document.documentElement.classList.contains("dark");
   localStorage.setItem("catalog-maker:theme", isDark ? "dark" : "light");

public/index.html

@@ -176,6 +176,27 @@
             <p class="settings-note" id="databaseModeNote">Local test database selected.</p>
           </fieldset>
 
+          <fieldset class="settings-group">
+            <legend>Appearance</legend>
+            <label class="settings-field">
+              <span>Light contrast</span>
+              <select class="settings-select" id="lightContrastSelect">
+                <option value="low">Soft</option>
+                <option value="medium" selected>Balanced</option>
+                <option value="high">High</option>
+              </select>
+            </label>
+            <label class="settings-field">
+              <span>Dark contrast</span>
+              <select class="settings-select" id="darkContrastSelect">
+                <option value="low">Soft</option>
+                <option value="medium" selected>Balanced</option>
+                <option value="high">High</option>
+              </select>
+            </label>
+            <p class="settings-note">Controls the contrast of the left sidebar and its controls.</p>
+          </fieldset>
+
           <fieldset class="settings-group">
             <legend>Access permissions</legend>
             <label class="settings-option">