Home > FAQs > Fans United Widgets: Classic Quiz FAQs > Advanced Theme Options Customization > Classic Quiz Widget - Advanced Color Customization for Overlay Template

Classic Quiz Widget - Advanced Color Customization for Overlay Template

Advanced Color Customization Through Theme Options

The Color Schemes theme option provides granular control over every color in your Classic Quiz widget's Overlay 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. Unlike other template types that support both light and dark theme modes, the Overlay template supports dark theme mode only.

πŸ“– 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 Overlay Template Quizzes? - Overview of the color property structure and organization
  3. Dark Mode Color Schemes - Detailed explanations of each color property with visual examples for dark mode Overlay Quizzes

 

Important: Dark Theme Only

 The Overlay template supports only the dark theme. This means only the colors configured from the dark color scheme will take effect on the UI. There is no light mode option for the Overlay template.

βš™οΈ 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 "dark" (remember, Overlay template only supports dark mode)
  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 Overlay Template Quizzes?

Color Schemes use a structured system organized under colorSchemes for dark mode only. Within the dark mode, 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 Overlay template creates an immersive visual experience by overlaying quiz content directly on background imagery. These colors ensure your content remains readable and visually appealing against various background images while maintaining brand consistency. This granular color control is ideal for creating visually striking, brand-forward quiz experiences.

 

🎨 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 and results 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 overlay 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 overlay quiz showing score "5/5" in success plainColor (#4CAF50) on the results screen

Dark mode overlay quiz showing "Your answer:" labels with correct responses displayed in success color in the answers tab (incorrect answers would be displayed in danger color instead)

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

Testing with custom success plainColor (#FFA500 orange) - demonstrates the color's control over correct answer highlights & score display (when score > 0)

Testing with custom success plainColor (#FFA500 orange) - demonstrates the color's control over the "Your answer:" label and answer text reflected on users' correct answers in the answers tab. (If the answer is incorrect, it's displayed in the danger colors instead)

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/error 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.

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

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

Dark mode overlay quiz answers tab showing "Your answer:" labels and user's incorrect responses displayed in danger plainColor (#F44336) for incorrectly answered questions (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 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, Final score display (when score = 0) & "Your answer" text in Answers view (for incorrect answers)

πŸ”΅ 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.

Overlay template quiz showing selected answer option 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 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.

Dark mode overlay quiz results screen with default textPrimary (#FAFAFA) - 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

Dark mode overlay quiz answers tab with default textPrimary (#FAFAFA) - controls the Answers tab underline, questions text "When was Dimitar Berbatov born?", "Correct answer:" label, and correct answer explanations 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 overlay quiz with default textSecondary (#FAFAFA) - controls the "RESULTS" and "ANSWERS" tab labels on both results and answers screens

Dark mode overlay quiz 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, 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 quiz
  • 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 in colorSchemes.dark. This will update all abovementioned text elements throughout your quiz to maintain consistent typography.

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

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

πŸ–ŒοΈ onSurface: What Does It Control? How Do I Set It?

(Default value: #212121)

The onSurface color is a unique property exclusive to the Overlay template. The other two templates (Standard, Split) do NOT support it, however - this one does. It controls the background color of the content overlay area that sits on top of your background imagery on the results screen.

It affects:

  • Results screen content overlay background - The semi-transparent background behind the results content that appears over your background image
  • "Play Again" button background - the background color of the "Play Again" button

How to set it: Set your desired color value for the onSurface property in colorSchemes.dark.

Dark mode overlay quiz results screen with default onSurface (#212121) - controls the semi-transparent content overlay background and the "Play Again" button background

Testing with custom onSurface color (#FFA500 orange) instead of default #212121 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, 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 quiz to create visual hierarchy and separation between content areas.

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

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

Testing with custom purple color for surfaceVariant 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 outer 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 in colorSchemes.dark. This will update the quiz widget border.

Dark mode overlay 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 Overlay 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:

 

Further Reading

πŸ“š Widget FAQs

πŸ“š Main Widget Documentation

Updated: