omni-theme-generator

name

omni-theme-generator

description

Generate Omni Analytics document theme JSON and application theme JSON for dashboards. Use this skill whenever the user mentions Omni themes, dashboard themes, dashboard styling, document themes, wants to brand or restyle Omni dashboards, asks for a dark/light theme, mentions color palettes for dashboards, or wants to match their Omni dashboards to a brand identity. Also trigger when the user shares brand colours and wants them applied to Omni, or asks to create a "clean", "modern", "corporate", "dark", or "minimal" dashboard look in Omni.

Omni Theme Generator

Generate complete, paste-ready Omni document theme JSON and application theme JSON from a text description, brand colours, business context, or reference design.

How Omni Theming Works

Omni has two separate theme systems. Understand which one the user needs before generating.

Document Themes (dashboard content)

Controls how dashboards look — tile backgrounds, text, borders, controls, buttons, chart palettes. Created via File > Theming on a published dashboard. Can be imported by pasting JSON.

This is what users need most often. When someone says "theme" or "dashboard theme" without qualification, they mean this.

Application Themes (Omni shell)

Controls the sidebar, navigation, buttons, and chrome around dashboards. Has separate styles (light mode) and stylesDark (dark mode) keys. Configured at Settings > Themes > Application.

The Omni Theme Lab (https://omni-theme.pages.dev/) generates application themes from brand images. The skill should complement this — generate the document theme to match.

Generating a Document Theme

Step 1: Understand what the user wants

Ask about or infer from context:

• Mood: clean, corporate, playful, dark, minimal, bold, branded
• Colours: brand colours (hex), accent colour, light or dark mode
• Typography: modern, classic, system default, or a specific font
• Tiles: bordered, floating (no borders), shadowed, sharp or rounded corners
• Controls: subtle, prominent, branded

If the user provides an application theme JSON (the styles/stylesDark format), extract the brand colours from it and build a matching document theme.

If the user describes a business or industry ("fintech startup", "healthcare enterprise", "creative agency"), infer appropriate design choices.

Step 2: Generate the JSON

Read references/document-theme-properties.md for the complete list of JSON keys, valid values, and what each one controls.

Generate a complete JSON object with ALL properties filled in. Users paste this into File > Theming > Import — partial JSON works but a complete theme is more useful and professional.

Step 3: Suggest a colour palette

If relevant, suggest a discrete colour palette for charts as a comma-separated hex list the user can paste into the Omni hex code editor (Chart > Colour palette > Custom > Hex code editor).

Read references/color-palettes.md for colorblind-safe options and palette design guidance.

Step 4: Present the output

Provide:

1. The document theme JSON in a code block, ready to paste
2. The suggested chart colour palette hex values
3. A brief explanation of the design choices
4. If they also need an application theme, generate that too (see references/application-theme-properties.md)

Generating an Application Theme

If the user needs an application theme (or both), read references/application-theme-properties.md for the JSON structure. Application themes have separate styles and stylesDark objects.

Point the user to the Omni Theme Lab (https://omni-theme.pages.dev/) if they have a brand image — it generates application themes automatically. The skill is most useful for generating the document theme to match.

Important Constraints

• Document themes are static — they do NOT auto-switch between light and dark mode. If the user needs both, generate two separate document themes (one light, one dark).
• The "Allow user color scheme" toggle (Settings > Themes > Application) determines whether users can pick light/dark mode. If it's on, dashboards need to look good in both modes or the org needs paired themes.
• Fonts in document themes accept either a font name string (e.g., "Inter", "'Outfit', sans-serif") or a WOFF2 URL wrapped in url(). Named fonts may not render if the user's browser doesn't have them — WOFF2 URLs from Google Fonts are the safest option.
• Application theme fonts MUST be WOFF2 URLs. Named font strings don't work there.

Reference Files

• references/document-theme-properties.md — Every JSON key, what it maps to in the UI, valid values, and examples
• references/application-theme-properties.md — Application theme JSON structure with styles/stylesDark keys
• references/color-palettes.md — Colorblind-safe palettes, palette design guidance, and hex values
• references/design-patterns.md — Pre-built theme patterns (Clean, Dark, Floating, Corporate, Bold) ready to use as starting points
• references/fonts.md — Font support details, Google Fonts WOFF2 retrieval, and popular font choices