Dark mode

Intelligent color scheme detection that always matches your app — never mismatched, never surprising.

Last reviewed

Dark mode

Dark mode in getuserfeedback.com is designed to be intelligent. The widget always matches your app's color scheme — automatically.

How it works

The widget detects your app's current mode by watching for standard signals: a dark class or data-theme="dark" attribute on <html> or <body>. This is how most apps and frameworks (Tailwind, Next.js, etc.) signal dark mode.

The key behaviors:

  • If your app doesn't have dark mode, the widget will never turn it on. It stays in light mode.
  • If your app does have dark mode, the widget follows along automatically as your users toggle it.
  • The widget never mismatches your app. If your app is in light mode, the widget is in light mode. Always.

Light mode is the default — the widget is light unless a dark mode signal is present.

Hosted survey pages

Survey pages on getuserfeedback.com enable dark mode automatically based on the visitor's system preferences and let them toggle it manually.

Fallback behavior

When a value isn't provided in dark mode, it's inherited from light mode. You only need to set the colors that should actually change.

Overriding the default

If you need to force a specific color scheme instead of auto-detecting:

// At startup
const client = createClient({
  apiKey: "YOUR_API_KEY",
  colorScheme: "dark",
});

// Or at runtime
client.configure({ colorScheme: "system" });

Each get-started guide covers the setup for your integration:

  • React SDKcolorScheme in client options or configure()
  • JavaScript SDKcolorScheme in createClient() or configure()
  • Google Tag Manager — in the tag settings
  • Iframe — path-based color scheme in the URL (/dark, /light, /system)

Learn more