Chapter 21 Advanced 56 Questions

Practice Questions — CSS Variables and Theming (Dark Mode)

← Back to Notes

10 Easy

15 Medium

7 Hard

Topic-Specific Questions

Question 1

Easy

What does this CSS do?

:root {
  --primary: #a855f7;
}
.btn { background: var(--primary); }

Variables declared on :root are global.

The button gets a purple background (#a855f7). The value is read from the global --primary variable.

Question 2

Easy

What background color does the button get?

.btn {
  background: var(--missing, #06b6d4);
}

The second argument to var() is a fallback.

Cyan (#06b6d4).

Question 3

Easy

Why does this not work?

:root {
  primary: red;
}
.btn { background: var(primary); }

Custom properties need a specific prefix.

Custom properties must start with -- (two dashes). Both the definition and the var() call need the dashes.

Question 4

Easy

What does this give you?

:root {
  --s: 8px;
}
.box {
  padding: calc(var(--s) * 3);
}

calc() can multiply variables.

padding: 24px (8px x 3).

Question 5

Easy

Which element does :root select?

It is the topmost element.

The <html> element (but with higher specificity than html).

Question 6

Easy

What color is the heading?

:root { --brand: purple; }
.panel { --brand: orange; }
.panel h1 { color: var(--brand); }

Variables cascade and inherit.

orange.

Question 7

Easy

What does this do?

document.documentElement.style.setProperty('--primary', '#ec4899');

It writes a variable on .

Sets the --primary variable on the root element to hot pink. Every element using var(--primary) updates instantly.

Question 8

Easy

What is the final background color?

:root { --bg: white; }
body.dark { --bg: #0f172a; }
body { background: var(--bg); }
/* HTML:  */

The body has the dark class.

#0f172a (dark navy).

Question 9

Easy

Which variable value wins?

:root { --c: red; }
.card { --c: blue; }
.card .title { color: var(--c); }

Closer ancestor wins.

blue.

Question 10

Easy

Why are CSS variables better than Sass variables for theming?

Think about when each exists.

CSS variables are live in the browser. They can be changed at runtime (by JavaScript or media queries) and respond to class toggles. Sass variables are compiled away before the browser sees the CSS, so they cannot change without a rebuild.

Question 11

Medium

What color is the button?

.btn {
  background: var(--x, var(--y, #f59e0b));
}

Nested fallbacks are allowed.

Amber (#f59e0b) if both --x and --y are missing.

Question 12

Medium

What is the computed padding?

:root { --s: 4px; }
.box { padding: calc(var(--s) * var(--mult, 5)); }

Fallback is used for --mult.

20px (4 x 5).

Question 13

Medium

Does this work?

.box {
  --size: 20;
  width: var(--size)px;
}

CSS does not concatenate like that.

No. You cannot attach a unit to a var() by writing px after it. Use calc(var(--size) * 1px) instead.

Question 14

Medium

What is the output of this JavaScript?

const val = getComputedStyle(document.documentElement)
  .getPropertyValue('--primary');
console.log(typeof val);
console.log(val.length > 0);

getPropertyValue returns a string.

string
true (assuming --primary is defined somewhere).

Question 15

Medium

Which variable wins?

:root { --color: red; }
.a { --color: green; }
.b { --color: blue; }
/* hello */
p { color: var(--color); }

Walk up the DOM tree.

blue.

Question 16

Medium

What does this media query do?

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f172a;
    --text: #f1f5f9;
  }
}

It responds to system settings.

When the user's operating system is in dark mode, these variable values are applied automatically. Users with light mode get the default values.

Question 17

Medium

Does this work for dark mode?

body { background: white; }
body.dark { background: black; }

It works but it is not the best approach.

Yes, but it does not scale. You would need duplicate rules for every element that changes in dark mode. Use variables instead.

Question 18

Medium

What is the padding on .card?

:root {
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
}
.card { padding: var(--s-3) var(--s-5); }

Two-value padding means vertical horizontal.

12px top and bottom, 24px left and right.

Question 19

Medium

What color does the .badge use?

.card { --accent: #7c3aed; }
.card.success { --accent: #16a34a; }
.badge { background: var(--accent); }
/* New
 */

The badge is inside a card.success.

Green (#16a34a).

Question 20

Medium

What happens if you forget .trim()?

const c = getComputedStyle(document.documentElement).getPropertyValue('--primary');
element.style.color = c;

CSS values can have extra whitespace.

It usually works because browsers tolerate leading whitespace in CSS values. But string comparisons (c === '#a855f7') will fail and some contexts may reject the value.

Question 21

Medium

What does this print?

document.documentElement.style.setProperty('--x', '10px');
const v = getComputedStyle(document.documentElement).getPropertyValue('--x').trim();
console.log(v);

setProperty writes, getPropertyValue reads.

10px

Question 22

Medium

What is the font size?

:root {
  --base: 16px;
  --h1: calc(var(--base) * 2);
}
h1 { font-size: var(--h1); }

Calculate with the base.

32px.

Question 23

Medium

Why do component libraries define variables on the component itself (.card { --card-bg: white; }) instead of only on :root?

Think about overrides and encapsulation.

Component-scoped variables let consumers override just that component's theming without affecting the rest of the page. A variant like .card.danger can redefine --card-bg and change only that one card's look, without a single new style rule.

Question 24

Medium

What is a 'design token' and how do CSS variables fit in?

Tokens are named design decisions.

A design token is a named value representing a design decision (a color, spacing unit, font size, shadow, radius, etc.). CSS variables are the browser-native way to implement tokens: the token name becomes the variable name, and its value lives in one place.

Question 25

Medium

When should you use :root versus html for global variables?

Specificity.

:root has higher specificity than html, so variables defined there are less likely to be accidentally overridden. Always prefer :root for global CSS variables.

Question 26

Hard

What does the button look like?

.btn {
  --bg: linear-gradient(135deg, #7c3aed, #ec4899);
  background: var(--bg);
  padding: 14px 28px;
  border: none;
  border-radius: 999px;
  color: white;
}

Variables can hold any CSS value, including functions.

A rounded pill button with a purple-to-pink diagonal gradient background.

Question 27

Hard

What happens here?

:root { --size: 20; }
.box { width: var(--size) * 1px; }

Can you multiply outside calc()?

It does not work. Width ends up invalid and falls back to auto. You must wrap the multiplication in calc(): width: calc(var(--size) * 1px);.

Question 28

Hard

What is logged?

:root { --primary: #a855f7; }
// In JS
const root = document.documentElement;
root.style.setProperty('--primary', '#06b6d4');
const v = getComputedStyle(root).getPropertyValue('--primary').trim();
console.log(v);

setProperty overrides.

#06b6d4

Question 29

Hard

Is this a valid dark mode pattern?

body { --bg: white; }
@media (prefers-color-scheme: dark) {
  body { --bg: #0f172a; }
}
body.force-light { --bg: white; }
body { background: var(--bg); }

Specificity decides.

Yes. The default is light. OS dark mode flips it to dark. The force-light class explicitly overrides back to light regardless of OS preference.

Question 30

Hard

Why does this transition not animate smoothly?

.box {
  --size: 100px;
  width: var(--size);
  transition: width 0.3s;
}
.box:hover { --size: 200px; }

Are CSS variables animatable?

By default, CSS variables are not animatable because the browser does not know their type. The transition does not run. Use @property --size { syntax: '<length>'; initial-value: 100px; inherits: false; } to declare the type so it animates.

Question 31

Hard

How would you build a theme switcher with three themes (light, dark, sepia)?

Use data attributes or classes on body.

Define variables for light on :root and add [data-theme='dark'] and [data-theme='sepia'] selectors that override the variables. JavaScript sets document.documentElement.dataset.theme and optionally saves to localStorage.

Question 32

Hard

What is the difference between scoping a variable on html, on body, and on a specific component?

Who inherits?

On html or :root: available globally to everything. On body: available to all body content but not head. On a component: available only to that component and its descendants. Use the smallest scope that achieves your goal.

Mixed & Application Questions

Questions coming soon.

Multiple Choice Questions

MCQ 1

How do you declare a CSS custom property named 'primary'?

A. primary: #a855f7;
B. $primary: #a855f7;
C. --primary: #a855f7;
D. @primary: #a855f7;

Answer: C
C is correct. CSS custom properties start with two dashes. $ is Sass syntax and @ is Less syntax — neither works in plain CSS.

MCQ 2

How do you use a custom property in a CSS value?

A. background: $primary;
B. background: var(--primary);
C. background: --primary;
D. background: @primary;

Answer: B
B is correct. The var() function reads the value of a custom property. You must include the two leading dashes.

MCQ 3

Where is the most common place to declare global CSS variables?

A. In a <style> inside <head>
B. On the :root selector
C. On every element
D. In JavaScript only

Answer: B
B is correct. :root is the document root with class-level specificity. Variables defined there are global and harder to accidentally override.

MCQ 4

What is the purpose of the second argument in var(--name, fallback)?

A. It overrides the variable
B. It is a fallback used when --name is not defined
C. It sets the variable
D. It is ignored

Answer: B
B is correct. The fallback is used when the custom property is not defined in the current scope. It makes components resilient to being dropped into projects that do not define your variables.

MCQ 5

What does document.documentElement.style.setProperty('--bg', 'black') do?

A. Logs the variable value
B. Reads the variable
C. Sets the --bg variable on <html> to 'black'
D. Creates a new CSS file

Answer: C
C is correct. setProperty writes a custom property as an inline style on the target element. Writing it on <html> makes it visible document-wide.

MCQ 6

Can CSS variables hold values other than colors?

A. No, only colors
B. Only colors and numbers
C. Only colors and strings
D. Yes - any valid CSS value including gradients, shadows, and lists

Answer: D
D is correct. Variables can hold any CSS value: colors, sizes, gradients, shadows, transforms, even multi-value shorthands.

MCQ 7

What is the main advantage of CSS variables over Sass variables?

A. They are shorter to type
B. They can be changed at runtime in the browser
C. They work in older browsers
D. They are faster to compile

Answer: B
B is correct. CSS variables are live in the browser — they can be changed by JavaScript, by class toggles, by media queries. Sass variables are compiled away before the browser sees the CSS.

MCQ 8

Which of these is a valid CSS variable name?

A. --main-color
B. -main-color
C. $main-color
D. main-color

Answer: A
A is correct. Custom properties must begin with exactly two dashes. Single dash, dollar sign, or no prefix are all invalid.

MCQ 9

How do variables cascade through the DOM?

A. They do not cascade
B. They inherit from parent to child elements just like normal CSS
C. They only work on the element they are defined on
D. They only inherit upward

Answer: B
B is correct. Variables follow normal CSS inheritance. A variable defined on a parent is available to all descendants, and closer definitions override farther ones.

MCQ 10

What is the cleanest way to build a dark mode toggle?

A. Duplicate every style rule for dark mode
B. Define colors as variables on :root, override them in a .dark class, and toggle the class on body
C. Use !important everywhere
D. Rewrite CSS in JavaScript

Answer: B
B is correct. Variables eliminate the need to duplicate rules. Override the color variables inside .dark and toggle the class on body. Every element that uses var() flips automatically.

MCQ 11

Why should you call .trim() after getPropertyValue?

A. To convert to lowercase
B. To remove leading/trailing whitespace that is often present
C. To parse as a number
D. It is not needed

Answer: B
B is correct. getPropertyValue returns the value with any whitespace that was in the original declaration, typically a leading space. String comparisons fail without .trim().

MCQ 12

What media query lets you respond to the OS dark mode setting?

A. @media (theme: dark)
B. @media (prefers-color-scheme: dark)
C. @media (dark-mode: on)
D. @media (darkness: true)

Answer: B
B is correct. prefers-color-scheme reflects the user's OS-level preference. Values are light, dark, and no-preference.

MCQ 13

What is a design token?

A. A JavaScript API key
B. A named value representing a design decision (color, spacing, etc.)
C. A login credential
D. A Figma file

Answer: B
B is correct. Design tokens are named design decisions — like color.primary or spacing.md. CSS variables are the browser-native way to implement them.

MCQ 14

Why might you define variables on a component (e.g., .card) instead of :root?

A. To allow per-component theming and variants without rewriting rules
B. It is required by CSS
C. It is faster
D. Global variables do not work

Answer: A
A is correct. Component-scoped variables expose a theming API. Variants like .card.danger just override the relevant variables, so you do not have to rewrite every selector for each variant.

MCQ 15

How do you attach a unit to a unitless variable?

A. var(--size)px
B. calc(var(--size) * 1px)
C. px + var(--size)
D. var(--size, px)

Answer: B
B is correct. Multiplying a unitless value by 1px inside calc() produces a length. Direct concatenation like var(--size)px is not valid CSS.

MCQ 16

Why might transitions on a CSS variable not animate?

A. Transitions never work with variables
B. Without @property, the browser does not know the variable's type and cannot interpolate
C. Only keyframes work with variables
D. You must use JavaScript

Answer: B
B is correct. Plain custom properties have no type. The @property at-rule registers a type (like <length> or <color>), which enables interpolation and animation.

MCQ 17

What does this declaration do?
@property --accent { syntax: '<color>'; initial-value: #a855f7; inherits: true; }

A. Nothing - it is invalid
B. Registers --accent as a typed custom property so it can be animated and validated
C. Creates a new HTML attribute
D. Imports a CSS file

Answer: B
B is correct. @property (registered custom properties) declares the variable's type, initial value, and inheritance. This unlocks smooth transitions and animations on custom properties.

MCQ 18

Which is the cleanest way to support multiple themes (light, dark, sepia)?

A. Write three separate stylesheets
B. Use [data-theme='dark'] and [data-theme='sepia'] selectors that override variables on :root, and toggle data-theme in JS
C. Use !important everywhere
D. Inline styles on every element

Zero hardcoded values for color, spacing, font-size, radius, or shadow. Everything is a variable.

<!DOCTYPE html>
<html>
<head>
<style>
  :root {
    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
    --t-sm: 13px; --t-md: 16px; --t-lg: 20px; --t-xl: 28px; --t-2xl: 44px;
    --r-sm: 8px; --r-md: 14px; --r-lg: 22px;
    --sh-sm: 0 1px 3px rgba(0,0,0,0.08); --sh-md: 0 6px 18px rgba(0,0,0,0.1); --sh-lg: 0 20px 50px rgba(0,0,0,0.18);
    --bg: #fafaf9; --card: #ffffff; --text: #0f172a; --muted: #64748b; --brand: #7c3aed; --brand-2: #ec4899; --border: #e2e8f0;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); }
  .nav { display: flex; justify-content: space-between; align-items: center; padding: var(--s-4) var(--s-6); background: var(--card); border-bottom: 1px solid var(--border); box-shadow: var(--sh-sm); }
  .nav .brand { font-weight: 800; color: var(--brand); font-size: var(--t-lg); }
  .nav a { margin-left: var(--s-5); text-decoration: none; color: var(--muted); font-size: var(--t-md); }
  .nav a:hover { color: var(--brand); }
  .hero { text-align: center; padding: var(--s-8) var(--s-5); }
  .hero h1 { font-size: var(--t-2xl); background: linear-gradient(135deg, var(--brand), var(--brand-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: var(--s-4); line-height: 1.1; }
  .hero p { font-size: var(--t-lg); color: var(--muted); max-width: 640px; margin: 0 auto var(--s-6); line-height: 1.5; }
  .cta { display: inline-block; padding: var(--s-3) var(--s-6); background: var(--brand); color: white; border-radius: var(--r-md); font-weight: 700; font-size: var(--t-md); text-decoration: none; box-shadow: var(--sh-md); }
  .features { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); max-width: 1100px; margin: 0 auto; padding: 0 var(--s-5) var(--s-8); }
  .feature { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-6); box-shadow: var(--sh-sm); }
  .feature h3 { color: var(--brand); font-size: var(--t-lg); margin-bottom: var(--s-2); }
  .feature p { color: var(--muted); font-size: var(--t-sm); line-height: 1.6; }
</style>
</head>
<body>
  <nav class="nav">
    <div class="brand">Ishaan's Studio</div>
    <div>
      <a href="#">Work</a>
      <a href="#">Blog</a>
      <a href="#">Contact</a>
    </div>
  </nav>
  <section class="hero">
    <h1>Design Systems for Ages 10 to 99</h1>
    <p>Every pixel on this page comes from a CSS variable. Change six tokens at the top and the entire landing page gets a new personality.</p>
    <a href="#" class="cta">Explore the System</a>
  </section>
  <div class="features">
    <div class="feature"><h3>Token Driven</h3><p>Spacing, type, radius, shadow, and color all live in one place.</p></div>
    <div class="feature"><h3>Zero Rewrites</h3><p>Retheming is a one-line change, not a weekend refactor.</p></div>
    <div class="feature"><h3>Dark Mode Ready</h3><p>Add a dark class and redefine variables. Done in minutes.</p></div>
  </div>
</body>
</html>

Need to Review the Concepts?

Go back to the detailed notes for this chapter.

Read Chapter Notes

Want to learn web development with a live mentor?

Explore our Frontend Masterclass