Flash-free light and dark themes with Angular SSR
Choosing the theme before first paint, keeping the server render deterministic and avoiding hydration mismatches.
A server cannot know whether a visitor prefers a dark theme, so a naive implementation renders the light theme and then switches after JavaScript loads. That flash is distracting, and it is avoidable.
Decide before the first paint
A few lines of inline script in index.html read the saved preference — or fall back to prefers-color-scheme — and set a data-theme attribute on the root element. All colours are CSS custom properties keyed off that attribute, so the correct palette is applied immediately.
Keep the server render deterministic
The theme service never touches localStorage on the server. In the browser it simply reads the attribute the inline script already set. The toggle renders both icons and lets CSS show the right one, so the server and client markup have the same structure and hydration has nothing to reconcile.
Render the same structure everywhere; let attributes and CSS carry the differences.