fix(ext): decouple URN-bar theme from the app theme (#459)#129
Merged
Conversation
The URN-bar light/dark switcher (#429) wrote uiSlice.theme / wallet.settings.theme directly, so toggling the bar's paint also flipped the whole extension's product theme. Give the bar its OWN independent, persisted preference (TOOLBAR_THEME_KEY = 'toolbar.theme', a flat storage key like TOOLBAR_ENABLED_KEY; modes light/dark/system, default system so first-run look is unchanged) resolved by resolveToolbarTheme/nextToolbarTheme in the shared toolbar.ts core. Both mounts now read/write ONLY this key: DigToolbar.tsx via useStorageValue, and the injected dig-toolbar.ts content script via chrome.storage.local + a new storage.onChanged branch (it previously only followed prefers-color-scheme with no persisted pref at all) — so the two stay in lockstep without ever touching the app theme. Patch bump (1.95.0 -> 1.95.1): a fix restoring intended isolation between two prefs, no new public surface. Co-Authored-By: Claude <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Closes DIG-Network/dig_ecosystem#459 (builds on #429).
The URN-bar light/dark theme switcher (#429) painted from — and its toggle wrote directly to — the
main app theme state (
uiSlice.theme/ persistedwallet.settings.theme, #111). Toggling the bar'spaint therefore also flipped the whole extension's product theme, and vice versa: an unintended
coupling between two conceptually separate preferences.
This gives the URN bar its OWN independent, persisted theme preference, fully decoupled in both
directions:
TOOLBAR_THEME_KEY='toolbar.theme'(src/lib/toolbar.ts) — a FLATchrome.storage.localkey, same idiom as the existing
TOOLBAR_ENABLED_KEY('toolbar.enabled') — never a field insidethe
wallet.settingsblob the app theme lives in. Modes:light/dark/system(
TOOLBAR_THEME_MODES), defaultsystem(TOOLBAR_THEME_DEFAULT) — before this fix the toolbarALWAYS followed
prefers-color-schemewith no persisted pref at all, so defaulting tosystemreproduces that exact first-run look (no jarring migration).
resolveToolbarTheme(mode, prefersDark)(system → OS signal,light/dark pass through) and
nextToolbarTheme(effective)(toggle to the explicit opposite).DigToolbar.tsx(built-in fullscreen bar) now reads/writes this key viauseStorageValueinstead of
useAppSelector(s => s.ui.theme)/dispatch(setTheme(...))+updateWalletSettings({theme}). The toggle button, itsdata-testids, aria-label, and visualbehavior are unchanged — only the underlying state it drives has moved.
dig-toolbar.ts(injected content-script bar) previously had NO persisted theme state at all —it just read
prefers-color-schemeat mount time. It now reads the SAMEtoolbar.themekey(default
system) alongside the existingtoolbar.enabledread, resolves it the same way, paintsthe same shared
TOOLBAR_PALETTES, and live-repaints on achrome.storage.onChangedevent forEITHER key — so it stays in lockstep with the fullscreen bar's switcher without gaining a Redux
store. Also added a
data-themeattribute on its root (mirroring the built-in bar) for testability.Verified
impact()ontoolbarTheme/DigToolbarreturned stale-index misses (thetheme feature postdates the last index build), so blast radius was confirmed by manual grep across
the repo:
DigToolbaris mounted only inApp.tsx;@/lib/toolbaris imported only byHeaderToolbarToggle.tsx,DigToolbar.tsx,dig-toolbar.ts, andbackground/index.ts(which onlyuses the unrelated
TOOLBAR_ENABLED_*/TOOLBAR_TOGGLE_COMMANDexports);uiSlice.theme/setThemeis touched only by
uiSlice.ts,AppFooter.tsx(app-theme control, untouched),useAppliedTheme.ts(untouched), and
DigToolbar.tsx(the coupling fixed here).gitnexus detect_changeson the stageddiff reports
risk_level: low, 0 affected processes.tsc --noEmitclean;eslint src0 errors.src/lib/toolbar.test.tsfor the newprimitives (
TOOLBAR_THEME_KEY/_DEFAULT/_MODES,isToolbarThemeMode,resolveToolbarTheme,nextToolbarTheme).DigToolbar.test.tsxrewrites the#429describe block to prove thedecoupling:
clicking flips the bar to dark and persists under the toolbar's OWN key — NOT wallet.settings.themeandtoggling the MAIN app theme (uiSlice.theme) does NOT move the URN-bar theme (reverse-direction proof), plus a keyboard-operability test(
is keyboard-operable: focusing + pressing Enter flips the theme). Full suite: 239/239 testfiles, 2474/2474 tests green; coverage 96.12% statements / 87.55% branches (repo floor is 80%).
playwright.sw.config.ts): all25/25 tests green in
e2e/sw/node-serve-omnibox-toolbar.spec.ts, including:#459 — the URN-bar theme is independent of the app theme, proven in BOTH directions— drives theREAL
AppFootertheme-selectcontrol and the REAL URN-bar toggle button, diverges them(app=light, toolbar=dark) and confirms neither moves the other.
#459 — the INJECTED content-script toolbar reads the SAME independent theme key, live, and never touches the app theme— flipstoolbar.themefrom the SW, confirms the injected bar (on anordinary web page) repaints live with no reload, and that
wallet.settingswas never written.Screenshots:
toolbar-injected-theme-{dark,light}.png(visually inspected — bar dark/lightagainst the unaffected fixture page).
#429/#459 — the URN-bar theme toggle flips light↔dark, persists under its OWN key, and survives reload — WITHOUT touching the app theme(rewritten from the old, now-incorrect assertion that atoolbar toggle click flips
document.documentElement.dataset.digTheme).#429/#459 — screenshot the URN-bar theme toggle in both light + dark (desktop/mobile)(rewrittento drive the toolbar's own key, not the app theme) — screenshots visually inspected, no layout
regressions.
#289 — local node reachable...) reproduced on first run andpassed in isolation and on re-run — confirmed unrelated to this change (timing flake in the fixture
harness, not a regression).
<button>with a stable localizedaria-label(
toolbar.theme.toggle, unchanged, all 14 locales),aria-pressedstate, and is keyboard-operable(Enter/Space) — covered by both the unit keyboard test and (implicitly, via
.click()) e2e.Cross-repo
SPEC.md§5.5 rewritten: the "two mounts choose WHICH palette differently, by design" section (whichdescribed the OLD entangled behavior) is replaced with a description of the independent
toolbar.themekey, its default, and the explicit no-cross-write guarantee; the theme-toggle bulletnow states it writes ONLY
toolbar.theme. Checked docs.dig.net for existing content describing thistoggle (none — #429 never documented the URN-bar theme switcher there) — no staleness introduced, no
other-repo changes needed (matches the issue's own cross-repo scope).
Bump
Patch
1.95.0→1.95.1— afix:restoring the intended isolation between two existingpreferences; no new public API/behavior surface (the toggle button, its test ids, and its visual
behavior are all unchanged from the user's perspective — only the state plumbing underneath moved to
its own key).
Co-Authored-By: Claude noreply@anthropic.com