fix(ssr): remove color defaults from :root in _themes.scss
CI Pipeline / backend-test (push) Successful in 9m55s
CI Pipeline / frontend-test (push) Successful in 23s
CI Pipeline / frontend-build (push) Successful in 29s
CI Pipeline / backend-lint (push) Successful in 9s
CI Pipeline / backend-test (pull_request) Successful in 9m56s
CI Pipeline / frontend-test (pull_request) Successful in 23s
CI Pipeline / frontend-build (pull_request) Successful in 30s
CI Pipeline / backend-lint (pull_request) Successful in 8s
CI Pipeline / quality-gate (push) Successful in 2s
CI Pipeline / quality-gate (pull_request) Successful in 1s

The SSR server injects fresh color CSS custom properties as an inline
<style> block before </head>, but _themes.scss also set hardcoded
color defaults on :root at build time. The two :root blocks compete
in the cascade — the compiled stylesheet (loaded after the inline
<style>) overwrites the server-injected colors, causing a visible
flash where wrong colors render briefly before ThemeService.apply()
corrects them.

Removing the color properties from :root in _themes.scss makes the
server-injected <style> the sole source of truth for colors. Non-color
properties (fonts, radii, shadows) remain as build-time defaults since
they don't change between deploys.
This commit is contained in:
robot committed 2026-08-09 05:55:28 +00:00
1 parent 849856aecb
commit e78a725839
1 file changed
+7 -25
+7 -25
View File
@@ -3,33 +3,15 @@
// ========== CSS Custom Properties (exposed to the browser) ========== // ========== CSS Custom Properties (exposed to the browser) ==========
// These map SCSS variables to CSS custom properties so Angular components // These map SCSS variables to CSS custom properties so Angular components
// can consume them via var() at runtime. // can consume them via var() at runtime.
//
// COLOR variables (color_*, gradient_*) are NOT set here anymore.
// They are injected at runtime by the SSR server as an inline <style> block
// so the first paint always carries the correct station colors.
// Client-side ThemeService.apply() keeps them in sync after Angular boots.
//
// Non-color variables (fonts, radii, shadows) remain below as build-time defaults.
:root { :root {
// Primary
--color-primary: #{$primary-blue};
--color-primary-light: #{$primary-blue-light};
--color-primary-dark: #{$primary-blue-dark};
--color-primary-muted: #{$primary-blue-muted};
// Accent
--color-accent: #{$accent-orange};
--color-accent-light: #{$accent-orange-light};
--color-accent-dark: #{$accent-orange-dark};
--color-accent-muted: #{$accent-orange-muted};
// Neutrals
--color-white: #{$neutral-white};
--color-cream: #{$neutral-cream};
--color-light: #{$neutral-light};
--color-medium: #{$neutral-medium};
--color-dark: #{$neutral-dark};
--color-black: #{$neutral-black};
// Semantic
--color-success: #{$success-green};
--color-danger: #{$danger-red};
--color-info: #{$info-blue};
// Typography // Typography
--font-primary: #{$font-primary}; --font-primary: #{$font-primary};
--font-heading: #{$font-heading}; --font-heading: #{$font-heading};