Enabling Dark Mode

Sprig In-Product Studies can follow the respondent’s system light or dark appearance automatically. This page covers how dark mode works, how it interacts with your custom CSS, and the patterns we recommend for keeping a study readable in both modes.

Availability: Default CSS dark mode shipped in Web SDK v2.49.0, and studies rendered in a mobile SDK need a version built against it: see Minimum SDK versions below.Dark mode is enabled per Sprig Product and is not on by default. Reach out to your Customer Success Manager or support@sprig.com to have it turned on. A self-serve setting in the dashboard is coming soon!

How it works

Sprig loads a second stylesheet that responds to the respondent’s operating system or browser appearance setting via the standard CSS media query:

@media (prefers-color-scheme: dark) {
  /* Sprig's dark palette */
}

There is no separate “dark theme” for you to configure and no toggle inside the survey. If a respondent’s device or browser is set to dark, the study renders dark; if it’s set to light, the study renders light. The switch is instant and happens on the respondent’s device/browser. Sprig’s styles are built on CSS custom properties (variables). The light values are declared once, and the dark stylesheet re-declares the same variable names with dark values. Every Sprig selector reads from those variables, so changing one variable updates every place that color is used.

/* Light (always loaded) */
html {
  --background-color: #fff;
  --text-color: #2f2e2c;
}

/* Dark */
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #1c1c1e;
    --text-color: #fff;
  }
}

Load order and specificity

How the CSS is applied:

Your custom CSS is injected after Sprig’s stylesheets. At equal specificity, your rules win. You do not need !important for ordinary overrides.
Sprig’s dark values are declared on :root, not html. :root has higher specificity than html, so a variable you set on html will apply in light mode but be overridden by Sprig in dark mode.

The commented reference block in the CSS editor is light-mode only. The default CSS shown in Settings > Surveys > Look & Feel > CSS is a snapshot of Sprig’s selectors with hardcoded light colors. It does not list the CSS variables or the dark palette. Use the variable reference below instead when you’re working on dark mode.

Choosing an approach

Approach	Best when	Effort
Do nothing	Your customizations are structural (spacing, radius, font, layout) and don’t set colors.	None
Override selectors directly	You want plain CSS with no variables, or you’re only restyling a few elements.	Low
Override Sprig’s variables	You want Sprig’s dark behavior, just in your brand colors.	Low
Define your own tokens	You have a real design system with light/dark pairs to mirror.	Medium

You don’t have to use CSS variables. Variables are a convenience: because every Sprig selector reads from them, changing one value updates everywhere that color is used. But a plain @media (prefers-color-scheme: dark) block with ordinary selector overrides works exactly as well, and is often clearer if you’re only touching a handful of elements. Use whichever fits your stylesheet.

Approach 1: Do nothing (color-free customizations)

If your custom CSS only changes layout, spacing, typography, or border radius, it already works in both modes. Sprig’s colors keep flowing through the variables.

/* Safe in both light and dark: no color declarations */
.ul-card__container--desktop {
  border-radius: 12px;
  box-shadow: none;
  padding: 24px;
}

.ul-question {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
}

Any hardcoded color you add is a dark mode bug waiting to happen. A rule like .ul-question { color: #1f2937; } applies in both modes, which means near-black text on Sprig’s near-black dark card. If you set a foreground color, set the matching background color too, or move both into variables.

Approach 2: Override selectors directly

No variables involved. Write your light-mode rules as usual, then re-declare whatever needs to change inside a @media (prefers-color-scheme: dark) block. Your custom CSS is injected after Sprig’s, so at equal specificity your rules win in both modes.

/* Applies in both modes */
.ul-card__container {
  border-radius: 12px;
}

.ul-question {
  color: #1f2937;
}

.ul-card-text__button {
  background-color: #0075de;
  color: #ffffff;
}

/* Dark only */
@media (prefers-color-scheme: dark) {
  .ul-card__container {
    background: #252525;
    border-width: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  }

  .ul-question {
    color: #ffffff;
  }

  .ul-caption {
    color: #9b9a97;
  }

  .ul-card-text__button {
    background-color: #0075de;
    color: #ffffff;
  }
}

Direct overrides don’t propagate. A variable you change is picked up everywhere Sprig uses it; a selector you override only affects that selector. If you restyle .ul-question for dark mode, you still need to handle .ul-caption, .choice, the number rows, and anything else you’ve given a color to. Step through every question type in the preview before saving.

Approach 3: Override Sprig’s variables

The lowest-effort way to brand both modes. Set Sprig’s own variable names on :root for light, then re-declare the ones that need to change inside a dark media query. Every Sprig selector picks the new values up automatically.

/* Light */
:root {
  --text-color: #1f2937;
  --text-color-light: #4b5563;
  --background-color: #ffffff;
  --selection-background-color: #f3f0ff;
  --selection-border-color: #7c5cff;
}

/* Dark */
@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #f5f5f7;
    --text-color-light: #a1a1aa;
    --background-color: #16161a;
    --selection-background-color: #2a2440;
    --selection-border-color: #a78bfa;
  }
}

