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

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

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
}

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

Hint

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

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