Theme Composer

Theme Composer Overview

The Theme Composer is built into the Joget Theme Builder. Instead of navigating through global settings and individual component panels, you describe the look and feel you want, and the composer applies it.

Everything produced by the composer follows the standard Joget theme configuration and remains fully editable in the Theme Builder. It is particularly effective for applying a full color palette in one shot, styling individual components, and setting up custom login pages.

The Theme Builder has two layers: Global Settings, which control the base theme, sizing, and style across the entire app, and Component Settings, which control individual elements like buttons, forms, tables, and inputs. The Composer works across both.

Getting Started

Open any theme in the Theme Builder. Look for the blue chat bubble icon at the bottom right of the screen next to admin settings — click it to open the composer panel.

There is no element selection in the Theme Builder, the way there is in the Form or Datalist builders. You work through the main composer panel and describe what you want to change. You can reference a specific component by name, for example, ask to enable the Custom Login page or switch the sidebar to horizontal, and the composer will apply it.

Two ways to start:

Describe it: provide your brand colors, describe the visual style, or name a specific component to update. The composer applies it across the relevant settings.

Show it: upload a screenshot or visual reference. The composer interprets the design and applies it as a theme configuration.

Try this as your first prompt:

Create a theme using these brand colors. Base #E6D6D0, Surface #8C6B73, Primary #31404C, Accent #636F4F. Apply them consistently across global settings and component styles.

Reviewing Composer Output

After the composer runs, two options appear:

• Apply: saves the change to your theme.
• Cancel: discards everything and returns the theme to its previous state.

Nothing is saved until you click Apply.

What You Can Build

Global Settings

Base Theme, Global Sizing, and Global Style are all supported. You can set the base theme, control the sizing scale, and apply global style properties through the composer.

Advanced Settings and PWA Settings are not supported through the composer. Configure these manually in the Theme Builder if your app requires them.

Component Settings

All standard components are supported:

• Accordion
• Breadcrumb
• Button
• Card
• Checkbox
• Custom Login Page
• Dropdown
• Form
• Input
• List
• Pagination
• Radio
• Tab
• Table
• Typography
• Upload
• Wizard

You do not need to navigate to each component manually. Reference the component by name in your prompt, and the composer applies the change.

Prompting Guide

To get the best results, be specific about colors and what you want changed.

Provide exact hex color values

The composer applies what you give it. Describing a color in words without a hex value gives inconsistent results.

✗ Bad: Make it look dark and professional

✔ Good: Use #1C3150 for the sidebar and primary surfaces, #3D7EAA as the accent, white for text

Name the component when targeting something specific

✔ Good: Enable the Custom Login page and set the background to #1C3150 with a centered white card

✔ Good: Switch the sidebar layout to horizontal

✔ Good: Update the Button component — primary button background #31404C, white text, 4px border radius

Give the full palette upfront when building a new theme

One detailed prompt produces better results than several small ones.

✔ Good: Build a theme using Base #E6D6D0, Surface #8C6B73, Primary #31404C, Accent #636F4F.

Apply consistently across global settings and all component styles.

Current Behaviour and Tips

• Screen returns to Global Settings after every apply: After clicking Apply, the Theme Builder always returns to the Global Settings view, regardless of which component you were editing. Your changes are saved, so navigate back to the component to confirm. This is a known behaviour.
• Contrast is not evaluated by the composer (AI Limitation): The composer applies the colors you provide but does not check contrast ratios or flag accessibility issues. If you give it colors with poor contrast, it will use them as-is without warning. Always verify your palette has sufficient contrast before applying, especially for text on backgrounds.
• Advanced Settings and PWA Settings are not supported: These two sections under Global Settings are not configurable through the composer. Set them manually in the Theme Builder.
• Full palette prompts work well in one shot: Providing a complete color palette with hex values in a single prompt, which produces consistent results across global settings and all components. For individual component tweaks afterward, follow up with a targeted prompt naming the component.

Prompt Playbook

The only confirmed working full-palette example is the brand colors row below. For all other entries, replace the color placeholders with your actual brand hex values before using. Do not copy placeholder colors; verify contrast before applying any palette.

Video Tutorial