Color tokens

The default Quiz component includes its own stylesheet. Its color tokens are CSS custom properties declared on .react-quiz-container; no extra stylesheet import is required to use the built-in colors. These tokens style the default interface. Headless hooks and providers leave styling to your own components.

Override colorsCopy Anchor Link

Wrap the quiz in a class and target the quiz container inside it. Setting tokens only on :root or the wrapper does not override the values declared directly on .react-quiz-container. The more specific selector below also takes precedence when the library loads its stylesheet after your application's CSS.

import Quiz from 'react-quiz-component';
import { quiz } from './quiz';
import './quiz-theme.css';

export default function BrandedQuiz() {
  return (
    <div className="my-quiz">
      <Quiz quiz={quiz} showInstantFeedback enableProgressBar />
    </div>
  );
}

Save these overrides in quiz-theme.css:

.my-quiz .react-quiz-container {
  --color-primary: #7c3aed;
  --color-primary-strong: #6d28d9;
  --color-primary-soft: #f5f3ff;
  --color-text-on-primary: #fff;
  --color-border-focus: #7c3aed;
  --color-bg-selected: #f5f3ff;
}

@media (prefers-color-scheme: dark) {
  .my-quiz .react-quiz-container {
    --color-primary: #c4b5fd;
    --color-primary-strong: #ddd6fe;
    --color-primary-soft: #2e1065;
    --color-text-on-primary: #2e1065;
    --color-border-focus: #c4b5fd;
    --color-bg-selected: #2e1065;
  }
}

Each token is independent. Changing --color-primary does not automatically change its hover, soft-background, focus, or text colors. Override the related tokens together, keeping text and focus indicators readable against their backgrounds.

Active color tokensCopy Anchor Link

These tokens are used by the current default interface. The values below match the library stylesheet.

Dark mode and application themesCopy Anchor Link

The default interface follows the operating system's prefers-color-scheme setting and sets color-scheme on the quiz container. It does not automatically follow an application's .dark class or a data-theme attribute. The override example above preserves that system-based behavior.

To control the quiz through your application's theme switch, define complete light and dark overrides using selectors such as .my-quiz[data-theme='light'] .react-quiz-container and .my-quiz[data-theme='dark'] .react-quiz-container. Set color-scheme: light or color-scheme: dark in the corresponding rule and use the active-token table for each palette. Override both palettes so the system media query cannot leave the quiz with a mixture of light and dark colors.

Progress bar colorsCopy Anchor Link

When enableProgressBar is enabled, the fill uses --color-primary by default and the track uses --color-progress-track. To give one quiz a separate fill color, set progressBarColor in its quiz data:

import Quiz from 'react-quiz-component';
import { quiz } from './quiz';

const customQuiz = {
  ...quiz,
  progressBarColor: '#7c3aed',
};

export default function CustomProgressQuiz() {
  return <Quiz quiz={customQuiz} enableProgressBar />;
}

progressBarColor accepts a three- or six-digit hex color. It takes precedence over the primary token for the fill and stays the same in both themes. Omit it to let the fill follow your theme's --color-primary. The component sets its internal --quiz-progress-color property inline on the progress element; use the quiz field or the primary token instead of setting that internal property on the container.

Other declared color tokensCopy Anchor Link

The stylesheet also declares the following tokens, but the current default interface does not reference them. Overriding these alone has no visible effect. They are listed here to distinguish declarations from the active customization points above.