Theme implementation basics in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a CSS variable for the primary color.

CSS

:root { --primary-color: [1]; }

Drag options to blanks, or click blank then click option'

A#3498db

Bprimary-color

Ccolor-primary

Dblue

Attempts:

3 left

💡 Hint

Common Mistakes

Using the variable name as the value instead of a color code.

Using a color name without quotes or hash (#).

CSS variables are defined with a name starting with two dashes and assigned a value like a color code. Here, '#3498db' is a valid color value.

2fill in blank

medium

Complete the code to apply the primary color variable to the background of the body.

CSS

body { background-color: var([1]); }

Drag options to blanks, or click blank then click option'

A--primary-color

B--background-color

Cprimary-color

Dbackground-color

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the dashes in the variable name.

Using the variable name without var().

To use a CSS variable, you write var(--variable-name). Here, '--primary-color' is the variable defined earlier.

3fill in blank

hard

Fix the error in the CSS code to correctly define a dark theme background color variable.

CSS

@media (prefers-color-scheme: dark) { :root { --background-color: [1]; } }

Drag options to blanks, or click blank then click option'

Ablack

Bdark

C#000000

Dbackground-color

Attempts:

3 left

💡 Hint

Common Mistakes

Using invalid color names like 'dark'.

Using the variable name as the value.

Color values in CSS should be valid color codes or names. '#000000' is the correct hex code for black.

4fill in blank

hard

Fill both blanks to create a CSS rule that sets text color using a variable and applies a fallback color.

CSS

p { color: var([1], [2]); }

Drag options to blanks, or click blank then click option'

A--text-color

Bblack

Cwhite

D--background-color

Attempts:

3 left

💡 Hint

Common Mistakes

Using a color name as the variable name.

Omitting the fallback color.

The var() function can take a fallback color if the variable is not defined. Here, '--text-color' is the variable and 'black' is the fallback.

5fill in blank

hard

Fill all three blanks to create a CSS theme with variables for background, text color, and a hover effect color.

CSS

:root { --background: [1]; --text: [2]; --hover: [3]; }

Drag options to blanks, or click blank then click option'

A#ffffff

B#333333

C#555555

D#000000

Attempts:

3 left

💡 Hint

Common Mistakes

Using colors that do not contrast well.

Mixing up the order of colors.

Here, the background is white (#ffffff), text is dark gray (#333333), and hover color is medium gray (#555555). These create a clear, readable theme.

Practice

1. What is the main purpose of using CSS variables in theme implementation?

easy

A. To write JavaScript code inside CSS

B. To store colors and fonts for easy theme switching

C. To create animations automatically

D. To hide elements on the page

Solution

1. Step 1: Understand CSS variables role

   CSS variables hold values like colors and fonts that can be reused.

2. Step 2: Connect variables to theme switching

   Changing these variables changes the look without rewriting CSS rules.

3. Final Answer:

   To store colors and fonts for easy theme switching -> Option B

4. Quick Check:

   CSS variables = theme colors/fonts [OK]

Hint: CSS variables hold theme colors and fonts [OK]

Common Mistakes:

• Thinking CSS variables run JavaScript
• Confusing variables with animations
• Believing variables hide elements

2. Which CSS selector is commonly used to define global CSS variables for themes?

easy

A. :root

B. .theme

C. #variables

D. body

Solution

1. Step 1: Identify global scope selector

   The :root selector targets the top-level element for global variables.

2. Step 2: Confirm other options

   Classes or IDs are not global by default; body is less specific than :root.

3. Final Answer:

   :root -> Option A

4. Quick Check:

   Global CSS variables use :root [OK]

Hint: Use :root to define global CSS variables [OK]

Common Mistakes:

• Using class selectors for global variables
• Using body instead of :root
• Confusing ID selectors with variable scope

3. Given this CSS, what color will the text inside <div class='dark'> be?

:root { --text-color: black; } .dark { --text-color: white; } p { color: var(--text-color); }

<div class='dark'><p>Hello</p></div>

medium

A. Black

B. No color applied

C. Gray

D. White

Solution

1. Step 1: Check variable default value

   In :root, --text-color is black by default.

2. Step 2: Check override in .dark class

   The .dark class changes --text-color to white.

3. Step 3: Apply variable in paragraph

   The p inside .dark uses white color from overridden variable.

4. Final Answer:

   White -> Option D

5. Quick Check:

   Class override changes variable color [OK]

Hint: Class variables override :root variables inside that class [OK]

Common Mistakes:

• Ignoring class variable override
• Thinking default :root value always applies
• Confusing variable usage syntax

4. What is wrong with this CSS if the theme colors do not change?

:root { --bg-color: white; } .dark-theme { --bg-color: black; } body { background-color: var(bg-color); }

medium

A. Missing dashes in variable usage: should be var(--bg-color)

B. Wrong selector for .dark-theme class

C. Variables cannot be used in background-color

D. The :root selector is incorrect

Solution

1. Step 1: Check variable usage syntax

   CSS variables must be used with var(--variable-name), missing dashes cause errors.

2. Step 2: Confirm other parts are correct

   The selectors and variable definitions are correct; only usage syntax is wrong.

3. Final Answer:

   Missing dashes in variable usage: should be var(--bg-color) -> Option A

4. Quick Check:

   Use var(--variable) syntax correctly [OK]

Hint: Always use var(--variable-name) with double dashes [OK]

Common Mistakes:

• Writing var(bg-color) instead of var(--bg-color)
• Changing selectors unnecessarily
• Thinking variables can't be used in background-color

5. How can you implement a light/dark theme toggle using only CSS classes and variables?

Choose the best approach:

hard

A. Create separate CSS files for each theme and reload the page

B. Use JavaScript to rewrite all CSS rules on toggle

C. Define variables in :root and override them in .dark class, then toggle .dark on body

D. Use inline styles on every element to change colors

Solution

1. Step 1: Understand CSS variable override

   Defining variables in :root sets defaults; overriding in a class like .dark changes theme colors.

2. Step 2: Toggle class on body element

   Adding or removing .dark on body switches themes without reloading or inline styles.

3. Step 3: Evaluate other options

   JavaScript rewriting CSS or reloading files is less efficient; inline styles are hard to maintain.

4. Final Answer:

   Define variables in :root and override them in .dark class, then toggle .dark on body -> Option C

5. Quick Check:

   Toggle class with CSS variables for themes [OK]

Hint: Toggle a class on body to switch CSS variable themes [OK]

Common Mistakes:

• Reloading CSS files instead of toggling classes
• Using inline styles for theme colors
• Trying to rewrite CSS rules with JavaScript