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.

​
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.

​
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.

​
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.