Dark mode

What's new

• System-aware dark theme across the product
• Theme is always in sync with the host application
• Polished colors, borders, and states for low-light environments
• Works in-app, on your site via the widget, and in every hosted survey

Automatic dark mode on hosted pages

Survey pages on getuserfeedback.com enable dark mode automatically based on user preferences and allow the user to toggle it manually.

Intelligent dark mode in embedded widgets

To provide a seamless user experience, the widget always matches the host application’s mode, automatically.

• If you don’t have a dark mode, the widget will never enable it.
• If you do, it will just work.

Details

We rely on industry-standard signals indicating that the host application is in dark mode. Specifically, if there is a dark class or data-theme="dark" attribute higher up the tree. It's ideal for sites and applications that have a dark mode and allow the user to toggle it manually.

If you manage dark mode differently, you have a few options:

• Provide a different css selector indicating dark mode (eg a different class or data-attribute, etc), or
• Set data-theme="dark" attribute on the widget itself
• If your dark mode is fully automatic (relies on user system preference prefers-color-scheme alone without a manual toggle), you can enable the widget to follow it by setting data-theme-source="system".

Default mode

Light mode is the default, by default (it's light unless a dark mode signal is present). You can make dark mode the default by setting data-theme-default="dark". This will make the widget dark, unless a light mode signal is present.

Disable theme switching

In an unlikely scenario where you need to, you can completely disable theme switching by setting data-theme attribute to light to make it always light, or dark to make it always dark.