Light & Dark Mode

Create themes that adapt beautifully to any lighting environment.

Understanding Theme Modes

Power UI's theme mode system allows you to create themes that work perfectly in both light and dark environments. Colors automatically adjust to maintain readability and visual hierarchy.

Light Mode

  • • Dark text on light backgrounds
  • • Ideal for bright environments
  • • Traditional report appearance
  • • Better for printing

Dark Mode

  • • Light text on dark backgrounds
  • • Reduces eye strain in dim settings
  • • Modern, sophisticated look
  • • Energy-efficient on OLED displays

Toggling Theme Mode

  1. 1

    Locate Theme Mode Toggle

    In the Foundation panel, find the "Theme Mode" section

  2. 2

    Click to Switch

    Toggle between Light and Dark modes

  3. 3

    Preview Updates

    Watch colors adapt in real-time in the preview

Note: The exported theme will include the mode that's currently active. Power BI doesn't support dynamic mode switching.

Automatic Color Adaptation

When you switch modes, Power UI intelligently adjusts colors to maintain optimal contrast and readability:

Structural Colors

Light Mode

Background: White
Foreground: Black

Dark Mode

Background: Dark Gray
Foreground: White

Neutral Palette Usage

Light Mode Mapping

  • • Shade 25-100: Backgrounds
  • • Shade 200-400: Borders
  • • Shade 700-950: Text

Dark Mode Mapping

  • • Shade 800-950: Backgrounds
  • • Shade 600-700: Borders
  • • Shade 25-200: Text

Data Colors

Data colors may shift slightly in dark mode to maintain sufficient contrast against dark backgrounds.

Light
→
Dark

Mode-Specific Customization

Some properties can have different values for light and dark modes:

How to Customize per Mode:

  1. 1.

    Set your theme to light mode and configure properties

  2. 2.

    Switch to dark mode

  3. 3.

    Adjust any properties that don't work well in dark mode

  4. 4.

    The theme remembers both sets of values

Design Considerations

Light Mode Design

  • Use subtle shadows for depth
  • Light gray borders work well
  • Maintain high contrast for text
  • Use white space effectively

Dark Mode Design

  • Avoid pure black backgrounds
  • Use subtle highlights for depth
  • Reduce color saturation slightly
  • Ensure sufficient but not harsh contrast

Testing in Both Modes

Testing Checklist:

Best Practices

Start with Light Mode

Design your theme in light mode first, then switch to dark mode and make adjustments. This ensures both modes are well-optimized.

Consider the Context

Think about where reports will be viewed. Office environments typically use light mode, while dashboards on large screens may benefit from dark mode.

Test Real Content

Preview with actual data densities and visual types. What works for simple charts may need adjustment for complex tables or matrices.

Document Mode Usage

When sharing themes, indicate which mode was primarily designed for and tested with. Include any mode-specific considerations.

Next: Visual Styles & Variants

Discover Power UI's exclusive feature - creating multiple style variations for each visual type.

Continue to Visual Styles & Variants →