Approach 4: Define your own tokens

If your company already maintains light/dark color pairs, declare them all up front, point a set of “active” tokens at the light values, and remap only the active tokens in the dark block. Your selectors then reference the active tokens and never need duplicating.

:root {
  /* Full palette: both modes declared once */
  --brand-text-light: #000000;
  --brand-text-dark: #ffffff;
  --brand-text-inverse-light: #ffffff;
  --brand-text-inverse-dark: #000000;
  --brand-button-light: #820076;
  --brand-button-dark: #f0a0ff;

  /* Active tokens default to light */
  --brand-text: var(--brand-text-light);
  --brand-text-inverse: var(--brand-text-inverse-light);
  --brand-button: var(--brand-button-light);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Remap only the active tokens */
    --brand-text: var(--brand-text-dark);
    --brand-text-inverse: var(--brand-text-inverse-dark);
    --brand-button: var(--brand-button-dark);
  }
}

/* Selectors are written once and work in both modes */
.ul-question,
.likert-number {
  color: var(--brand-text);
}

.ul-card-text__button {
  background: var(--brand-button);
  color: var(--brand-text-inverse);
  border-radius: 20px;
  padding: 12px 40px;
  font-weight: 600;
}

CSS variable reference

These are the variables Sprig’s stylesheets read from, with the default value in each mode. Override any of them on :root.

This table reflects Web SDK v2.49.0. Sprig may add variables in later versions; anything not listed here should be overridden by selector instead.

Core surfaces and text

Variable	Light	Dark
`--background-color`	`#fff`	`#1c1c1e`
`--background-color-darker`	`#faf9f8`	`#2c2c2e`
`--text-color`	`#2f2e2c`	`#fff`
`--text-color-light`	`#575653`	`#8f8f8f`
`--text-color-lighter`	`#858481`	`#a8a8a8`
`--border-color`	`#ececec`	`#3a3a3c`
`--border-color-heavy`	`#ebebeb`	`#2c2c2e`

Buttons and progress

Variable	Light	Dark
`--button-disabled-background`	`#f2f2f2`	`#2c2c2e`
`--button-disabled-text-color`	`#a8a8a8`	`#8f8f8f`
`--progress-bar-background`	`rgba(0, 0, 0, 0.1)`	`rgba(255, 255, 255, 0.1)`
`--prototype-button-background`	`rgba(0, 0, 0, 0.01)`	`rgba(255, 255, 255, 0.01)`
`--thank-you-link-background`	`rgba(0, 0, 0, 0.01)`	`rgba(255, 255, 255, 0.01)`
`--thank-you-link-background-hover`	`rgba(0, 0, 0, 0.03)`	`rgba(255, 255, 255, 0.03)`

Choice and selection elements

Variable	Light	Dark
`--selection-border-color`	`#c2c2c2`	`#3a3a3c`
`--selection-background-color`	`#f2f2f2`	`#2c2c2e`
`--selection-background-color-hover`	`#e6e6e6`	`#3a3a3c`
`--selection-indicator-color`	`#a8a8a8`	`#8f8f8f`
`--selection-indicator-color-selected`	`#000`	`#fff`
`--select-border`	`#e6e6e6`	`#3a3a3c`
`--select-border-hover`	`#dddcd9`	`#4a4a4c`
`--select-background`	`#fff`	`#1c1c1e`
`--select-background-hover`	`#f2f2f2`	`#2c2c2e`

Question-type specific

Variable	Light	Dark
`--matrix-header-background`	`#f7f7f7`	`#121212`
`--nps-unselected`	`#fcfcfc`	`#2c2c2e`
`--nps-unselected-border`	`#e6e6e6`	`#3a3a3c`
`--nps-selected-color-low`	`#b06d6d`	`#f44336`
`--nps-selected-color-high`	`#95a779`	`#4caf50`
`--likert-symbol-color`	`transparent`	`#8f8f8f`
`--rank-order-background`	`#f2f2f2`	`#2c2c2e`
`--rank-order-border`	`#e6e6e6`	`#3a3a3c`
`--rank-order-border-hover`	`#d9d9d9`	`#4a4a4c`
`--rank-order-number-background`	`#fff`	`#1c1c1e`
`--record-task-background`	`#f2f2f2`	`#2c2c2e`
`--record-task-border`	`#e6e6e6`	`#3a3a3c`
`--record-task-border-hover`	`#d9d9d9`	`#4a4a4c`
`--record-task-number-background`	`#fff`	`#1c1c1e`
`--voice-video-background`	`#f2f2f2`	`#2c2c2e`
`--voice-video-border`	`#e6e6e6`	`#3a3a3c`
`--voice-video-border-hover`	`#d9d9d9`	`#4a4a4c`
`--voice-video-icon-color`	`#a8a8a8`	`#8f8f8f`
`--sprig-brand-color`	`#000000`	`#828183`

Conversational UI

Conversational studies load an additional dark stylesheet with its own variables for the chat transcript and inputs. The most commonly overridden:

