Theme Designer¶
The theme designer is where you shape the look of your portals. You pick colours and fonts, decide how each kind of widget looks, and watch the result in a live preview. Say you want a more compact look across all your portals. Open the theme, reduce the spacing scale, and every portal built on the theme tightens up.
Open the designer with Edit on the Portal Themes list.
The designer has three tabs: Base, Components and Other. Each tab has a menu on the left, the editor in the middle and a live preview on the right. The preview can show either Components or a sample Portal Page, and it follows the item you are editing. If you choose a state such as Hover in the editor, the preview shows the component in that state.
Click Save theme to keep your changes. If you leave with unsaved changes, the designer asks you to confirm.
Base¶
The Base tab holds the foundation every widget is built from: the named values the theme reuses everywhere, such as the primary colour or the standard spacing. These are the theme's tokens. Change one here and every widget that uses it follows.
| Item | What it sets |
|---|---|
| Theme Info | The theme's name and description. Edit as JSON shows the whole theme as JSON, which you can copy into another theme. Reset to Default throws away every change you made |
| Colors | The colours that carry meaning: Primary, Danger, Warning and Positive. Each has a background, text and border colour, plus subtle, hover and active shades |
| Surfaces | The layers of a page (Canvas, Surface, Subtle, Overlay, Item) with their background and text colours, and four levels of shadow under Elevation |
| Typography | The font families for body text, headings and code, the font size scale, font weights and line heights |
| Scales | The spacing scale and the corner-radius scale, from extra small to XXL |
| Borders | The default border, and the focus ring drawn around the field the reader is typing in |
| Palette | The colours chart series use, in order, and how fills and strokes lighten or darken on hover and selection |
| Overrides | Reusable CSS snippets you can apply to parts of individual widgets. See Overrides |
Components¶
The Components tab has one editor per kind of widget. This is where you decide how every button, table or menu in the portal looks by default. The components are grouped the same way as the widget library:
| Group | Components |
|---|---|
| Display | Alert, Badge, Progress Bar, Button, Text, Icon, Data List, Toast |
| Navigation | Nav Link, Nav List, Breadcrumb |
| Layout | Sidebar Layout, Tabs, Accordion, Section, Window |
| Form Inputs | Form Fields, Field Labels, Field Icons, Switch, Checkbox, Lookup Field, Date Picker, Month Range Picker |
| Table | Grid, Pagination |
| Chart | Axes & Gridlines, Elements, Legend |
Each component is split into parts. A button, for example, has a body and an icon. Each part has its own card of settings. The Anatomy menu in the editor's header shows how the parts fit together.
Parts that react to the reader have state tabs, such as Base, Hover and Active. A state starts out the same as Base. Any field you leave empty keeps the Base value, shown greyed out. Each tab counts the values you have changed. Reset returns a field to the template's value. See Components, parts and states for the rules behind this.
Above the component editor, the Mod: bar switches between the component's default look and its variants.
Other¶
The Other tab holds the settings that reach beyond the designer's fields.
| Item | What it does |
|---|---|
| Custom CSS | Free CSS added to every portal using this theme. It is not checked, so a mistake here can break the portal's look |
| External CSS | Addresses of stylesheets to load, for example a web font from https://fonts.googleapis.com/… |
| Icon Packs | Which icon packs the portal's icon pickers offer |
See Custom CSS and Variables for what the CSS can reach.
Styling one widget¶
Sometimes you want one widget to look different from the rest. A widget's properties panel has three styling sections for that, from broad to specific:
| Section | Use it for |
|---|---|
| Box Style | The size, spacing and position of the widget's box |
| Theme | The Variant, then the theme settings of each part, with an Overrides picker under each part. Fields start empty and show the theme value they would replace. Values you set here stay in place when you change the variant |
| Custom Style | Inline CSS for this widget only. Edit in Style Editor offers the same settings as a form, under Box, Text and Layout |
If the same look appears more than once, put it in the theme, a variant or an override. Keep Custom Style for true one-offs. Where to make a change sums up which to pick.