What is Theme switching architecture in SASS?

SASSmarkup~5 mins

Theme switching architecture in SASS

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

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.