Variable	Controls
`--chat-right-bg`	Respondent message bubble background
`--chat-left-bg`	Sprig message bubble background
`--chat-msg-no-response`	Skipped/unanswered message text
`--chat-end-text`	End-of-conversation text
`--chat-footer`	Footer text
`--chat-choice-bg`	Choice option background
`--text-card-input-bg`	Open text input background
`--text-card-border`	Open text input border
`--select-checkbox-bg`	Checkbox fill
`--select-checkbox-border`	Checkbox border
`--select-radio-bg`	Radio button fill
`--consent-input-bg`	Consent card name input background

Override these the same way, inside a @media (prefers-color-scheme: dark) block on :root.

Common issues

My colors work in light mode but not dark mode

You most likely declared your variables on html instead of :root. Sprig’s dark values are on :root, which has higher specificity, so it wins regardless of source order. Change your selector to :root.

Text is unreadable (e.g. dark text on a dark card)

You have a hardcoded foreground color with no matching background, or vice versa. Search your CSS for any literal hex value on a color, background, or border-color property and either move it into a variable pair or wrap the dark variant in a @media (prefers-color-scheme: dark) block.

A white seam or flash appears around the card in dark mode

Something in the card’s ancestry still has a light background. Reset the wrappers to transparent so the host page shows through:

html,
body,
#ul-app,
.ul-app--overlay,
.ul-app--visible,
.ul-app__container {
  background: transparent !important;
}

An icon or chevron is invisible in dark mode

Some Sprig icons are inline SVG data URIs with a fixed stroke color. Sprig’s dark stylesheet replaces the affected ones, but if you’ve overridden a background shorthand you may have wiped the replacement. Set background-color rather than background, or re-declare the background-image in your dark block.

Dark mode isn't activating at all

Confirm three things: dark mode has been enabled for your Sprig Product (it is off by default; contact your Customer Success Manager or support@sprig.com), you’re on Web SDK v2.49.0 or later or a mobile SDK version built against it (see Minimum SDK versions), and the test device’s OS appearance is actually set to Dark.Enablement is per Product, not per environment: a Product’s development and production environments share one setting. If dark mode works in one place and not another, check whether you’re comparing two different Products rather than two environments of the same one. The in-editor preview reflects your browser’s current appearance setting.

Testing your CSS

Because custom CSS applies to all studies in a product, including active ones, test both modes before saving to production.

Work in a development environment first, then copy the finished CSS into production.
Toggle your OS appearance (macOS: System Settings > Appearance; Windows: Settings > Personalization > Colors) and re-check the preview panel.
In Chrome DevTools you can force the media query without changing your OS: open the Command Menu (Cmd/Ctrl + Shift + P), run Show Rendering, and set Emulate CSS media feature prefers-color-scheme.
Step through every question type in the preview, not just the first card. Matrix, NPS, Rank Order, and Open Text have the most mode-specific styling.
Check contrast. Brand colors tuned for a white background are frequently too dark on #1c1c1e; most design systems ship a lightened variant for dark surfaces for exactly this reason.

Mobile SDKs

Studies rendered in the iOS, Android, React Native, and Flutter SDKs use the same web stylesheets inside a web view, so everything on this page applies there as well. Native light/dark support (the SDK letting the web view render dark at all) landed earlier than the default CSS work, which is why some customers were already shipping their own dark mode CSS before v2.49.0. The mobile SDKs also expose APIs to force a study into light or dark regardless of the device setting — see the SDK changelogs.

Minimum SDK versions

These are the first mobile SDK releases built against Web SDK v2.49.0, and therefore the first to include the default CSS dark mode styles.

SDK	Minimum version
Web	v2.49.0
iOS	v4.33.1
Android	v2.27.2
React Native	v4.1.1
Flutter	v0.9.1
Segment iOS	v1.10.1
Segment Android	v1.10.1
Segment React Native	v0.9.1

For the full list of selectors and non-color customization options, see Styling Studies with Custom CSS.

Welcome to Sprig

Sprig Studies

Shared Study Foundations

Native AI

Installation

Integrations

Developer Center

Account & Settings

Privacy & Security

Study Best Practices

Support

How it works

Load order and specificity

Choosing an approach

Approach 1: Do nothing (color-free customizations)

Approach 2: Override selectors directly

Approach 3: Override Sprig’s variables

Approach 4: Define your own tokens

CSS variable reference

Conversational UI

Common issues

Testing your CSS

Mobile SDKs

Minimum SDK versions

​How it works

​Load order and specificity

​Choosing an approach

​Approach 1: Do nothing (color-free customizations)

​Approach 2: Override selectors directly

​Approach 3: Override Sprig’s variables

​Approach 4: Define your own tokens

​CSS variable reference

​Conversational UI

​Common issues

​Testing your CSS

​Mobile SDKs

​Minimum SDK versions

How it works

Load order and specificity

Choosing an approach

Approach 1: Do nothing (color-free customizations)

Approach 2: Override selectors directly

Approach 3: Override Sprig’s variables

Approach 4: Define your own tokens

CSS variable reference

Conversational UI

Common issues

Testing your CSS

Mobile SDKs

Minimum SDK versions