Interface Overview

Understanding the Theme Studio workspace and its powerful features.

The Three-Panel Layout

Theme Studio uses an intuitive three-panel layout designed for efficient theme creation:

Left Panel: Foundation

Core theme settings including palettes, typography, and structural colors

Center: Preview/JSON

Live Power BI preview or real-time JSON view of your theme

Right Panel: Visual Styles

Detailed customization for each visual type with style variants

Tip: All panels are collapsible. Click the panel headers to expand/collapse them for more workspace.

Header Controls

The header provides quick access to essential theme management functions:

Back Button

Return to themes list. If you have unsaved changes, you'll be prompted to save.

Theme Name & Description

Click to edit your theme's name and description. Changes save automatically.

View Toggle

Switch between Preview (live Power BI report) and JSON (code view) modes.

Import

Import existing Power BI themes to enhance with Power UI features.

Export

Download your theme as a .json file ready for Power BI.

Reset

Revert all unsaved changes to the last saved state.

Save

Save your theme to the cloud. Creates a unique URL on first save.

Foundation Panel (Left)

The Foundation panel contains the core building blocks of your theme:

Sections

Palettes

Color and neutral palette selection with management tools

Typography

Font family selection for all text elements

Structural Colors

Background, foreground, and UI element colors

Text Classes

Specific styling for titles, labels, and callout values

Canvas Layout

Report canvas background and padding settings

Visual Styles Panel (Right)

Customize individual visual types and create style variants:

Visual Type Selector

Dropdown to choose which visual type to customize (Column Chart, Line Chart, etc.)

Style Variants Manager

Create multiple style variations for each visual type - exclusive to Power UI!

  • • Default (*) - Base style for the visual
  • • Create custom variants (emphasis, subtle, etc.)
  • • Duplicate existing variants
  • • Delete variants you no longer need

Property Sections

Expandable sections for different aspects of the visual (General, Title, Data Colors, etc.)

Visual Indicators

Blue Dots

Indicate properties that have been modified from their default values

5 unsaved

Unsaved Changes

Header shows count of unsaved changes. Click Save to persist them.

Save Success

Green checkmark appears briefly after successful save

Interface Tips

💡

Responsive Design: Panels automatically adjust on smaller screens

💡

Preview Sync: Clicking a visual in preview auto-selects it in Visual Styles

💡

Quick Toggle: Use keyboard shortcuts to toggle panels (Ctrl/Cmd + 1, 2, 3)

💡

Auto-Save: Changes persist in browser even if you navigate away

Next: Start with Color Palettes

Now that you understand the interface, let's dive into creating beautiful color palettes for your theme.

Continue to Color Palettes →