Color themes in Power BI - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply a custom color theme in Power BI.

Power BI

{
  "name": "Custom Theme",
  "dataColors": [[1]]
}

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

A"#123456", "#654321", "#abcdef"

B"#01B8AA", "#374649", "#FD625E"

C"red", "green", "blue"

D"#000000", "#FFFFFF", "#888888"

Attempts:

3 left

💡 Hint

Common Mistakes

Using color names instead of hex codes.

Not enclosing colors in quotes.

Missing commas between colors.

The dataColors property requires an array of hex color codes as strings to define the theme colors.

2fill in blank

medium

Complete the JSON snippet to set the background color of the report page.

Power BI

{
  "name": "Background Theme",
  "background": [1]
}

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

A"white"

Bwhite

C"#FFFFFF"

D#FFFFFF

Attempts:

3 left

💡 Hint

Common Mistakes

Using unquoted color names like white.

Using raw hex codes without quotes.

The background property expects a string with a hex color code in quotes.

3fill in blank

hard

Fix the error in the JSON theme snippet to correctly set the font color.

Power BI

{
  "name": "Font Theme",
  "textClasses": {
    "title": {
      "color": [1]
    }
  }
}

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

A"#333333"

B#333333

C333333

D"333333"

Attempts:

3 left

💡 Hint

Common Mistakes

Missing quotes around the hex code.

Using the hex code without the # symbol.

The color property must be a string with the hex code in quotes.

4fill in blank

hard

Fill both blanks to define a theme with a primary color and a secondary color.

Power BI

{
  "name": "Two Color Theme",
  "dataColors": [[1], [2]]
}

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

A"#FF5733"

B"#33FF57"

C"#3357FF"

D"#F0F0F0"

Attempts:

3 left

💡 Hint

Common Mistakes

Using color names instead of hex codes.

Using the same color twice.

The dataColors array holds the colors used in visuals. Here, the first color is primary and the second is secondary.

5fill in blank

hard

Fill all three blanks to create a theme with background, foreground, and table accent colors.

Power BI

{
  "name": "Full Theme",
  "background": [1],
  "foreground": [2],
  "tableAccent": [3]
}

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

A"#FFFFFF"

B"#000000"

C"#0078D7"

D"#FF0000"

Attempts:

3 left

💡 Hint

Common Mistakes

Not using quotes around color codes.

Mixing color names with hex codes.

The background, foreground, and tableAccent properties each require a hex color code string.

Practice

1. What is the main purpose of using color themes in Power BI reports?

easy

A. To add animations to visuals

B. To create new data tables automatically

C. To keep report colors consistent and professional

D. To change the report layout structure

Solution

1. Step 1: Understand the role of color themes

   Color themes define a set of colors used consistently across a report.

2. Step 2: Identify the main benefit

   Using color themes ensures visuals look professional and consistent.

3. Final Answer:

   To keep report colors consistent and professional -> Option C

4. Quick Check:

   Color themes = Consistent colors [OK]

Hint: Color themes unify colors across visuals [OK]

Common Mistakes:

• Confusing color themes with animations
• Thinking color themes create data
• Assuming color themes change layout

2. Which file format is used to define a custom color theme in Power BI?

easy

A. .json

B. .xlsx

C. .csv

D. .xml

Solution

1. Step 1: Recall the file format for themes

   Power BI uses JSON files to define color themes with hex codes.

2. Step 2: Match the correct file extension

   JSON files have the extension .json.

3. Final Answer:

   .json -> Option A

4. Quick Check:

   Color themes = JSON files [OK]

Hint: Themes use JSON files with hex colors [OK]

Common Mistakes:

• Choosing XML instead of JSON
• Confusing CSV or Excel files for themes
• Not knowing file extensions

3. Given a Power BI report with a custom color theme applied, what happens when you change the theme JSON file and reapply it?

medium

A. The report layout resets to default

B. Only the background color changes, other colors stay the same

C. The data model refreshes automatically

D. All visuals update their colors according to the new theme

Solution

1. Step 1: Understand theme application effect

   Applying a theme updates all visuals' colors based on the theme's color definitions.

2. Step 2: Identify what changes on reapplying theme

   Changing the JSON and reapplying updates all colors, not just background.

3. Final Answer:

   All visuals update their colors according to the new theme -> Option D

4. Quick Check:

   Reapplying theme = Update all colors [OK]

Hint: Reapplying theme updates all visual colors [OK]

Common Mistakes:

• Thinking only background changes
• Assuming data refresh happens
• Believing layout resets

4. You tried to apply a custom color theme JSON file but Power BI shows an error. What is the most likely cause?

medium

A. The report has too many visuals

B. The JSON file has invalid syntax or missing commas

C. The data source is offline

D. The theme file is saved as .csv instead of .json

Solution

1. Step 1: Identify common JSON errors

   Invalid JSON syntax like missing commas or brackets causes errors when applying themes.

2. Step 2: Exclude unrelated causes

   Number of visuals or data source status does not affect theme application; file extension matters but is less common error than syntax.

3. Final Answer:

   The JSON file has invalid syntax or missing commas -> Option B

4. Quick Check:

   JSON syntax errors cause theme load failure [OK]

Hint: Check JSON syntax carefully for commas and brackets [OK]

Common Mistakes:

• Blaming data source or visuals count
• Ignoring JSON syntax errors
• Using wrong file extension

5. You want to create a color theme JSON file that defines three colors: primary (#1A73E8), secondary (#E37400), and background (#F5F5F5). Which JSON snippet correctly defines these colors for Power BI?

hard

A. {
"name": "CustomTheme",
"dataColors": ["#1A73E8", "#E37400"],
"background": "#F5F5F5",
"visualStyles": {}
}

B. {
"themeName": "CustomTheme",
"colors": {"primary": "#1A73E8", "secondary": "#E37400", "background": "#F5F5F5"}
}

C. {
"name": "CustomTheme",
"dataColors": ["#1A73E8", "#E37400"]
"background": "#F5F5F5"
}

D. {
"name": "CustomTheme",
"dataColors": ["#1A73E8", "#E37400"],
"backgroundColor": "#F5F5F5"
}

Solution

1. Step 1: Check required keys for Power BI theme

   Power BI themes use name, dataColors for main colors, and background for background color.

2. Step 2: Validate JSON keys and structure

   { "name": "CustomTheme", "dataColors": ["#1A73E8", "#E37400"], "background": "#F5F5F5", "visualStyles": {} } correctly uses name, dataColors array, and background key. It also includes visualStyles which is optional but valid.

3. Final Answer:

   { "name": "CustomTheme", "dataColors": ["#1A73E8", "#E37400"], "background": "#F5F5F5", "visualStyles": {} } -> Option A

4. Quick Check:

   Correct keys and hex colors = { "name": "CustomTheme", "dataColors": ["#1A73E8", "#E37400"], "background": "#F5F5F5", "visualStyles": {} } [OK]

Hint: Use 'name', 'dataColors', and 'background' keys in JSON [OK]

Common Mistakes:

• Using wrong key names like 'colors' or 'backgroundColor'
• Missing required keys like 'dataColors'
• Incorrect JSON structure or missing commas