SASSmarkup~10 mins

Theme switching architecture in SASS - Browser Rendering Trace

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Render Flow - Theme switching architecture

Load HTML

→Load CSS variables for default theme

↓

User clicks theme switch button

→JavaScript toggles theme class on <body>

↓

Browser repaints with new colors

The browser first loads the page with default theme colors set by CSS variables. When the user switches theme, JavaScript changes a class on the body, updating CSS variables to new colors. The browser then repaints the page with the new theme colors.

Render Steps - 3 Steps

Code Added:body { background-color: var(--bg-color); color: var(--text-color); }

Before

[ ] (blank white page)

→

After

[body]
Background: white
Text: black
[Welcome]
[This is a theme switch example.]

The body uses CSS variables for background and text colors, showing default light theme colors.

🔧 Browser Action:Apply styles, paint background and text colors

Code Sample

This code sets up two themes using CSS variables: light and dark. The body uses these variables for background and text colors. Switching the body's class changes the theme colors smoothly.

SASS

<body class="light-theme">
  <button id="theme-toggle">Switch Theme</button>
  <main>
    <h1>Welcome</h1>
    <p>This is a theme switch example.</p>
  </main>
</body>

SASS

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}

.light-theme {
  --bg-color: #ffffff;
  --text-color: #000000;
}

.dark-theme {
  --bg-color: #222222;
  --text-color: #eeeeee;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}

Render Quiz - 3 Questions

Test your understanding

After applying step 2, what visual change happens to the page?

ABackground becomes dark gray and text becomes light gray

BBackground becomes white and text becomes black

CNo visual change happens

DText becomes invisible

Common Confusions - 3 Topics

Why doesn't changing the class on body immediately change colors?

If the CSS variables are not defined for the new class, the colors won't update. Make sure both themes define the same CSS variables.

💡 Always define all CSS variables in each theme class to see color changes.

Why does the color change jump suddenly instead of smoothly?

Without the transition property on body, color changes happen instantly. Adding transition makes changes smooth (see step 3).

💡 Add transition on color and background-color for smooth theme switching.

Why do some elements not change color when theme switches?

Elements must use CSS variables for colors. Hardcoded colors won't change with theme variables.

💡 Use var(--text-color) and var(--bg-color) in all theme-dependent styles.

Property Reference

Property	Value Applied	Visual Effect	Common Use
--bg-color	#ffffff or #222222	Sets background color of the page	Theme background color
--text-color	#000000 or #eeeeee	Sets text color on the page	Theme text color
transition	background-color 0.3s ease, color 0.3s ease	Smooth color changes when theme switches	Smooth theme switching effect
class on body	light-theme or dark-theme	Switches CSS variable values	Triggers theme change

Concept Snapshot

Theme switching uses CSS variables for colors. Define variables in theme classes (e.g., .light-theme, .dark-theme). Apply variables in body styles for background and text. Switch theme by toggling class on body. Add transition for smooth color changes.