Theme

The Theme tab lets you customize the visual experience for users within a specific Area. Define branding through custom colors and logos, and fine-tune how data is presented across forms, lists, and detail views.

note

Area-level theme and display settings override global settings defined in Settings → Theme. This lets you create distinct visual identities for different departments or user groups (for example, a dark-mode warehouse screen vs. a light-mode admin portal).

Go to Areas, select an Area, then click the Theme tab.

Theme and display

Follow these steps to customize the look and feel of your Area:

1. Go to Areas and select the Area you want to set up.
2. Click the Theme tab.
3. Click the Enable Theme Configuration toggle to turn it on.
4. Select a Default Theme or click the Custom Theme toggle to turn it on and provide a custom configuration.
5. Upload Light Mode and Dark Mode logos in the Logo Upload section.
6. Click the Display Settings toggle to turn it on and set layout behavior for Forms, List View, and Detail View.
7. Click Save Changes to apply the configuration.

---

Settings reference

Theme settings

Define the core visual style of the Area.

Setting	Description
Default Theme	A list of curated themes: Default, Amber Minimal, Amethyst Haze, Bold Tech, Bubble Gum, Caffeine, and Candyland.
Custom Theme	Click the toggle to turn it on and enter custom configuration code.
Theme Code	Paste custom CSS or JSON theme definitions. Supports Tailwind v4 and OKLCH color formats.

tip

Visit TweakCn to visually design your theme and copy the resulting code directly into Hyper Studio.

Logo upload

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 configuration

Manage how the user screen presents notifications, forms, and data tables.

General

Set system-wide display behavior for the Area.

Setting	Description
Display Mode	Determines the method for showing system messages and notifications (uses Sonner).

Forms

Define the layout and behavior for creating and editing records.

Setting	Description
Use Shared Form	When turned on, the Add Form configuration applies to both add and edit operations.
Display Mode	The layout style for the form. Choose between Modal, Drawer, or Card.
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	Turn on to display field icons in generated forms.

List view

Control the presentation and interaction logic for data tables.

Setting	Description
Display Mode	The layout style for record tables. Defaults to Table.
Enable Pagination	Turn on to enable results paging. Reveals further configuration options.
Enable Infinite Scroll	Turn on to 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.

Filter setting	Description
Display Mode	How the filter panel appears (for example, Modal, Drawer, or Card).
Columns Per Row	The number of filter 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	Turn on to display field icons in filters.

Detail view

Customize how individual record details are presented.

Setting	Description
Display Mode	The layout style for record details. Choose between Modal, Drawer, or Card.
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.

---

Example

Branded warehouse interface

In this scenario, a warehouse team requires a distinct, high-contrast dark theme to reduce eye strain in low-light environments.

1. Theme: Click the Custom Theme toggle to turn it on and paste an OKLCH definition with a high-contrast palette.
2. Logo: Upload a white version of the company logo for the Dark Mode Logo field.
3. Display: Set the Display Mode for Forms to Drawer and Drawer Position to Right. This keeps the inventory list visible while editing a specific item's stock levels.
4. List View: Set the Page Size to 50 to ensure staff can view a large number of records while maintaining performance.

---

Related

See these pages for related area configuration:

• 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