Pbi Theme

Power BI Theme Generator

Generate a complete Power BI Desktop theme JSON file (~5800 lines) from the client's brand colors. The output is a production-ready .json theme importable via View > Themes > Browse in Power BI Desktop, plus a design system PDF, CSS tokens, and DAX HTML visual examples.

Input: $ARGUMENTS

0. Mode triage — ALWAYS THE FIRST QUESTION

This skill runs in one of three modes. Ask the user up front, before the colour/layout questionnaire. Do not skip — the mode decides where the output files land.

This theme is for:
  1. Standalone — I'll save the output where you tell me (default: current working directory)
  2. pbi-lifecycle project — output goes to /Global Theme/pbi-theme/
  3. pbi-project-hub engagement — output goes to Clients/{name}/02_Design_System/

Type 1, 2, or 3.

If the user's invocation already implies the mode (e.g. they pasted a path that contains Global Theme/, or they said "use the lifecycle theme path"), the agent may infer the mode and skip the prompt.

Mode 1 · Standalone

• Ask the user where to save the files (default: current working directory).
• Use the brand name they provide for file naming.
• Output goes flat into the chosen folder.

Mode 2 · pbi-lifecycle integration

• Ask: "Paste any path inside the lifecycle-managed client (the project folder, the Power BI Repository folder, or the client root itself). I'll find Global Theme/ automatically."
• Resolve the client root by walking up from the path the user provided until you find a sibling folder named Global Theme (or ClientTheme for older lifecycle versions). The client root is the folder that contains both Global Theme/ and Power BI Repository/.
• If Global Theme/ is not found within 5 parent levels of the provided path, stop and ask the user to confirm the client root manually. Do not guess.
• Inside Global Theme/, the lifecycle skill creates three subfolders: logo/, brand-guideline/, pbi-theme/. The output of THIS skill goes into Global Theme/pbi-theme/, organized in four subfolders by file category:

`` Global Theme/pbi-theme/ theme/ ← {brand}-pbi-theme.json + {brand}-canvas-background.svg (the importable artifacts — View > Themes > Browse) design-system/ ← {brand}-design-system.pdf (shareable A4 documentation) design-tokens/ ← {brand}-tokens.css (CSS custom properties for HTML visuals) html-visual-style/ ← {brand}-html-visual-example.dax (DAX example using the tokens) ``

• If any of the four category subfolders does not exist yet (older lifecycle version or manual client setup), create the missing ones before writing. Never delete or modify anything that already exists.
• Read-only on everything else under the client root. Never touch Power BI Repository/, Global Info/, Global Theme/logo/, Global Theme/brand-guideline/, or any pre-existing file in the four category subfolders. The skill only writes net-new files; if a {brand}-pbi-theme.json already exists in theme/, ask the operator before overwriting (offer to suffix with a version number, e.g. {brand}-pbi-theme-v2.json).

Mode 3 · pbi-project-hub engagement (legacy companion)

• The user will typically already have a client folder at Clients/{name}/.
• Generate outputs directly into Clients/{name}/02_Design_System/.
• Use the client name from the project-hub context to name the files.
• Cross-link: the project-hub's brand-guide.md should reference the theme outputs.
• Detect by checking for a Clients/{name}/02_Design_System/ path in $ARGUMENTS or nearby working files. If present, use that path.

Output file list (same in every mode)

Whatever the mode, this skill always writes the same five files (and only these five):

1. {brand}-pbi-theme.json
2. {brand}-canvas-background.svg
3. {brand}-design-system.pdf
4. {brand}-tokens.css
5. {brand}-html-visual-example.dax

Where each file lands:

| Mode | File | Destination | |---|---|---| | 1 (standalone) | all 5 | flat in the chosen folder | | 2 (lifecycle) | {brand}-pbi-theme.json | Global Theme/pbi-theme/theme/ | | 2 (lifecycle) | {brand}-canvas-background.svg | Global Theme/pbi-theme/theme/ | | 2 (lifecycle) | {brand}-design-system.pdf | Global Theme/pbi-theme/design-system/ | | 2 (lifecycle) | {brand}-tokens.css | Global Theme/pbi-theme/design-tokens/ | | 2 (lifecycle) | {brand}-html-visual-example.dax | Global Theme/pbi-theme/html-visual-style/ | | 3 (project-hub) | all 5 | flat in Clients/{name}/02_Design_System/ |

The skill never writes a logo.svg, brand-guideline.pdf, theme.json (without the {brand}-pbi- prefix), or any other file. Subfolders like logo/ and brand-guideline/ exist for the operator's own assets and are not populated by this skill.

1. Collect Inputs — MANDATORY QUESTIONNAIRE

IMPORTANT: If the user has NOT provided all required inputs, you MUST ask before generating.

Present this questionnaire EXACTLY (copy-paste it, do not rephrase):

To create your Power BI theme, I need a few details:

1. 3 brand colors (hex):

