getuserfeedback.
Docs

Dark mode

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

Last reviewed

Dark mode

On web, the widget matches your app's color scheme automatically. React Native uses a different host: it has no browser DOM theme signal, so set colorScheme: "system" when you want the widget to follow the device preference.

How it works

The web 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.
  • You can override detection. Set a fixed scheme when your app uses a different theme signal or needs an explicit result.

For web integrations, light mode is the default — the widget is light unless a dark mode signal is present.

Web pages

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

Overriding the default

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

JavaScript SDK

TypeScriptdark-mode.ts
import { createClient } from "@getuserfeedback/sdk";const client = createClient({apiKey: "YOUR_API_KEY",colorScheme: "dark",});client.configure({ colorScheme: "system" });

React SDK

Set the initial scheme on the provider, then use useGetUserFeedback() for a runtime change:

TypeScriptdark-mode.tsx
import {GetUserFeedbackProvider,useGetUserFeedback,} from "@getuserfeedback/react";function ThemeControls() {const client = useGetUserFeedback();return (<buttontype="button"onClick={() => void client.configure({ colorScheme: "system" })}>Use system theme</button>);}export function App() {return (<GetUserFeedbackProviderclientOptions={{ apiKey: "YOUR_API_KEY", colorScheme: "dark" }}><ThemeControls /></GetUserFeedbackProvider>);}

React Native SDK

The React Native host has no browser DOM theme signal, so use "system" to follow the device preference. Client commands return promises, so handle the result when changing the scheme:

TypeScriptdark-mode.tsx
import { Button } from "react-native";import {GetUserFeedbackProvider,useGetUserFeedback,} from "@getuserfeedback/react-native";function ThemeControls() {const client = useGetUserFeedback();return (<Buttontitle="Use dark theme"onPress={() =>void client.configure({ colorScheme: "dark" }).catch((error) => console.error("Unable to set color scheme", error))}/>);}export function App() {return (<GetUserFeedbackProviderclientOptions={{ apiKey: "YOUR_API_KEY", colorScheme: "system" }}><ThemeControls /></GetUserFeedbackProvider>);}

Use the get-started guides for installation and initial client or provider setup:

Learn more