From bebe0702368430ff85cc37bdabfa2fe719402c52 Mon Sep 17 00:00:00 2001 From: Kjell Tore Guttormsen Date: Sun, 3 May 2026 20:01:53 +0200 Subject: [PATCH] feat(ms-ai-architect): playground v3 theme toggle with localStorage persistence [skip-docs] Step 13 (Wave 5). Adds light/dark theme toggle to v3 playground. - Inline + @@ -1456,6 +1471,9 @@ const crumbHtml = (orgName || crumb) ? '' + (orgName ? escapeHtml(orgName) : '') + (orgName && crumb ? ' · ' : '') + (crumb || '') + '' : ''; + const currentTheme = document.documentElement.getAttribute('data-theme') === 'light' ? 'light' : 'dark'; + const themeLabel = currentTheme === 'light' ? 'Lys' : 'Mørk'; + const themeNext = currentTheme === 'light' ? 'mørk' : 'lys'; return ( '
' + '
' + @@ -1470,6 +1488,9 @@ '' + '' + '' + + '' + '' + '
' ); @@ -3625,6 +3646,25 @@ ACTIONS['goto-catalog'] = function () { navigate('catalog'); }; ACTIONS['goto-onboarding'] = function () { navigate('onboarding'); }; + // Theme toggle (Step 13). Veksler data-theme på , persisterer i + // localStorage('ms-ai-architect-theme'). Tar høyde for begrensning fra + // file:// + privatmodus. Re-renderer ikke surfaces — endrer kun attributt + // og synkroniserer alle [data-theme-label]-elementer in-place. + ACTIONS['toggle-theme'] = function () { + const current = document.documentElement.getAttribute('data-theme') === 'light' ? 'light' : 'dark'; + const next = current === 'dark' ? 'light' : 'dark'; + document.documentElement.setAttribute('data-theme', next); + try { localStorage.setItem('ms-ai-architect-theme', next); } catch (e) { /* ignore */ } + const labels = document.querySelectorAll('[data-theme-label]'); + for (let i = 0; i < labels.length; i++) { + labels[i].textContent = next === 'dark' ? 'Mørk' : 'Lys'; + } + const buttons = document.querySelectorAll('[data-action="toggle-theme"]'); + for (let j = 0; j < buttons.length; j++) { + buttons[j].setAttribute('aria-label', 'Bytt til ' + (next === 'dark' ? 'lys' : 'mørk') + ' modus'); + } + }; + ACTIONS['open-project'] = function (ev, el) { const id = el.dataset.projectId; if (!id) return;