green mode slop 1

webui/src/themes/index.js

@@ -10,3 +10,4 @@ export {
   normalizePageThemeKey,
 } from './catalog.js';
 export { themeGapClass, themeStackClass } from './layout.js';
+export { default as usePageThemeClass } from './usePageThemeClass.js';

webui/src/themes/styles/base.css

@@ -24,3 +24,10 @@
     background-color: #000000;
     background-image: none;
   }
+
+  .page-theme-green-mode {
+    /* The deliberately blunt solid lime canvas is a temporary server mode, not
+       a selectable personal theme, so it belongs outside the persisted catalog. */
+    background-color: #00ff00;
+    background-image: none;
+  }

webui/src/themes/usePageThemeClass.js

@@ -0,0 +1,17 @@
+// Active Page Theme Hook
+// Purpose: Resolves personal theme settings together with temporary server-owned theme overrides.
+// Scope: Keeps page shells unaware of individual modes while preserving the pure catalog helpers.
+import { useSessionSelector } from '../context/SessionContext.jsx';
+import { getPageThemeClass } from './catalog.js';
+
+export default function usePageThemeClass(backgroundTheme) {
+  const greenMode = useSessionSelector((state) => Boolean(state.session?.greenMode));
+
+  /*
+    Green mode is a temporary server-wide theme, so it wins at resolution time
+    without modifying the user's persisted theme selection. Every page consumes
+    this hook and therefore receives future server theme overrides consistently.
+  */
+  if (greenMode) return 'page-theme page-theme-green-mode';
+  return getPageThemeClass(backgroundTheme);
+}