• Primary (main brand color): e.g. #20252e
• Secondary (accent/highlight): e.g. #f5b833
• Tertiary (support/complementary): e.g. #3b82f6

1. Report background: light or dark?

• Light: light background, dark text (corporate standard)
• Dark: dark background, light text (modern dashboards)

1. Report resolution:

• 16:9 — 1280x720px (Power BI default, recommended)
• 16:9 HD — 1920x1080px (full HD, large screens)
• 4:3 — 1440x1080px (presentations, projectors)
• Or custom dimensions: e.g. 1600x900

1. Canvas background layout:

A) Simple — title header only `` ┌──────────────────────────────┐ │ TITLE HEADER │ ├──────────────────────────────┤ │ │ │ CANVAS │ │ │ └──────────────────────────────┘ ``

B) Header + Filters — title header + filter bar `` ┌──────────────────────────────┐ │ TITLE HEADER │ ├──────────────────────────────┤ │ FILTER BAR │ ├──────────────────────────────┤ │ │ │ CANVAS │ │ │ └──────────────────────────────┘ ``

C) Header + Filters + Sidebar — full layout `` ┌──────────────────────────────┐ │ TITLE HEADER │ ├──────────────────────────────┤ │ FILTER BAR │ ├──────┬───────────────────────┤ │ │ │ │ NAV │ CANVAS │ │ │ │ └──────┴───────────────────────┘ ``

D) Header + Sidebar — no filter bar `` ┌──────────────────────────────┐ │ TITLE HEADER │ ├──────┬───────────────────────┤ │ │ │ │ NAV │ CANVAS │ │ │ │ └──────┴───────────────────────┘ ``

E) Sidebar only — clean, minimalist `` ┌──────┬───────────────────────┐ │ │ TITLE │ │ ├─ line ────────────────┤ │ NAV │ │ │ │ CANVAS │ │ │ │ └──────┴───────────────────────┘ ``

1. Brand name (for the theme title): e.g. "Acme Corp"

1. Accessibility (optional):

• none — default palette, no restrictions
• protanopia — red-blind (~1.3% of men)
• deuteranopia — green-blind (~6% of men, most common)
• tritanopia — blue-blind (rare, ~0.01%)
• achromatopsia — no color vision, luminance only
• low-vision — enhanced contrast (WCAG AAA, minimum 7:1 ratio)
• wcag-aa — WCAG AA compliance (minimum 4.5:1 text, 3:1 graphics)
• wcag-aaa — WCAG AAA compliance (minimum 7:1 text, 4.5:1 graphics)

1. Borders and corners (optional):

• default — border radius 6px, subtle visible borders (recommended)
• rounded — border radius 12px, soft borders
• sharp — border radius 0px, solid borders
• none — border radius 8px, no visible borders
• Or custom: e.g. "radius 10px, no borders"

1. Brand logo (optional):

• Paste your SVG logo in the chat and it will be embedded in the background
• Logo is left-aligned at the top (sidebar or header area)
• If not provided, the theme is generated without a logo

1. What would you like me to generate?

• all — everything: theme JSON + SVG background + design system PDF + CSS tokens + DAX examples (default)
• theme-only — just the Power BI theme JSON + SVG background
• theme+pdf — theme JSON + SVG + design system PDF
• Or tell me exactly what you need

If you only have 1-2 colors, just tell me and I can help!

If the user provides only 1-2 colors, suggest complementary options with hex codes for them to approve before proceeding. If resolution is not specified, default to 1280x720 (16:9 standard). If layout is not specified, default to B (Header + Filters).

Required Inputs:

• Primary color (required): The main brand color as hex — used for text, headers, or main identity
• Secondary color (required): Accent/highlight color — used for dataColor[0], buttons, badges, emphasis
• Tertiary color (required): Support color — used for dataColor[1] and chart variety
• Background mode (required): light or dark — fundamentally changes the entire color architecture
• Resolution (optional): Report canvas dimensions. Default: 1280x720. Affects the SVG background layout.
• Layout (optional): Canvas background layout: A | B | C | D | E. Default: B.
• Brand name (optional): Used in theme name field and file naming. Default: "Custom Theme"
• Accessibility (optional): Color accessibility mode. Default: none. Options: protanopia, deuteranopia, tritanopia, achromatopsia, low-vision, wcag-aa, wcag-aaa.
• Logo (optional): SVG logo provided by the user. Embedded in the canvas background SVG. If not provided, generate without logo.
• Mood (optional): professional | bold | minimal. Default: professional. Controls layout density, not colors.

2. Core Workflow

Step 1: Collect Inputs

Present the questionnaire above. Do not proceed until all required inputs are provided.

Step 2: Generate Color Palette

Convert the primary hex to HSL. Generate the full 37-color semantic map from the three brand colors.

See [references/color-engine.md](references/color-engine.md) for the complete algorithm:

