Theme switching architecture in SASS - Mini Project: Build & Apply

Theme Switching Architecture with Sass

📖 Scenario: You are building a simple website that can switch between a light theme and a dark theme. You want to organize your colors and styles using Sass variables and create a clean structure that makes switching themes easy.

🎯 Goal: Create a Sass setup with variables for light and dark themes, a configuration variable to select the current theme, and use Sass maps and loops to apply the correct colors to the website's background and text.

📋 What You'll Learn

Use Sass variables to store colors for light and dark themes

Create a configuration variable to select the active theme

Use a Sass map to hold theme colors

Use a Sass loop or function to apply theme colors to CSS selectors

Output valid CSS that changes background and text colors based on the selected theme

💡 Why This Matters

🌍 Real World

Theme switching is common in websites and apps to improve user experience by offering light and dark modes.

💼 Career

Understanding how to organize and switch themes with Sass is useful for front-end developers working on modern, accessible, and user-friendly interfaces.

1

Set up theme color variables

Create two Sass maps called $light-theme and $dark-theme. Each map should have two keys: background and text. Set $light-theme background to #ffffff and text to #000000. Set $dark-theme background to #000000 and text to #ffffff.

SASS

// Your code here

Need a hint?

Use Sass maps with parentheses and commas. Example: $map: (key: value, key2: value2);

2

Add a theme selection variable

Create a Sass variable called $current-theme and set it to $light-theme.

SASS

$light-theme: (
  background: #ffffff,
  text: #000000
);

$dark-theme: (
  background: #000000,
  text: #ffffff
);

// Your code here

Need a hint?

Assign the variable $current-theme to the map $light-theme.

3

Use the theme colors in CSS selectors

Write CSS rules for the body selector that set background-color to the background value and color to the text value from the $current-theme map. Use the Sass map-get() function to get these values.

SASS

$light-theme: (
  background: #ffffff,
  text: #000000
);

$dark-theme: (
  background: #000000,
  text: #ffffff
);

$current-theme: $light-theme;

body {
  // Your code here
}

Need a hint?

Use map-get($current-theme, background) and map-get($current-theme, text) inside the body CSS block.

4

Add a CSS class for dark theme and use it

Add a CSS class selector .dark-theme that sets background-color and color using the $dark-theme map with map-get(). This will allow switching themes by adding or removing the dark-theme class on the body element.

SASS

$light-theme: (
  background: #ffffff,
  text: #000000
);

$dark-theme: (
  background: #000000,
  text: #ffffff
);

$current-theme: $light-theme;

body {
  background-color: map-get($current-theme, background);
  color: map-get($current-theme, text);
}

// Your code here

Need a hint?

Create a CSS class .dark-theme and set colors using map-get($dark-theme, ...).