Classic Quiz Widget - Advanced Color Customization for Split Template

Advanced Color Customization Through Theme Options

The Color Schemes theme option provides granular control over every color in your Classic Quiz widget's Split 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 Split 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 Split Quizzes
4. Dark Mode Color Schemes - Detailed explanations of each color property with visual examples for dark mode Split 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:
   • "Client Classic Quiz (Live Data)" - If you want to test with real, live data from your quiz
   • 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 Split 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 outside the palette object:

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

The Split template divides your content into distinct left and right panels, with the image always positioned on the left and quiz content (questions and answers) occupying the right half. These colors create visual hierarchy within the content panel 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 you can easily customize 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 success-related states and are primarily used for correct answer feedback.

These colors affect:

• 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
• 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) and text color for score/correct answer displays

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

Split template quiz showing selected correct answer "30 January 1981" highlighted in success plainColor

Results screen showing perfect score "5/5" displayed in success plainColor

Answers tab showing "Your answer:" labels and correct answers in success plainColor

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 color shown in these examples (orange) is used purely for demonstration purposes to clearly highlight which UI elements are affected by each color property.

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

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

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

These colors affect:

• 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
• 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 (for incorrect answers) - 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, score text (when score = 0), incorrect answers text)

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

Split template showing incorrect answer "30 January 1971" highlighted in danger plainColor (#F44336) and correct answer "30 January 1981" highlighted in success color

Results screen showing "0/5" score in danger plainColor (scores above 0 would display in success color instead)

Answers tab showing "Your answer:" labels and user's responses displayed in danger plainColor (#F44336) for incorrectly answered Questions 1 and 2 (correctly answered questions would show this label in success color instead)

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

Testing with custom danger plainColor (#FFA500 orange) instead of default #F44336 to clearly demonstrate which UI elements this color controls on the 'Answers' screen UI - the "Your answer:" labels for all incorrect responses

🔵 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.

These colors affect:

• 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
• 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)
• 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. You can customize the background color (plainColor), border color (outlinedBorder), text color (onPrimary), and container color (primaryContainer) for all primary interactive elements.

Split template showing selected answer option "30 January 1981" with primary plainColor (#1A77D2) for background and onPrimary (#FAFAFA) for text, plus "Next Question" button with the same color scheme

Results screen with "Share Result" button displaying primary plainColor (#1A77D2) for background and onPrimary (#FAFAFA) for button text

To help visualize even more clearly 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
• onPrimary (#FF0000 red) - 'Next Question' & 'Share Result' Buttons text and selected answer option 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: #212121)

The textPrimary color controls the main text content in the final screen of your quiz, providing the primary text color for headings, questions, and other key textual elements. This color is prominent on the 'Results' and 'Answers' screens.

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 "Great job! You achieved:", the "Thank you for participating!" text and the 'Play again' button 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 in the 'Answers' and 'Results' screens of 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

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 "quiz" label, quiz title, question counter, question text, and answer options text.

It affects:

• Quiz label - The small "QUIZ" label text displayed at the top of the left panel
• Quiz title - The primary title text of your quiz (e.g., "Bulgarian Football Legends: How Well Do You Know Dimitar Berbatov?")
• Question counter - The "1/5", "2/5", etc. indicator showing current question number
• 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 question counter "1/5", the question text "When was Dimitar Berbatov born?", and all unselected answer options text (selected answer option colors are controlled by primary palette). Also controls the 'Quiz' label and quiz title in the left quiz panel

Testing with custom textColor (#FFA500 orange) 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 in the right content panel of your Split template quiz, including the quiz content area and results screen background.

It affects:

• Quiz content panel background - The background color of the right panel containing questions and answer options
• Results screen background - The background surface of the final results screen in the right panel
• Quiz container surfaces - All major surface areas that contain quiz content in the right panel

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

Quiz screen with default surface (#FFFFFF) - controls the right content panel background color

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

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 content panel, 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
• Result cards in Results view - The background color of the result display cards on the results screen
• 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

Results screen with default surfaceVariant (#EEEEEE) - controls the right quiz panel background colors, including both the upper panel displaying the dynamic message "Amazing! You answered all questions correctly!" with the "5/5" score and the lower panel containing the "Play Again" and "Share Result" buttons

Testing with custom surfaceVariant (#FFA500 orange) instead of default #EEEEEE 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 border of the quiz widget.

It affects:

• Quiz widget border - The border color around the entire quiz container

How to set it: Set your desired color value for the secondaryContainer property. This will update the quiz widget border

Quiz screen with default secondaryContainer (#BDBDBD) - controls the quiz border color

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 you can easily customize 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 success-related states in dark mode and are primarily used for correct answer feedback.

These colors affect:

• 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
• 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) and text color for score/correct answer displays

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

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

Dark mode showing final score "4/5" in success plainColor (#4CAF50) on the results screen, and "Your answer:" labels with correct responses displayed in the same success color in the answers tab for Questions 1 and 2

Testing with custom success plainColor (#FFA500 orange) - shows the correct answer options highlighting in the custom color, the score "4/5" on the results screen, and "Your answer:" labels with correct responses in the answers tab.

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)

The danger palette colors control multiple error and danger-related states in dark mode, including incorrect answer feedback and error displays.

These colors affect:

• Incorrect answer highlight (when user selects incorrectly) - When a user selects an incorrect answer and clicks "Next Question", the incorrect option briefly highlights in red before moving to the next question
• 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 (for incorrect answers) - 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, incorrect answer text, final score display (when score = 0))

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

Dark mode split template showing incorrect answer "30 January 1971" highlighted in danger plainColor (#F44336) and correct answer "30 January 1981" highlighted in success color after the user clicks on "Next Question"

Dark mode results screen showing "0/5" score in danger plainColor (#F44336) - scores above 0 would display in success color instead

Dark mode answers tab showing "Your answer:" labels and user's incorrect responses displayed in danger plainColor (#F44336) for incorrectly answered Questions 1 and 2 (correctly answered questions would show this label in success color instead)

To make it even clearer which UI elements the danger palette controls, we've included screenshots below using a custom testing color (#FFA500) instead of the default red.

Testing with custom danger plainColor (#FFA500 orange) instead of default #F44336 to clearly demonstrate which UI elements this color controls - Incorrect answer highlight

🔵 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.

These colors affect:

• 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
• 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)
• 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.

Split template showing selected answer option "30 January 1981" with primary plainColor (#1A77D2) for background and onPrimary (#FAFAFA) for text, plus "Next Question" button with the same color scheme

Results screen with "Share Result" button displaying primary plainColor (#1A77D2) for background and onPrimary (#FAFAFA) for button text

 To help visualize even more clearly 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
• onPrimary (#FF0000 red) - 'Next Question' & 'Share Result' Buttons text and selected answer option 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) - this color controls the Results tab underline, the dynamic message text "Amazing! You answered all questions correctly!", the "Thank you for participating!" text and the 'Play again' button text

Dark mode answers tab 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 More 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 counter, the question text and answer options text.

It affects:

• Quiz label - The small "QUIZ" label text displayed at the top of the left image panel
• Quiz title - The primary title text of your quiz displayed on the left image panel (e.g., "Bulgarian Football Legends: How Well Do You Know Dimitar Berbatov?")
• Question counter - The "1/5", "2/5", etc. indicator showing current question number
• 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 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 counter, 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 in the right content panel throughout your quiz in dark mode, including the quiz content area, results screen background, and answers screen background.

It affects:

• Quiz content panel background - The background color of the right panel containing questions and answer options
• Results screen background - The background surface of the final results screen in the right panel
• Answers screen background - The background surface of the answers screen in the right panel

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 in the content panel throughout your dark mode quiz to maintain visual consistency.

Dark mode quiz screen with default surface (#424242) - controls the right content panel background color

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

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 content panel 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
• Card backgrounds in Results tab - The background color of the cards displayed in the results screen

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 results screen with default surface (#424242) - controls the right content panel background color, including both the upper panel displaying the dynamic message "Amazing! You answered all questions correctly!" with the "5/5" score and the lower panel containing the "Play Again" and "Share Result" buttons

Testing with custom surfaceVariant (#FFA500 orange) instead of default #616161 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 border of the whole quiz widget.

It affects:

• Quiz widget border - The border color around the entire quiz container

How to set it: Set your desired color value for the secondaryContainer property in colorSchemes.dark. This will update the quiz widget border.

Dark mode quiz screen with default secondaryContainer (#757575) - controls the quiz border color

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: While the color properties share multiple similarities across templates, the specific implementation described above is unique to the Split template. Different templates may use different properties, and the same property can control different UI elements in Standard, 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