Pointer automatically adapts between light and dark modes based on user system preferences. You can customize colors, logos, and images for both themes in the Playground page of the dashboard.

​
What you’ll customize

Colors

Brand colors that automatically adapt to light and dark themes.

Logo

Upload separate logo variants optimized for each theme.

Featured images

Theme-specific images for featured content blocks.

​
Color customization

Configure your brand colors in the Design section of the playground. All colors automatically adapt between light and dark modes.
Color customization interface showing light and dark mode options

​
Available colors

  • Primary color: Main brand color for buttons and key elements
  • Secondary color: Supporting text and secondary elements
  • Tertiary color: Background elements and subtle accents
  • Accent color: Special emphasis and highlights
  • Interactive color: Buttons, links, and clickable elements
  • Background color: Main widget background
  • Border color: Dividers and structural elements
Colors update in real-time with HEX code display. Use the theme toggle to preview both light and dark modes.

​
Logo variants

Upload separate logo assets optimized for each theme to ensure optimal visibility.
Logo and featured image theming are specifically for the widget view, not the command menu view.
Logo upload interface with light and dark mode variants

​
Setup process

  1. Light mode logo: Upload your primary logo (works on light backgrounds)
  2. Dark mode logo: Upload a light-colored variant (works on dark backgrounds)
  3. Test visibility: Use the theme toggle to verify both logos display correctly
  4. Auto-fallback: If no dark variant is provided, the light logo is used
Supported formats: .png, .jpeg (max 2MB) Featured content blocks support theme-specific images for optimal contrast in both modes.
Featured image upload showing light and dark mode options

​
Configuration

  1. Standard images: Upload your default featured item images
  2. Dark variants: Optionally add theme-specific images for dark mode
  3. Preview testing: Toggle themes to verify image visibility and contrast
  4. Fallback behavior: Light mode images are used if dark variants aren’t provided
Providing dark mode variants ensures optimal contrast and visual consistency across all themes.

​
Theme behavior

​
Automatic detection

  • Respects user’s system theme preferences
  • Updates automatically when users change their device theme
  • No page reload required for theme changes

​
Manual preview

  • Toggle between light and dark modes in the playground
  • Test your customizations in both themes before publishing
  • Preview syncs with your dashboard theme by default

​
Best practices

​
Troubleshooting

​
Assets not switching themes

  • Verify dark mode assets are uploaded correctly
  • Clear browser cache and refresh
  • Check file formats (.png, .jpeg supported)
  • Ensure files are under 2MB

​
Color contrast issues

  • Use browser developer tools to check contrast ratios
  • Test with users who have visual accessibility needs
  • Consider high contrast mode compatibility
Always test your themed widget in both light and dark modes before publishing to ensure optimal user experience.