[client] Add light mode with system, light, and dark theme options (#7344)

* desktop UI light mode

* Theme review fixes plus macOS window outline fix

* Windows runtime chrome re-theming plus apply serialization

* Windows chrome threading and theme event ordering fixes

* Darken toggle and setting sidebar text

* resolve theme appearance, apply on UI thread

* read theme once per window

* Re-assert Windows dark opt-in after SetTheme

* split app-wide GTK theming from per-window chrome

* Update Wails dependency and checksums

* KDE tray icon panel fix

* Five review fixes: theme ordering, cgo dedup, KDE panel resolution

* Path guard hardening, toggle contrast, windows comment

* non-vacuous escape tests

* Default view edits

* Polish settings nav, controls, borders, and disc

* Profiles settings boarder, modals, and buttons

* Additional edits based on feedback

* Switch colors away from slight blue hue

* Update missing lang

* Fix vertical tab active view

client/ui/frontend/tailwind.config.ts

@@ -10,29 +10,32 @@ const config: Config = {
     },
     extend: {
       colors: {
+        // nb-gray is theme-aware: channels come from CSS variables in
+        // globals.css (:root = light ramp, .dark = original dark ramp). The
+        // rgb(var(...) / <alpha-value>) form keeps opacity modifiers working.
         "nb-gray": {
-          DEFAULT: "#181A1D",
-          50: "#f4f6f7",
-          100: "#e4e7e9",
-          200: "#cbd2d6",
-          250: "#b7c0c6",
-          300: "#a3adb5",
-          350: "#8f9ca8",
-          400: "#7c8994",
-          500: "#616e79",
-          600: "#535d67",
-          700: "#474e57",
-          800: "#3f444b",
-          850: "#363b40",
-          900: "#2e3238",
-          910: "#2b2f33",
-          920: "#25282d",
-          925: "#1e2123",
-          930: "#25282c",
-          935: "#1f2124",
-          940: "#1c1e21",
-          950: "#181a1d",
-          960: "#16181b",
+          DEFAULT: "rgb(var(--nb-gray-DEFAULT) / <alpha-value>)",
+          50: "rgb(var(--nb-gray-50) / <alpha-value>)",
+          100: "rgb(var(--nb-gray-100) / <alpha-value>)",
+          200: "rgb(var(--nb-gray-200) / <alpha-value>)",
+          250: "rgb(var(--nb-gray-250) / <alpha-value>)",
+          300: "rgb(var(--nb-gray-300) / <alpha-value>)",
+          350: "rgb(var(--nb-gray-350) / <alpha-value>)",
+          400: "rgb(var(--nb-gray-400) / <alpha-value>)",
+          500: "rgb(var(--nb-gray-500) / <alpha-value>)",
+          600: "rgb(var(--nb-gray-600) / <alpha-value>)",
+          700: "rgb(var(--nb-gray-700) / <alpha-value>)",
+          800: "rgb(var(--nb-gray-800) / <alpha-value>)",
+          850: "rgb(var(--nb-gray-850) / <alpha-value>)",
+          900: "rgb(var(--nb-gray-900) / <alpha-value>)",
+          910: "rgb(var(--nb-gray-910) / <alpha-value>)",
+          920: "rgb(var(--nb-gray-920) / <alpha-value>)",
+          925: "rgb(var(--nb-gray-925) / <alpha-value>)",
+          930: "rgb(var(--nb-gray-930) / <alpha-value>)",
+          935: "rgb(var(--nb-gray-935) / <alpha-value>)",
+          940: "rgb(var(--nb-gray-940) / <alpha-value>)",
+          950: "rgb(var(--nb-gray-950) / <alpha-value>)",
+          960: "rgb(var(--nb-gray-960) / <alpha-value>)",
         },
         gray: {
           50: "#F9FAFB",