CSS custom properties (variables) in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does this Svelte component apply CSS custom properties?

Consider this Svelte component using CSS variables. What color will the text inside the <p> tag be?

Svelte

<script>
  let themeColor = 'blue';
</script>

<style>
  :root {
    --main-color: red;
  }
  p {
    color: var(--main-color);
  }
  .dynamic {
    --main-color: {themeColor};
  }
</style>

<div class="dynamic">
  <p>Hello world!</p>
</div>

A The text color will be red because :root sets --main-color to red.

B The text color will be blue because the .dynamic class overrides --main-color to blue.

C The text color will be black because CSS variables cannot be set dynamically in Svelte styles.

D The text color will be the browser default because var(--main-color) is invalid here.

💡 Hint

Remember that CSS custom properties cascade and can be overridden by classes on parent elements.

The .dynamic class attempts to set --main-color to the value of the themeColor variable, which is 'blue'. However, CSS inside the <style> block cannot interpolate Svelte variables directly. To apply dynamic CSS variables, inline styles or reactive style attributes should be used. In this code, the CSS variable --main-color remains 'red' from :root, so the text color will be red.

📝 Syntax

intermediate

Which CSS custom property syntax is correct in Svelte style block?

Which option correctly defines and uses a CSS custom property inside a Svelte <style> block?

A :root { --bg-color: green; } div { background-color: var(--bg-color); }

B :root { bg-color: green; } div { background-color: var(bg-color); }

C :root { --bg-color = green; } div { background-color: var(--bg-color); }

D :root { --bg-color: green; } div { background-color: --bg-color; }

💡 Hint

CSS custom properties start with two dashes and use var(--property-name) to access.

Option A correctly defines the custom property with --bg-color: green; and uses var(--bg-color) to apply it. Other options have syntax errors or misuse the variable.

❓ state_output

advanced

What is the background color after updating a CSS variable in Svelte?

Given this Svelte component, what background color will the <div> have after clicking the button once?

Svelte

<script>
  let color = 'red';
  function changeColor() {
    color = 'green';
  }
</script>

<style>
  div {
    background-color: var(--bg-color, blue);
    width: 100px;
    height: 100px;
  }
</style>

<div style="--bg-color: {color}"></div>
<button on:click={changeColor}>Change Color</button>

A The background color stays blue because CSS variables cannot be updated dynamically.

B The background color changes from blue to green after clicking the button.

C The background color changes from red to green after clicking the button.

D The background color stays red because inline styles do not update with Svelte variables.

💡 Hint

Inline styles with CSS variables can update reactively when bound to Svelte variables.

The <div> initially has --bg-color set to 'red' from the color variable. Clicking the button changes color to 'green', updating the inline style and changing the background color to green.

🔧 Debug

advanced

Why does this CSS variable not apply in Svelte?

Look at this Svelte component. Why does the text color not change to green?

Svelte

<script>
  let textColor = 'green';
</script>

<style>
  p {
    color: var(--text-color);
  }
</style>

<p style="text-color: {textColor}">Hello!</p>

A Because the variable <code>textColor</code> is not reactive.

B Because <code>text-color</code> is not a valid CSS property; it should be <code>color</code>.

C Because Svelte does not support CSS variables inside style attributes.

D Because the CSS variable <code>--text-color</code> is never defined in any style or inline style.

💡 Hint

Check if the CSS variable --text-color is actually set anywhere.

The CSS variable --text-color is used in the CSS but never defined. The inline style sets text-color, which is not a CSS property and does not define the variable. So the variable is undefined and the color does not change.

🧠 Conceptual

expert

How do CSS custom properties enable theming in Svelte apps?

Which statement best explains why CSS custom properties are useful for theming in Svelte applications?

A They allow dynamic updates of style values at runtime without recompiling components, enabling theme switching easily.

B They require JavaScript to update styles, so themes can only change on page reload.

C They replace all CSS classes, so styles are only applied via variables, simplifying CSS management.

D They prevent style inheritance, so each component must define all colors explicitly.

💡 Hint

Think about how CSS variables can be changed dynamically and cascade through the DOM.

CSS custom properties can be updated dynamically via JavaScript or reactive frameworks like Svelte. This allows changing themes by updating variables at runtime without recompiling or reloading, making them ideal for theming.