Classic Quiz Widget - Advanced Color Customization for Standard Template

Advanced Color Customization Through Theme Options

The Color Schemes theme option provides granular control over every color in your Classic Quiz widget's Standard template. Unlike the Portal's Branding Colors which offer five main color controls, Color Schemes allow you to customize specific UI states, text variants, surface backgrounds, and semantic colors for precise brand alignment. Color Schemes support both light and dark modes, each with their own complete set of color properties.

📖 Article Structure

This guide is organized into several sections to help you understand and configure Color Schemes effectively:

1. ⚙️ How Do I Access and Configure Color Schemes? - Step-by-step instructions for accessing Color Schemes in Storybook
2. 📋 What Do Color Schemes Control in Standard Template Quizzes? - Overview of the color property structure and organization
3. Light Mode Color Schemes - Detailed explanations of each color property with visual examples for light mode Standard Quizzes
4. Dark Mode Color Schemes - Detailed explanations of each color property with visual examples for dark mode Standard Quizzes

⚙️ How Do I Access and Configure Color Schemes?

Currently, Color Schemes can be configured through our Storybook interface. In the future, these settings will be available directly in the Management Portal, and this guide will be updated to reflect that change.

Steps to Access Color Schemes in Our Storybook:

1. Open Storybook - Navigate to our Widgets Storybook
2. Select ClassicQuizPlay - In the left sidebar under "COMPONENTS", click on "ClassicQuizPlay"
3. Choose a Quiz Story - From the list of quiz stories, select either:
   1. "Client Classic Quiz (Live Data)" - If you want to test with real, live data from your quiz
   2. Any other hardcoded story - If you want to experiment and play around with the settings using pre-defined quiz data (no API credentials needed - just jump in and start customizing!)
4. View the Controls Panel - At the bottom of the screen, you'll see the "Controls" tab with various options
5. Expand themeOptions - Find and click on "themeOptions" to expand the advanced theme options
6. Open colorSchemes - Click on "colorSchemes" to expand it, then open either "light" or "dark" depending on which mode you want to customize
7. Customize Your Colors - You'll see all available color properties. Click on any color to modify it by entering the hex values directly
8. Preview Changes Live - Your color changes appear instantly in the quiz preview above

💡 New to Storybook stories? Learn more about the Classic Quiz Storybook stories and how to use them in our Introduction to Classic Quiz Storybook guide.

📖 What Do Color Schemes Control in Standard Template Quizzes?

Color Schemes use a structured system organized under colorSchemes for light and dark modes. Within each mode (light/dark), colors are divided into two groups:

Palette Colors (Semantic) - Located inside the palette object:

• success - Colors for success-related states
• danger - Colors for error and danger-related states
• primary - Colors for primary interactive elements
• warning - Colors for warning and caution states

Direct Color Properties - Located under the palette object:

• Text colors (textPrimary, textSecondary, textColor, textDisabled)
• Surface colors (surface, onSurface, surfaceVariant, surfaceTintDim, surfaceInverse)
• Border colors (outlineEnabledBorder)
• Container colors (secondaryContainer)

The Standard template uses a card-based layout where these colors create visual hierarchy and guide user attention through questions, answers, and results. This granular color control is ideal for precise brand alignment and ensuring your quiz perfectly matches your brand identity.

🎨 Light Mode Color Schemes

Below, we'll show you what each color controls in the Light Mode, including the default color values and how to configure them.

Palette Colors (Semantic)

These colors are located inside the palette object and provide semantic meaning for different UI states.

🟢 success (Palette): What Does It Control? How Do I Set It?

