Theme switching architecture in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

How does CSS custom properties help in theme switching?

Which statement best explains why CSS custom properties (variables) are useful for theme switching in Sass-based projects?

A They allow dynamic changes to property values without recompiling Sass, enabling runtime theme switching.

B They force Sass to recompile stylesheets every time the theme changes, improving performance.

C They replace Sass variables completely, making Sass variables obsolete for theming.

D They only work with inline styles and cannot be used in external stylesheets.

💡 Hint

Think about how CSS variables can be changed in the browser after the page loads.

CSS custom properties can be updated at runtime using JavaScript or CSS selectors, allowing themes to switch without recompiling Sass. Sass variables are static and compiled at build time.

📝 Syntax

intermediate

Identify the correct Sass syntax for defining a dark theme map

Which option correctly defines a Sass map named $dark-theme with keys 'background' and 'text' and their respective color values?

A $dark-theme: {background: #121212, text: #e0e0e0};

B $dark-theme = (background: #121212; text: #e0e0e0);

C $dark-theme: (background: #121212, text: #e0e0e0);

D $dark-theme: [background: #121212, text: #e0e0e0];

💡 Hint

Sass maps use parentheses and colons between keys and values.

Sass maps are defined using parentheses with key: value pairs separated by commas. Equal signs or brackets are invalid syntax.

❓ rendering

advanced

What color will the text be after applying this Sass theme switch?

Given the following Sass and CSS, what will be the rendered text color in the browser when the dark class is added to the body?

SASS

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

:root {
  --background: map-get($light-theme, background);
  --text: map-get($light-theme, text);
}

body.dark {
  --background: map-get($dark-theme, background);
  --text: map-get($dark-theme, text);
}

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

A #e0e0e0

B #000000

C #ffffff

D #121212

💡 Hint

The dark class changes CSS variables to dark theme values.

When body has the dark class, the CSS variable --text is set to the dark theme's text color #e0e0e0. This color is used for the text.

❓ selector

advanced

Which CSS selector correctly applies styles only when dark theme is active?

You want to style all button elements differently when the dark theme is active by adding a dark class to body. Which selector correctly targets buttons only in dark mode?

A .dark > button

B button.dark

C body > .dark button

D body.dark button

💡 Hint

The dark class is on the body, not on the button itself.

The selector body.dark button targets all buttons inside a body element that has the dark class. Other options either target buttons with the dark class or incorrect hierarchy.

❓ accessibility

expert

How to ensure accessible theme switching for color contrast?

When switching themes, what is the best practice to maintain accessibility regarding color contrast?

A Use any colors you like since users can adjust brightness on their devices.

B Use colors that meet WCAG contrast ratios for both light and dark themes to ensure readability.

C Only focus on the light theme's contrast because dark theme is less common.

D Use very bright colors in dark theme to make text stand out regardless of contrast.

💡 Hint

Think about users with vision impairments and how contrast affects readability.

Accessibility guidelines recommend maintaining sufficient contrast ratios in all themes to ensure text is readable for everyone, including users with visual impairments.