From b77fb3000154cf90a3f48cde0eeb626b6cb52926 Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Tue, 3 Mar 2026 11:50:49 -0800
Subject: [PATCH] fix: persist light/dark theme preference across sessions

Restore canvas-theme from localStorage on page load with a blocking
script before first paint (body) and a fixup for header/tab-row.
Applied to all three shell renderers.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 server/shell.ts | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)
diff --git a/server/shell.ts b/server/shell.ts
index a53d0ab..a44602c 100644
--- a/server/shell.ts
+++ b/server/shell.ts
@@ -82,7 +82,9 @@ export function renderShell(opts: ShellOptions): string {
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🌌</text></svg>">
   <title>${escapeHtml(title)}</title>
-  <link rel="stylesheet" href="/shell.css?v=6">
+  <script>(function(){var t=localStorage.getItem('canvas-theme');if(!t)t=matchMedia('(prefers-color-scheme:light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t)})()</script>
+  <link rel="stylesheet" href="/theme.css?v=1">
+  <link rel="stylesheet" href="/shell.css?v=7">
   <style>
     /* When loaded inside an iframe (e.g. standalone domain redirecting back),
        hide the shell chrome — the parent rSpace page already provides it. */
@@ -98,8 +100,8 @@ export function renderShell(opts: ShellOptions): string {
   <style>${WELCOME_CSS}</style>
   <style>${ACCESS_GATE_CSS}</style>
 </head>
-<body data-theme="${theme}" data-space-visibility="${escapeAttr(spaceVisibility)}">
-  <header class="rstack-header" data-theme="${theme}">
+<body data-space-visibility="${escapeAttr(spaceVisibility)}">
+  <header class="rstack-header">
     <div class="rstack-header__left">
       <a href="/" style="display:flex;align-items:center;margin-right:4px"><img src="/favicon.png" alt="rSpace" class="rstack-header__logo"></a>
       <rstack-app-switcher current="${escapeAttr(moduleId)}"></rstack-app-switcher>
@@ -113,7 +115,7 @@ export function renderShell(opts: ShellOptions): string {
       <rstack-identity></rstack-identity>
     </div>
   </header>
-  <div class="rstack-tab-row" data-theme="${theme}">
+  <div class="rstack-tab-row">
     <rstack-tab-bar space="${escapeAttr(spaceSlug)}" active="" view-mode="flat"></rstack-tab-bar>
   </div>
   <main id="app"${moduleId === "rspace" ? ' class="canvas-layout"' : ''}>
@@ -123,7 +125,9 @@ export function renderShell(opts: ShellOptions): string {
   ${renderWelcomeOverlay()}
 
   <script type="module">
-    import '/shell.js?v=6';
+    import '/shell.js?v=7';
+    // Restore saved theme preference across header / tab-row
+    (function(){try{var t=localStorage.getItem('canvas-theme');if(t)document.querySelectorAll('[data-theme]').forEach(function(el){el.setAttribute('data-theme',t)})}catch(e){}})();
     // Provide module list to app switcher
     document.querySelector('rstack-app-switcher')?.setModules(${moduleListJSON});
 
@@ -475,6 +479,7 @@ export function renderExternalAppShell(opts: ExternalAppShellOptions): string {
   <script>if (window.self !== window.parent) document.documentElement.classList.add('rspace-embedded');</script>
 </head>
 <body data-theme="${theme}">
+  <script>(function(){try{var t=localStorage.getItem('canvas-theme');if(t)document.body.setAttribute('data-theme',t)}catch(e){}})()</script>
   <header class="rstack-header" data-theme="${theme}">
     <div class="rstack-header__left">
       <a href="/" style="display:flex;align-items:center;margin-right:4px"><img src="/favicon.png" alt="rSpace" class="rstack-header__logo"></a>
@@ -510,6 +515,7 @@ export function renderExternalAppShell(opts: ExternalAppShellOptions): string {
 
   <script type="module">
     import '/shell.js?v=6';
+    (function(){try{var t=localStorage.getItem('canvas-theme');if(t)document.querySelectorAll('[data-theme]').forEach(function(el){el.setAttribute('data-theme',t)})}catch(e){}})();
     document.querySelector('rstack-app-switcher')?.setModules(${moduleListJSON});
 
     const tabBar = document.querySelector('rstack-tab-bar');
@@ -722,6 +728,7 @@ export function renderModuleLanding(opts: ModuleLandingOptions): string {
   <script defer src="https://rdata.online/collect.js" data-website-id="6ee7917b-0ed7-44cb-a4c8-91037638526b"></script>
 </head>
 <body data-theme="${theme}">
+  <script>(function(){try{var t=localStorage.getItem('canvas-theme');if(t)document.body.setAttribute('data-theme',t)}catch(e){}})()</script>
   <header class="rstack-header" data-theme="${theme}">
     <div class="rstack-header__left">
       <a href="/" style="display:flex;align-items:center;margin-right:4px"><img src="/favicon.png" alt="rSpace" class="rstack-header__logo"></a>
@@ -738,6 +745,7 @@ export function renderModuleLanding(opts: ModuleLandingOptions): string {
   ${bodyContent}
   <script type="module">
     import '/shell.js?v=6';
+    (function(){try{var t=localStorage.getItem('canvas-theme');if(t)document.querySelectorAll('[data-theme]').forEach(function(el){el.setAttribute('data-theme',t)})}catch(e){}})();
     document.querySelector('rstack-app-switcher')?.setModules(${moduleListJSON});
     function _updateDemoBtn() {
       var btn = document.querySelector('.rstack-header__demo-btn');
