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.

Practice

1. What is the main purpose of using Sass variables in a theme switching architecture?

easy

A. To store colors and reuse them easily across themes

B. To write JavaScript code for switching themes

C. To create HTML elements dynamically

D. To disable CSS styles for certain themes

Solution

1. Step 1: Understand Sass variables role

   Sass variables hold values like colors to reuse them easily.

2. Step 2: Connect variables to theme switching

   Using variables lets you change colors in one place for all themes.

3. Final Answer:

   To store colors and reuse them easily across themes -> Option A

4. Quick Check:

   Sass variables = reusable colors [OK]

Hint: Remember: variables store values for easy updates [OK]

Common Mistakes:

• Confusing Sass variables with JavaScript functions
• Thinking variables create HTML elements
• Believing variables disable styles

2. Which Sass syntax correctly defines a color variable for a dark theme?

easy

A. @dark-color: #333;

B. $dark-color: #333;

C. var dark-color = #333;

D. dark-color = #333;

Solution

1. Step 1: Recall Sass variable syntax

   Sass variables start with a dollar sign ($) followed by the name and colon.

2. Step 2: Check each option

   Only $dark-color: #333; uses correct Sass syntax: $dark-color: #333;

3. Final Answer:

   $dark-color: #333; -> Option B

4. Quick Check:

   Sass variable syntax = $name: value; [OK]

Hint: Sass variables always start with $ and end with semicolon [OK]

Common Mistakes:

• Using equal sign (=) instead of colon (:)
• Missing $ before variable name
• Using @ instead of $

3. Given this Sass code snippet, what background color will the body have when the .dark-theme class is added?

$light-bg: #fff;
$dark-bg: #222;

body {
  background-color: $light-bg;
}

.dark-theme {
  body {
    background-color: $dark-bg;
  }
}

medium

A. #222 (dark gray)

B. #fff (white)

C. No background color

D. Background color depends on JavaScript

Solution

1. Step 1: Understand default body background

   Without any class, body uses $light-bg (#fff).

2. Step 2: Check effect of .dark-theme class

   When .dark-theme is added, body background changes to $dark-bg (#222).

3. Final Answer:

   #222 (dark gray) -> Option A

4. Quick Check:

   .dark-theme body background = $dark-bg [OK]

Hint: Class styles override default styles when applied [OK]

Common Mistakes:

• Ignoring nested selector inside .dark-theme
• Thinking default color stays when class added
• Assuming JavaScript sets color directly

4. Identify the error in this Sass snippet for theme switching:

$primary-color: #000;

.light-theme {
  $primary-color: #fff;
  color: $primary-color;
}

medium

A. Selector .light-theme should be nested inside body

B. Missing semicolon after $primary-color definition

C. Variables cannot be redefined inside a selector block

D. Color property should be outside the selector

Solution

1. Step 1: Check variable scope rules in Sass

   Sass variables cannot be redefined inside selector blocks; they are global or local in mixins/functions.

2. Step 2: Analyze the code snippet

   $primary-color is redefined inside .light-theme selector, which is invalid syntax.

3. Final Answer:

   Variables cannot be redefined inside a selector block -> Option C

4. Quick Check:

   Sass variables scope = no redefinition inside selectors [OK]

Hint: Define variables only at root or inside mixins, not selectors [OK]

Common Mistakes:

• Trying to redefine variables inside CSS selectors
• Forgetting semicolons (not the main error here)
• Misunderstanding nesting rules

5. You want to build a theme switcher that toggles between light and dark themes using Sass and JavaScript. Which architecture is best to keep your Sass code clean and scalable?

hard

A. Write all colors directly in CSS without variables and change styles with inline JavaScript

B. Create separate CSS files for each theme and reload the page to switch

C. Use JavaScript to rewrite Sass variables at runtime for theme switching

D. Define color variables for each theme, create separate classes using those variables, and toggle classes with JavaScript

Solution

1. Step 1: Understand Sass and JavaScript roles

   Sass variables keep colors organized; JavaScript toggles CSS classes dynamically.

2. Step 2: Evaluate options for scalability and cleanliness

   Define color variables for each theme, create separate classes using those variables, and toggle classes with JavaScript uses variables and classes properly, making code easy to maintain and switch themes without reload.

3. Final Answer:

   Define color variables for each theme, create separate classes using those variables, and toggle classes with JavaScript -> Option D

4. Quick Check:

   Variables + classes + JS toggle = clean scalable theme switch [OK]

Hint: Use variables and classes, toggle classes with JS for best practice [OK]

Common Mistakes:

• Trying to change Sass variables at runtime (impossible)
• Hardcoding colors without variables
• Reloading page instead of toggling classes