mirror of
https://github.com/logseq/logseq.git
synced 2026-05-28 06:34:34 +00:00
c540a92ffa
The avatar fallback hex (background + text) is computed in JS by `avatar-fallback-style` → `colors/read-bg-var` → `getComputedStyle`, so its output is a snapshot of the current theme's CSS variables at render time. The result is written into the element's inline style. On `tt` (theme toggle) the snapshot stayed frozen until something unrelated triggered a re-render, leaving avatars carrying the wrong theme's tone — too bright in dark mode, too dark in light mode. Two coordinated changes: 1. state/set-theme-mode! now stamps `data-theme` + body classes synchronously *before* mutating `:ui/theme`. The previous flow left the DOM update inside theme.cljs's `use-effect!`, which fires AFTER React's render commit — so subscribers re-rendering on the state change still read the old theme's CSS vars. The theme.cljs effect remains as an idempotent safety net plus the side effects (plugin hook, custom-theme application). 2. `avatar-image-cp` and `get-node-icon-cp` subscribe to `:ui/theme`. The subscribed value is discarded — the subscription's job is to tick Rum's dependency graph so the component re-renders on toggle and recomputes `avatar-fallback-style` against the (now fresh) CSS variables. Combined with the synchronous DOM update above, the read-bg-var snapshot is correct on the first render after toggle, no second tick required. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>