(Default values: plainColor: #4CAF50, outlinedBorder: #4CAF50)

The success palette colors control all success-related states, primarily used for correct answer feedback and progress indication.

It affects:

• Correct answer highlight - When a user selects the correct answer and clicks "Next Question", the correct option briefly highlights in this color before moving to the next question
• Progress bar - correct answer segments - The progress bar segments that represent questions answered correctly are displayed in green
• Final score display (when score > 0) - The score text (e.g., "5/5", "3/5") on the results screen when the user has at least one correct answer
• "Your answer" text in Answers view - The green "Your answer:" label and answer text when viewing the answers tab for correctly answered questions

Available properties:

• plainColor - Background/fill color for success elements (correct answer highlights, progress bar segment fill) and text color for score/correct answer displays
• outlinedBorder - Border/outline color for success elements (progress bar segment borders)

How to set it: Set your desired color values within the success palette object. You can customize both the fill color (plainColor) and border color (outlinedBorder) for all success-related elements.

To make it even clearer which UI elements the success palette controls, we've included screenshots below using custom testing colors instead of the default green.

Important: If you choose to change the default success colors, we strongly recommend using green or other colors widely accepted as "success" indicators (such as shades of green, teal, or blue-green). The custom colors shown in these examples (orange, light green) are used purely for demonstration purposes to clearly highlight which UI elements are affected by each property.

Testing with custom success colors - plainColor (#FFA500 orange) for correct answer highlights and correct answer progress bar segments fill, and outlinedBorder (light green) for correct answer progress bar segment borders

🔴 danger (Palette): What Does It Control? How Do I Set It?

(Default values: softBg: #FEE4E2, plainColor: #F44336, outlinedBorder: #F44336)

The danger palette colors control all error and danger-related states, including incorrect answer feedback and low score displays.

It affects:

• Incorrect answer highlight - When a user selects an incorrect answer and clicks "Next Question", the incorrect option briefly highlights in red before moving to the next question
• Progress bar - incorrect answer segments (fill) - The fill color of progress bar segments that represent questions answered incorrectly
• Progress bar - incorrect answer segments (border) - The border/outline color of progress bar segments for incorrectly answered questions
• Final score display (when score = 0) - The score text "0/5" on the results screen when the user has no correct answers
• "Your answer" text in Answers view (incorrect) - The red "Your answer:" label and answer text when viewing incorrect answers in the answers tab

Available properties:

• softBg - Soft background color for danger states
• plainColor - Primary color for danger elements (incorrect answer highlights, progress bar segment fill, score text, answer text)
• outlinedBorder - Border/outline color for danger elements (progress bar segment borders)

How to set it: Set your desired color values within the danger palette object. You can customize the soft background, fill color, and border color for all danger-related elements.

1) Incorrect answer highlighted in red after clicking "Next Question" & 2) Progress bar showing red fill for incorrectly answered questions

Results screen showing "0/5" score in danger color

Answers tab showing the incorrect answer in red

🔵 primary (Palette): What Does It Control? How Do I Set It?

The primary palette colors control main interactive elements and action buttons throughout your quiz.

It affects:

• Next Question button background - The background fill color of the "Next Question" button
• Next Question button text - The text color displayed on the "Next Question" button
• Share Result button background - The background fill color of the "Share Result" button on the results screen
• Share Result button text - The text color displayed on the "Share Result" button
• Progress bar - current question segment (fill) - The fill color of the active progress bar segment indicating the current question
• Progress bar - current question segment (border) - The border/outline color of the active progress bar segment
• Selected answer option background - The background color when an answer option is selected
• Selected answer option text - The text color of the selected answer option

Available properties:

• plainColor - Background color for primary interactive elements (buttons, selected options, active progress bar segments)
• outlinedBorder - Border/outline color for  the active progress bar segment
• onPrimary - Text color displayed on primary-colored backgrounds (button text, options text)
• primaryContainer - -----

How to set it: Set your desired color values within the primary palette object. You can customize the background color (plainColor), border color (outlinedBorder), text color (onPrimary), and container color (primaryContainer) for all primary interactive elements.

'Next Question' button and selected answer option with primary palette colors - plainColor (#1A77D2) for backgrounds, onPrimary (#FAFAFA) for text, outlinedBorder (#1A77D2) for progress segment border

Share Result button with primary palette colors - plainColor for background (#1A77D2), onPrimary for text onPrimary (#FAFAFA)

To help visualize what each color property controls, the examples below show the primary palette configured with distinct custom colors:

• plainColor (#FFA500 orange) - 'Next Question' & 'Share Result' buttons background, selected answer option background and current progress bar question segment (fill)
• onPrimary (#FF0000 red) - 'Next Question' & 'Share Result' Buttons text and selected answer option text
• outlinedBorder (#66ff00 green) - Progress segment border

Direct Color Properties

These color properties are located outside the palette object.

🖌️ textPrimary: What Does It Control? How Do I Set It?

(Default value: #212121)

The textPrimary color controls the main text content throughout your quiz, providing the primary text color for headings, questions, and other key textual elements. This color is prominent on the final results screen.

It affects:

• Final results screen - dynamic message text - The personalized message text that changes based on the user's performance (e.g., "Keep trying! You achieved:", "Well done! Would you like to improve your score?", "Great job! You achieved:")
• Final results screen - "Thank you for participating!" text - The thank you message displayed on the results page
• Play Again button text - The text color displayed on the "Play Again" button
• Answers tab underline - The active tab underline color when the "ANSWERS" tab is selected
• Answers tab question text - The question text displayed in the answers tab (e.g., "When was Dimitar Berbatov born?", "Which prestigious English club did Berbatov play for from 2008 to 2012?")
• Answers tab - explanation text - The question explanation text (e.g., "Dimitar Ivanov Berbatov was born on 30 January 1981 in Blagoevgrad to Ivan Berbatov and Margarita Berbatova")
• Answers tab - "Correct answer:" label - The "Correct answer:" text displayed when the user answered incorrectly

How to set it: Set your desired color value for the textPrimary property. This will update all primary text elements throughout your quiz to maintain consistent typography.

Final results screen with default textPrimary (#212121) - this color controls the Results tab underline, the dynamic message text "Well done! Would you like to improve your score?", and the "Thank you for participating!" text

Answers tab with default textPrimary (#212121) - controls the Answers tab underline, question text, "Correct answer:" label, and answer explanations text

Testing with custom textPrimary (#FFA500 orange) instead of default #212121 to clearly demonstrate which UI elements this color controls

🖌️ textSecondary: What Does It Control? How Do I Set It?

(Default value: #212121)

The textSecondary color controls secondary text elements throughout your quiz, providing a text color for supporting information and labels. This color is prominent on the final results and answers screens.

It affects:

• Results tab label - The "RESULTS" text label at the top of the results screen
• Answers tab label - The "ANSWERS" text label at the top of the answers view
• Question number labels - The "QUESTION 1", "QUESTION 2" labels in the answers tab

How to set it: Set your desired color value for the textSecondary property. This will update all secondary text elements throughout your quiz to maintain consistent typography.

Final results screen with default textSecondary (#212121) - this color controls the "RESULTS" and "ANSWERS" tab labels

Answers screen with default textSecondary (#212121) - controls the "RESULTS" and "ANSWERS" tab labels and question number labels (QUESTION 1, QUESTION 2, QUESTION 3)

Testing with custom textSecondary (#FFA500 orange) instead of the default #212121 to clearly demonstrate which UI elements this color controls

🖌️ textColor: What Does It Control? How Do I Set It?

(Default value: #212121)

The textColor controls general text throughout your quiz, including the small 'QUIZ' label, the quiz title, question text, and answer options text.

It affects:

• Quiz label - The small "QUIZ" label text displayed at the top of the quiz
• Quiz title - The primary title text of your quiz (e.g., "Bulgarian Football Legends: How Well Do You Know Dimitar Berbatov?")
• Question text - The main question text displayed to users (e.g., "When was Dimitar Berbatov born?", "When was Arthur Elias born?")
• Answer option text - The text displayed in answer options (e.g., "30 January 1971", "5 August 1975")

How to set it: Set your desired color value for the textColor property. This will update all abovementioned text elements throughout your quiz to maintain consistent typography.

Default textColor (#212121) - controls the "QUIZ" label, the quiz title "Bulgarian Football Legends: How Well Do You Know Dimitar Berbatov?", the question text "When was Dimitar Berbatov born?", and all answer options text

Testing with custom textColor (#f72819 red) instead of default #212121 to clearly demonstrate which UI elements this color controls

🖌️ surface: What Does It Control? How Do I Set It?

(Default value: #FFFFFF)

The surface color controls the background color of major UI surfaces and containers throughout your quiz, including the main quiz card and results screen background.

It affects:

• Main quiz card background - The background color of the card containing the question and answer options
• Results screen background - The background surface of the final results screen
• Quiz container surfaces - All major surface areas that contain quiz content

How to set it: Set your desired color value for the surface property. This will update the background color of all major surfaces throughout your quiz to maintain visual consistency.

Results screen with default surface (#FFFFFF) - controls the results screen background surface

Testing with custom surface color (#FFA500 orange) instead of default #FFFFFF to clearly demonstrate which UI elements this color controls

🖌️ surfaceVariant: What Does It Control? How Do I Set It?

(Default value: #EEEEEE)

The surfaceVariant color controls secondary surface backgrounds throughout your quiz, providing subtle visual contrast for content areas within the main surfaces.

It affects:

• Question card background - The background color of the card area containing the question text and answer options
• Answer card backgrounds in Answers tab - The background color of individual question/answer cards displayed in the answers view

How to set it: Set your desired color value for the surfaceVariant property. This will update the secondary surface backgrounds throughout your quiz to create visual hierarchy and separation between content areas.

Quiz screen with default surfaceVariant (#EEEEEE) - which controls the color of the question card background

Answers screen with default surfaceVariant (#EEEEEE) - which controls the individual question/answer card backgrounds

Testing with custom surfaceVariant (#FFA500 orange) instead of default #EEEEEE to clearly demonstrate which UI elements this color controls

🖌️ outlineEnabledBorder: What Does It Control? How Do I Set It?

(Default value: #E0E0E0)

The outlineEnabledBorder color controls the border color of unanswered progress bar segments throughout your quiz.

It affects:

• Progress bar - unanswered question segments (border) - The border/outline color of progress bar segments representing questions that have not yet been answered

How to set it: Set your desired color value for the outlineEnabledBorder property. This will update the border color of inactive progress bar segments.

Quiz screen with default outlineEnabledBorder (#E0E0E0) - controls the border color of unanswered progress bar segments

Testing with custom outlineEnabledBorder (#FFA500 orange) instead of default #E0E0E0 to clearly demonstrate which UI elements this color controls

🖌️ secondaryContainer: What Does It Control? How Do I Set It?

(Default value: #BDBDBD)

The secondaryContainer color controls the fill color of unanswered progress bar segments and the border of the entire quiz widget.

It affects:

• Quiz widget border - The border color around the entire quiz container
• Progress bar - unanswered question segments (fill) - The background fill color of progress bar segments representing questions that have not yet been answered

How to set it: Set your desired color value for the secondaryContainer property. This will update both the quiz widget border and the fill color of inactive progress bar segments.

Quiz screen with default secondaryContainer (#BDBDBD) - controls the quiz widget border and fill color of unanswered progress bar segments

Testing with custom secondaryContainer (#FFA500 orange) instead of default #BDBDBD to clearly demonstrate which UI elements this color controls

🎨 Dark Mode Color Schemes

Below, we'll show you what each color controls in the Dark Mode, including the default color values and how to configure them.

Palette Colors (Semantic)

These colors are located inside the palette object and provide semantic meaning for different UI states.

🟢 success (Palette): What Does It Control? How Do I Set It?

(Default values: plainColor: #4CAF50, outlinedBorder: #4CAF50)

The success palette colors control all success-related states in dark mode, primarily used for correct answer feedback.

It affects:

• Correct answer highlight (when user selects correctly) - When a user selects the correct answer and clicks "Next Question", the correct option briefly highlights in this color before moving to the next question
• Correct answer highlight (when user selects incorrectly) - When a user selects an incorrect answer and clicks "Next Question", the correct answer briefly highlights in this color to show the user what the correct answer was
• "Your answer" text in Answers view (correct) - The green "Your answer:" label and answer text when viewing the answers tab for correctly answered questions

Available properties:

• plainColor - Background/fill color for success elements (correct answer highlights) and text color for correct answer displays
• outlinedBorder - Border/outline color for success elements (progress bar segment borders)

How to set it: Set your desired color values within the success palette object in colorSchemes.dark. You can customize both the fill color (plainColor) and border color (outlinedBorder) for all success-related elements.

Dark mode quiz showing correct answer highlight - when user selects the correct answer "Manchester United", it briefly highlights in success plainColor (#4CAF50) before moving to the next question

Dark mode quiz showing correct answer highlight - when user selects an incorrect answer, the correct answer "Once" briefly highlights in success plainColor (#4CAF50) before moving to the next question

Dark mode answers screen with default success palette colors - plainColor (#4CAF50) controls the "Your answer:" label text color for correctly answered questions (Question 1 and Question 2)

Testing with custom success plainColor (#FFA500 orange) - shows the correct answer options highlighting in the custom color. Note: We recommend using green or another widely accepted "success" color; orange is used here only to clearly demonstrate which UI elements this property controls

🔴 danger (Palette): What Does It Control? How Do I Set It?

(Default values: softBg: #FEE4E2, plainColor: #F44336, outlinedBorder: #F44336)

🔵 primary (Palette): What Does It Control? How Do I Set It?

(Default values: plainColor: #1A77D2, outlinedBorder: #1A77D2, onPrimary: #FAFAFA, primaryContainer: #2397F3)

The primary palette colors control main interactive elements and action buttons throughout your quiz in dark mode.

It affects:

• Next Question button background - The background fill color of the "Next Question" button
• Next Question button text - The text color displayed on the "Next Question" button
• Selected answer option background - The background color when an answer option is selected
• Selected answer option text - The text color of the selected answer option
• Share Result button background - The background fill color of the "Share Result" button on the results screen
• Share Result button text - The text color displayed on the "Share Result" button
• Progress bar - current question segment (fill) - The fill color of the active progress bar segment indicating the current question
• Progress bar - current question segment (border) - The border/outline color of the active progress bar segment

Available properties:

• plainColor - Background color for primary interactive elements (buttons, selected options, active progress bar segments)
• outlinedBorder - Border/outline color for  the active progress bar segment
• onPrimary - Text color displayed on primary-colored backgrounds (button text, options text)

How to set it: Set your desired color values within the primary palette object in colorSchemes.dark. You can customize the background color (plainColor), border color (outlinedBorder), text color (onPrimary), and container color (primaryContainer) for all primary interactive elements.

Dark mode with default primary palette colors - plainColor (#1A77D2) for backgrounds, onPrimary (#FAFAFA) for text

Dark mode results screen with default primary palette colors - plainColor (#1A77D2) for Share Result button background

Testing with custom primary palette colors - plainColor (#FFA500 orange) for selected answer option background, Next Question button background and current progress bar question segment (fill), onPrimary (#FF0000 red) for selected answer option text and 'Next Question' & 'Share Result' buttons text, outlinedBorder (#66ff00 green) - Progress segment border

Testing with custom primary palette colors on results screen - plainColor (#FFA500 orange) for Share Result button background and Play Again button border, onPrimary (#FF0000 red) for 'Share Results' button text

Direct Color Properties

These color properties are located outside the palette object.

🖌️ textPrimary: What Does It Control? How Do I Set It?

(Default value: #FAFAFA)

The textPrimary color controls the main text content on the final results and answers screens in dark mode, providing the primary text color for key textual elements displayed after quiz completion.

It affects:

• Final results screen - dynamic message text - The personalized message text that changes based on the user's performance (e.g., "Great job! You achieved:", "Well done! Would you like to improve your score?")
• Final results screen - "Thank you for participating!" text - The thank you message displayed on the results page
• Play Again button text - The text color displayed on the "Play Again" button
• Answers tab underline - The active tab underline color when the "ANSWERS" tab is selected
• Answers tab question text - The question text displayed in the answers tab (e.g., "When was Dimitar Berbatov born?", "Which prestigious English club did Berbatov play for from 2008 to 2012?")
• Answers tab - explanation text - The question explanation text (e.g., "Dimitar Ivanov Berbatov was born on 30 January 1981 in Blagoevgrad to Ivan Berbatov and Margarita Berbatova")
• Answers tab - "Correct answer:" label - The "Correct answer:" text displayed when the user answered incorrectly

How to set it: Set your desired color value for the textPrimary property in colorSchemes.dark. This will update all primary text elements throughout your dark mode quiz to maintain consistent typography.

Dark mode results screen with default textPrimary (#FAFAFA) - controls the Results tab underline, dynamic message text "Great job! You achieved:", "Thank you for participating!" text, and Play Again button text

Dark mode answers screen with default textPrimary (#FAFAFA) - controls the Answers tab underline, question text "When was Dimitar Berbatov born?", "Correct answer:" label, and correct answer explanation text

Testing with custom textPrimary (#FFA500 orange) instead of default #FAFAFA to clearly demonstrate which UI elements this color controls

🖌️ textSecondary: What Does It Control? How Do I Set It?

(Default value: #FAFAFA)

The textSecondary color controls secondary text elements on the final results and answers screens in dark mode, providing a text color for supporting information and labels.

It affects:

• Results tab label - The "RESULTS" text label at the top of the results screen
• Answers tab label - The "ANSWERS" text label at the top of the answers view
• Question number labels - The "QUESTION 1", "QUESTION 2", "QUESTION 3" labels in the answers tab

How to set it: Set your desired color value for the textSecondary property in colorSchemes.dark. This will update all secondary text elements on the results and answers screens throughout your dark mode quiz.

Dark mode with default textSecondary (#FAFAFA) - controls the "RESULTS" and "ANSWERS" tab labels on both results and answers screens

Dark mode answers screen with default textSecondary (#FAFAFA) - controls the "RESULTS" and "ANSWERS" tab labels and question number labels (QUESTION 1, QUESTION 2, QUESTION 3)

Testing with custom textSecondary (#FFA500 orange) instead of default #FAFAFA to clearly demonstrate which UI elements this color controls

🖌️ textColor: What Does It Control? How Do I Set It?

(Default value: #FAFAFA)

The textColor controls general text throughout your quiz in dark mode, including the small 'QUIZ' label, the quiz title, the question text and answer options text.

It affects:

• Quiz label - The small "QUIZ" label text displayed at the top of the quiz
• Quiz title - The primary title text of your quiz (e.g., "Bulgarian Football Legends: How Well Do You Know Dimitar Berbatov?")
• Question text - The main question text displayed to users (e.g., "When was Dimitar Berbatov born?")
• Answer option text - The text displayed in answer options (e.g., "30 January 1981", "5 August 1975")

How to set it: Set your desired color value for the textColor property in colorSchemes.dark. This will update all general text elements throughout your dark mode quiz to maintain consistent typography.

Dark mode with default textColor (#FAFAFA) - controls the "QUIZ" label, quiz title "Bulgarian Football Legends: How Well Do You Know Dimitar Berbatov?", question text "When was Dimitar Berbatov born?" and Answer options text

Testing with custom textColor (#FFA500 orange) instead of default #FAFAFA to clearly demonstrate which UI elements this color controls

🖌️ surface: What Does It Control? How Do I Set It?

(Default value: #424242)

The surface color controls the background color of major UI surfaces and containers throughout your quiz in dark mode, including the main quiz card, results screen background, and answers screen background.

It affects:

• Main quiz card background - The background color of the card containing the question and answer options
• Results screen background - The background surface of the final results screen
• Answers screen background - The background surface of the answers screen

How to set it: Set your desired color value for the surface property in colorSchemes.dark. This will update the background color of all major surfaces throughout your dark mode quiz to maintain visual consistency.

Dark mode quiz screen with default surface (#424242) - controls the main quiz card background color

Dark mode results screen with default surface (#424242) - controls the results screen background surface

Testing with custom surface (#FFA500 orange) instead of default #424242 to clearly demonstrate which UI elements this color controls

🖌️ surfaceVariant: What Does It Control? How Do I Set It?

(Default value: #616161)

The surfaceVariant color controls secondary surface backgrounds throughout your quiz in dark mode, providing subtle visual contrast for content areas within the main surfaces.

It affects:

• Question card background - The background color of the card area containing the question text and answer options
• Answer card backgrounds in Answers tab - The background color of individual question/answer cards displayed in the answers view

How to set it: Set your desired color value for the surfaceVariant property in colorSchemes.dark. This will update the secondary surface backgrounds throughout your dark mode quiz to create visual hierarchy and separation between content areas.

Dark mode quiz screen with default surfaceVariant (#616161) - controls the question card background

Dark mode answers screen with default surfaceVariant (#616161) - controls the individual question/answer card backgrounds

Testing with custom surfaceVariant (#FFA500 orange) instead of default #616161 to clearly demonstrate which UI elements this color controls

🖌️ outlineEnabledBorder: What Does It Control? How Do I Set It?

(Default value: #757575)

The outlineEnabledBorder color controls the border color of unanswered progress bar segments throughout your quiz in dark mode.

It affects:

• Progress bar - unanswered question segments (border) - The border/outline color of progress bar segments representing questions that have not yet been answered

How to set it: Set your desired color value for the outlineEnabledBorder property in colorSchemes.dark. This will update the border color of inactive progress bar segments.

Dark mode quiz screen with default outlineEnabledBorder (#757575) - controls the border color of unanswered progress bar segments

Testing with custom outlineEnabledBorder (#FFA500 orange) instead of default #757575 to clearly demonstrate which UI elements this color controls

🖌️ secondaryContainer: What Does It Control? How Do I Set It?

(Default value: #757575)

The secondaryContainer color controls the fill color of unanswered progress bar segments and the border of the entire quiz widget.

It affects:

• Quiz widget border - The border color around the entire quiz container
• Progress bar - unanswered question segments (fill) - The background fill color of progress bar segments representing questions that have not yet been answered

How to set it: Set your desired color value for the secondaryContainer property in colorSchemes.dark. This will update the quiz widget border color and the unanswered question segments (fill).

Dark mode quiz screen with default secondaryContainer (#757575) - controls the quiz widget border and the background fill color of progress bar segments representing questions that have not yet been answered

Testing with custom secondaryContainer (#FFA500 orange) instead of default #757575 to clearly demonstrate which UI elements this color controls

📖 Important Notes

Color Format: All color values must be provided in correct hex format (e.g., "#1A77D2").

Palette vs. Direct Properties: Remember that success, danger, primary, and warning are inside the palette object, while all other colors (text, surface, etc.) are direct properties outside the palette.

Template-Specific Behavior: These color properties are specific to the Standard template. The same properties may control different UI elements in Split and Overlay templates.

Portal Settings Priority: The Portal's Branding Colors take priority over Color Schemes theme options when both are configured. If you have set colors in the Portal's Branding section, those will override the Color Schemes settings.

 

💡 You can Learn more about the Portal Branding Colors here:

• Branding Colors for Standard Template
• Branding Colors for Split Template
• Branding Colors for Overlay Template

Further Reading

📚 Widget FAQs

• Classic Quiz Widget FAQs
• Poll Widget FAQs

📚 Main Widget Documentation

• Classic Quiz Widget
• Polls Widget
• Personality Quiz Widget