• Backgrounds (4 colors) — light and dark mode calculations
• Text hierarchy (5 colors) — light and dark mode
• Borders and chrome (6 colors)
• Accent family (5 colors from secondary)
• Disabled states (2 colors)
• Semantic status (3 colors)
• Data colors (8 colors) — brand-anchored algorithm
• Filter pane colors (4 derived)

See [references/accessibility.md](references/accessibility.md) for WCAG contrast ratios and color blindness adjustment rules applied after palette generation.

Step 3: Apply Layout Settings by Mood

Apply structural properties (padding, border radius, shadows, gridlines, font selection) based on the chosen mood. If the user chose a custom border style, override accordingly.

See [references/layout-templates.md](references/layout-templates.md) for mood tables (professional/bold/minimal), border style overrides, table variants, action button presets, and font selection.

Step 4: Generate Theme JSON

Build the complete theme JSON with:

• Top-level structure (name, dataColors, background, foreground, tableAccent, etc.)
• All 13 textClasses with resolution-scaled font sizes
• Complete visualStyles for all 27 visual types with presets
• Named shapes with brand colors
• ThemeDataColor expressions preserved as-is

See [references/visual-types.md](references/visual-types.md) for the complete list of visual types, textClasses with font scaling, color replacement map, and named shape definitions.

Step 5: Generate SVG Canvas Background

CRITICAL: You MUST generate an SVG background and embed it as base64 in the theme JSON at visualStyles.page.*.background[0].image. This is what gives the report a structured layout when imported.

Always use preserveAspectRatio="xMidYMid slice" and scaling: "Fit".

Example for Layout B (Header + Filters), light mode, 1280x720:

If the user provided a logo SVG, embed it inside the background SVG using ``.

See [references/layout-templates.md](references/layout-templates.md) for all 5 layout SVGs (A-E) in light/dark mode.

Step 6: Generate Outputs

Produce the output files based on the user's choice (question 9). Default: all 4 files.

CRITICAL: You MUST read [references/layout-templates.md](references/layout-templates.md) and [references/visual-types.md](references/visual-types.md) before generating. Do not improvise the theme structure.

3. Output Files

LANGUAGE RULE: ALL output files (JSON, HTML, CSS, DAX, SVG) MUST be in English regardless of what language the user speaks. Labels like "background", "foreground", "How to Import", "Design System Reference", section titles, comments — everything in English. The only exception is if the user explicitly asks for a specific language.

STRUCTURE RULE: Follow the exact templates defined below. Do NOT improvise different HTML structures, CSS frameworks, or alternative layouts. The design system HTML must match the 2-page A4 format described below exactly.

Generate up to 5 files (based on user's choice in question 9):

1. {brand}-pbi-theme.json — The complete Power BI theme (ready to import via View > Themes > Browse)
2. {brand}-canvas-background.svg — The SVG canvas background as a standalone file (for manual use or editing)
3. {brand}-design-system.pdf — Design system reference document (A4, print-ready, shareable by email)
4. {brand}-tokens.css — CSS custom properties for HTML visuals inside Power BI
5. {brand}-html-visual-example.dax — DAX measures with HTML visual examples using the brand tokens

Note: The SVG is also embedded inside the theme JSON, but providing it separately lets the user edit it, use it in other tools, or apply it manually in Power BI.

PDF Generation

Generate the design system HTML as a 2-page A4 document with @page { size: A4; margin: 0 } and @media print rules. Always include footer credit on the last page:

Design System HTML MUST follow this exact structure (2-page A4 document):

Page 1:

• Header: brand logo (left) + "Power BI Theme" title (right) + "LIGHT MODE · PROFESSIONAL" badge
• Canvas Background preview (aspect-ratio 16/9 showing the SVG layout)
• Brand Colors (3 swatches: primary, secondary, tertiary)
• Accent Family (5 tone swatches: 50, 200, 400, 500, 700)
• Data Colors (8 swatches in a row)
• Component preview (2 KPI cards + bar chart using data colors)
• Footer: "{Brand Name} · Design System v1.0" + "Page 1 of 2"

Page 2:

• Small header: brand logo + "Technical Reference"
• Structural Colors table (background, foreground, secondaryBackground, etc.)
• Semantic Colors (Good, Bad, Neutral cards)
• Surfaces (bg1, bg2, bg3, white swatches)
• Layout Properties table (padding, border radius, gridline, font, etc.)
• UI Components (buttons: Brand/Soft/Surface, badges: Active/Healthy/Alert, navigation pills)
• How to Import (4 steps)
• Delivered Files table
• Footer: "{Brand Name} · Design System v1.0" + "by Gus Bavia · linkedin.com/in/gusbavia"

Use Inter + JetBrains Mono from Google Fonts. A4 format with @page { size: A4; margin: 0 }. Professional, minimal design — NOT generic Bootstrap/Tailwind look.

Interactive feature: Every color swatch in

…

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: gusbavia
• Source: gusbavia/pbi-theme
• License: MIT

Install and usage instructions live in the source repository linked above.