Theme switching architecture in SASS - Performance & Optimization

Performance: Theme switching architecture

MEDIUM IMPACT

Theme switching affects page load speed and interaction responsiveness by controlling CSS variable usage and style recalculations.

Implementing a dark/light theme switch in a website

SASS

:root {
  --primary-color: #000;
  --background-color: #fff;
}

[data-theme='dark'] {
  --primary-color: #fff;
  --background-color: #000;
}

body {
  color: var(--primary-color);
  background-color: var(--background-color);
}

// Switching theme by toggling data-theme attribute

Using CSS custom properties allows changing theme by toggling a single attribute, triggering only paint without layout recalculation.

📈 Performance GainTriggers only paint stage, reducing blocking time to under 20ms and improving interaction responsiveness.

Implementing a dark/light theme switch in a website

SASS

$primary-color: #000;
$background-color: #fff;

body {
  color: $primary-color;
  background-color: $background-color;
}

// To switch theme, reload or override many selectors with new variables

Using SASS variables compiles to static CSS, so switching themes requires reloading styles or overriding many selectors, causing full repaint and layout recalculation.

📉 Performance CostTriggers full repaint and layout recalculation on theme change, blocking interaction for 50-100ms on average.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
SASS variables with full CSS reload	Minimal DOM changes	Triggers full reflow	High paint cost due to layout recalculation	[X] Bad
CSS custom properties with attribute toggle	Single attribute change	No reflow, only paint	Low paint cost, fast repaint	[OK] Good

Rendering Pipeline

Theme switching with CSS variables updates the style calculation and paint stages without forcing layout recalculation, improving responsiveness.

→Style Calculation

→Paint

→Composite

⚠️ BottleneckPaint stage is the most expensive during theme switching if CSS variables are used properly.

Core Web Vital Affected

INP

Theme switching affects page load speed and interaction responsiveness by controlling CSS variable usage and style recalculations.

Optimization Tips

1Use CSS custom properties for colors and backgrounds to enable fast theme switching.

2Toggle themes by changing a single attribute or class to minimize DOM changes.

3Avoid recompiling or reloading full CSS on theme switch to prevent layout thrashing.

Performance Quiz - 3 Questions

What is the main performance benefit of using CSS custom properties for theme switching?

A It reduces the CSS file size significantly.

B It allows changing colors without triggering layout recalculation.

C It prevents any paint operations during theme switch.

D It automatically caches styles in the browser.

DevTools: Performance

How to check: Record a performance profile while toggling the theme. Look for layout and paint events in the flame chart.

What to look for: Good pattern shows no layout recalculation and minimal paint time; bad pattern shows layout thrashing and longer paint.