Bird
Raised Fist0
SASSmarkup~5 mins

Theme switching architecture in SASS

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

Theme switching lets users change how a website looks, like switching between light and dark modes. It makes websites more personal and easier to use in different lighting.

You want to let users pick a light or dark theme for comfort.
Your website needs to match different brand colors for different clients.
You want to offer seasonal or event-based color changes easily.
You want to keep your styles organized and easy to update.
You want to improve accessibility by offering high contrast themes.
Syntax
SASS
// Define theme colors using variables
$light-bg: #ffffff;
$light-text: #000000;
$dark-bg: #121212;
$dark-text: #e0e0e0;

// Create theme classes
.light-theme {
  background-color: $light-bg;
  color: $light-text;
}

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

Use variables to store colors for easy updates.

Wrap theme styles inside classes to switch themes by changing the class on a container element.

Examples
Defines a light theme with a primary color variable.
SASS
// Using variables for light theme
$primary-color: #3498db;
.light-theme {
  background-color: #fff;
  color: $primary-color;
}
Shows nested styles inside the dark theme for links.
SASS
// Dark theme with nested styles
.dark-theme {
  background-color: #222;
  color: #eee;
  a {
    color: #9b59b6;
  }
}
Combines Sass with CSS variables for dynamic theme switching.
SASS
// Using CSS custom properties for themes
:root {
  --bg-color: #fff;
  --text-color: #000;
}
.dark-theme {
  --bg-color: #121212;
  --text-color: #e0e0e0;
}
body {
  background-color: var(--bg-color);
  color: var(--text-color);
}
Sample Program

This example uses Sass variables compiled to CSS for light and dark themes. The page starts with the light theme. Clicking the button toggles the theme by changing the class on the body. The colors and background update smoothly.

SASS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Theme Switcher Example</title>
  <style>
    .light-theme {
      background-color: #ffffff;
      color: #000000;
      transition: background-color 0.3s ease, color 0.3s ease;
    }

    .dark-theme {
      background-color: #121212;
      color: #e0e0e0;
      transition: background-color 0.3s ease, color 0.3s ease;
    }

    button {
      margin: 1rem;
      padding: 0.5rem 1rem;
      font-size: 1rem;
      cursor: pointer;
    }
  </style>
</head>
<body class="light-theme">
  <main>
    <h1>Welcome to Theme Switcher</h1>
    <p>Click the button to toggle between light and dark themes.</p>
    <button id="toggle-theme" aria-label="Toggle theme">Switch Theme</button>
  </main>
  <script>
    const button = document.getElementById('toggle-theme');
    const body = document.body;

    button.addEventListener('click', () => {
      if (body.classList.contains('light-theme')) {
        body.classList.replace('light-theme', 'dark-theme');
      } else {
        body.classList.replace('dark-theme', 'light-theme');
      }
    });
  </script>
</body>
</html>
OutputSuccess
Important Notes

Use semantic HTML elements like <main> and <button> for accessibility.

Include smooth transitions for a nicer visual effect when switching themes.

Use ARIA labels on buttons to help screen reader users understand the button's purpose.

Summary

Theme switching uses CSS classes with different colors to change website look.

Sass variables help keep colors organized and easy to update.

JavaScript can toggle theme classes to switch themes dynamically.

Practice

(1/5)
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