Theme
Customize the visual experience for users within a specific Area. Define branding through custom colors and logos, and set how data is presented across forms, lists, and detail views.
Area-level theme and display settings override the global settings in Settings → Theme. This lets you create distinct visual identities for different departments or user groups (for example, a dark-mode warehouse screen and a light-mode admin portal).
Go to Areas, select an Area, then click the Theme tab.
Theme settings are grouped into sections accessible from the THEME rail.
Theme
| Setting | Description |
|---|---|
| Enable theme configuration | Turn on to customize this Area's theme, localization, logo, and display settings, overriding the project defaults. |
| Default Theme | Select from curated themes (Default, Amber Minimal, Amethyst Haze, Bold Tech, Bubble Gum, Caffeine, Candyland). |
| Custom Theme | Turn on to enter custom CSS or JSON theme definitions. Supports Tailwind v4 and OKLCH color formats. |
Use TweakCn to visually design your theme and copy the resulting code directly into Hyper Studio.
Localization
Set the language behavior for this Area. These override the project defaults in Settings → Theme.
| Setting | Description |
|---|---|
| Default Language | The primary language for this Area scope. |
| Surfaced Languages | The subset of project languages available in this Area. Leave empty to support all project languages. |
| View Mode | The default display mode for data fields (Current language or All surfaced languages). |
| Allow Language Switching | Render a language switcher in the Area header. |
| Typography | Select a custom font family for each supported language. |
Logo
Manage branding for both light and dark display modes.
| Constraint | Requirement |
|---|---|
| File Types | SVG, PNG, JPEG, JPG |
| Max Size | 1MB |
| Aspect Ratio | Recommended 2:1. An integrated cropping tool is available during upload. |
Display settings
Configure the presentation across forms, list views, and detail views.
General
| Setting | Description |
|---|---|
| Display Mode | The method for showing system messages and notifications (uses Sonner). |
Forms
| Setting | Description |
|---|---|
| Use Shared Form | Apply the Add Form configuration to both add and edit operations. |
| Display Mode | The layout style for the form (Modal, Drawer, Card, or New Page). |
| Columns Per Row | The number of fields displayed per horizontal row (1–4). |
| Width | The layout width in pixels. Available for Modal and Drawer modes. |
| Drawer Position | The placement of the drawer (Left, Right, Top, or Bottom). Available for Drawer mode. |
| Use Field Icons | Display field icons in generated forms. |
List view
| Setting | Description |
|---|---|
| Display Mode | The layout style for record tables. Defaults to Table. |
| Enable Pagination | Enable results paging. |
| Enable Infinite Scroll | Enable infinite scroll loading. |
| Page Size | The number of records displayed per page or loaded per scroll batch. |
| Max Records | The maximum number of records to fetch in total. |
These settings apply to the filter panel in list views:
| Filter setting | Description |
|---|---|
| Display Mode | How filters should be displayed. Defaults to Card. |
| Columns Per Row | The number of filter fields displayed per horizontal row (1–4). |
| Use Field Icons | Enable to display field icons in filters. |
Detail view
| Setting | Description |
|---|---|
| Display Mode | The layout style for detail views (Modal, Drawer, Card, or New Page). |
| Columns Per Row | The number of fields displayed per horizontal row (1–4). |
| Width | The layout width in pixels. Available for Modal and Drawer modes. |
| Drawer Position | The placement of the drawer (Left, Right, Top, or Bottom). Available for Drawer mode. |
Related
- Areas overview — Overview of all area configuration options
- General configuration — Include collections in your Area
- Collection Configuration — Customize individual collection behavior
- Menu — Customize the navigation sidebar