Dark Mode Support
Surveys that adapt to user preferences
Dark Mode Support
Surveys automatically adapt to respondent preferences. When respondents have dark mode enabled on their device, your survey respects that choice, providing a comfortable experience in any lighting condition.
Quick Start
Enable dark mode in three steps:
- Go to Team Settings > Branding
- Toggle Dark Mode on
- Customize dark mode colors (or use auto-generated colors)
How It Works
When dark mode is enabled, Srvey detects the respondent's system preference:
- System prefers dark: Survey displays in dark mode
- System prefers light: Survey displays in light mode
System Settings
Dark mode preference is detected from:
| Platform | Setting Location |
|---|---|
| macOS | System Preferences > Appearance |
| iOS | Settings > Display & Brightness |
| Windows | Settings > Personalization > Colors |
| Android | Settings > Display > Dark theme |
| Browser | Browser settings or extensions |
Configuration Options
Enable Dark Mode
- Go to Team Settings > Branding
- Scroll to the Dark Mode section
- Toggle the switch to enable dark mode
Auto-Detect Preference
When enabled, surveys automatically match the respondent's system setting:
- Enable dark mode
- Toggle Auto-detect preference on (default)
- Surveys follow respondent's system color scheme
Dark Mode Colors
Configure a complete dark color palette:
| Color | Description |
|---|---|
| Primary | Buttons, links, progress bar |
| Background | Survey background (use dark gray, not pure black) |
| Text | Primary text (use off-white for readability) |
| Secondary Text | Descriptions and hints |
| Button Text | Text on buttons |
| Accent | Highlights and focus states |
| Error | Error messages |
| Success | Success messages |
Generate Dark Colors Automatically
Click Generate Dark Mode to automatically create a dark color palette based on your light mode colors. The system uses color science to create accessible dark variants.
Customizing Dark Colors
Color Recommendations
Background:
- Use dark grays, not pure black (#000000)
- Pure black can be harsh on eyes
- Recommended: #18181b to #27272a
Text:
- Use off-white, not pure white (#FFFFFF)
- Pure white on black causes eye strain
- Recommended: #fafafa to #e4e4e7
Primary color:
- May need to be lighter than in light mode
- Ensure sufficient contrast against dark background
- Test with actual survey content
Preview Both Modes
The branding settings show live previews for both light and dark mode. Review:
- Text readability
- Button visibility
- Logo appearance
- Overall look and feel
Accessibility Benefits
Dark mode improves accessibility for many users:
| Benefit | Description |
|---|---|
| Reduced eye strain | Easier viewing in low light environments |
| Light sensitivity | Helps users sensitive to bright screens |
| Battery saving | OLED screens use less power |
| Focus | Less visual distraction |
Contrast Requirements
Dark mode must meet the same WCAG accessibility standards:
- 4.5:1 ratio for normal text
- 3:1 ratio for large text
The branding settings show contrast ratios to help you verify accessibility.
Real-World Examples
Example: Corporate Survey
Scenario: Professional survey supporting both modes.
Light Mode:
- Background: #ffffff
- Text: #18181b
- Primary: #1E40AF
Dark Mode (auto-generated):
- Background: #18181b
- Text: #fafafa
- Primary: #60A5FA
Result:
- Professional in any environment
- Respects user preferences
Example: Academic Research
Scenario: Long survey where eye strain matters.
Settings:
- Dark mode: Enabled
- Auto-detect: On
- Colors: Generated from light theme
Result:
- Respondents in dark rooms are comfortable
- Reduces survey fatigue for long sessions
Testing Dark Mode
In the Branding Settings
- Enable dark mode
- Review the side-by-side preview panels
- Check both light and dark appearances
- Verify text readability and button visibility
Testing Checklist
Before launching:
- Text is readable in both modes
- Logo visible on both backgrounds
- Buttons have sufficient contrast
- Progress bar is visible
- Error messages stand out
- Overall experience feels cohesive
Plan Availability
| Feature | Free | Pro | Business | Enterprise |
|---|---|---|---|---|
| Dark mode support | Yes | Yes | Yes | Yes |
| Auto-detect preference | Yes | Yes | Yes | Yes |
| Custom dark colors | - | Yes | Yes | Yes |
| Auto-generate colors | - | Yes | Yes | Yes |
Dark mode is available on all plans. Custom colors require the custom_branding feature on Pro plans and above.
Troubleshooting
Issue: Dark mode not activating
Symptoms: Survey stays in light mode despite system preference.
Solutions:
- Verify dark mode is enabled in branding settings
- Check "Auto-detect preference" is enabled
- Confirm your device is set to dark mode
- Clear browser cache and refresh
Issue: Colors look wrong in dark mode
Symptoms: Text hard to read or colors clash.
Solutions:
- Review custom dark colors for sufficient contrast
- Try using "Generate Dark Mode" for auto-calculated colors
- Check contrast ratios shown in settings
- Test with actual survey content
Issue: Logo not visible on dark background
Symptoms: Logo disappears or looks wrong.
Solutions:
- Use a logo with transparency (PNG or SVG)
- Consider creating a light-colored version of your logo
- Use SVG format for best results across both modes
Best Practices
- Use auto-detect - Best experience for most users
- Test both modes - Check all question types in light and dark
- Avoid pure black/white - Use off-black (#18181b) and off-white (#fafafa)
- Generate colors first - Start with auto-generated colors, then customize
- Check contrast - Ensure text meets accessibility standards
- Consider your logo - Ensure it works on both light and dark backgrounds