Skip to main content

Theme

The Theme tab allows you to 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.

info

Area-level theme and display configurations override global settings defined in Settings → Theme. This allows you to create distinct visual identities for different departments or user groups (e.g., a "dark mode" warehouse interface vs. a "light mode" admin portal).

Configuring Theme and Display​

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

  1. Navigate to Areas and select the Area you wish to configure.
  2. Click the Theme tab.
  3. Toggle Enable Theme Configuration to begin customizing the visual settings.
  4. Select a Default Theme or enable Custom Theme to provide a custom configuration.
  5. Upload Light Mode and Dark Mode logos in the Logo Upload section.
  6. Enable Display Settings to configure layout behavior for Forms, List View, and Detail View.
  7. Click Save Changes to apply the configuration.

Reference​

Theme Settings​

Define the core visual style of the Area interface.

View all settings
SettingDescription
Default ThemeA list of curated themes: Default, Amber Minimal, Amethyst Haze, Bold Tech, Bubble Gum, Caffeine, and Candyland.
Custom ThemeA toggle to enable the input of custom configuration code.
Theme CodePaste custom CSS or JSON theme definitions. Supports Tailwind v4 and OKLCH color formats.
info

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.

View logo constraints
ConstraintRequirement
File TypesSVG, PNG, JPEG, JPG
Max Size1MB
Aspect RatioRecommended 2:1. An integrated cropping tool is available during upload.

Display Configuration​

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

General​

Configure system-wide display behavior for the Area.

View General settings
SettingDescription
Display ModeDetermines how system messages and notifications are shown (e.g., Notification, Toast).

Forms​

Define the layout and behavior for creating and editing records.

View Forms settings
SettingDescription
Use Shared FormWhen enabled, the Add Form configuration applies to both add and edit operations.
Display ModeThe layout style for the form. Choose between Modal, Drawer, or Card. (New Page is currently in development).
Columns Per RowThe number of fields displayed per horizontal row (1-4).
WidthThe layout width in pixels. Available for Modal and Drawer modes.
Drawer PositionThe placement of the drawer (Left, Right, Top, or Bottom). Available for Drawer mode.

List View​

Control the presentation and interaction logic for data tables.

View List View settings
SettingDescription
Display ModeThe layout style for record tables. Defaults to Table.
Enable PaginationA toggle to enable results paging. Enabling this reveals further configuration options.
Enable Infinite ScrollA toggle to load records continuously as the user scrolls. Requires Enable Pagination to be active.
Page SizeThe number of records displayed per page or loaded per scroll batch.
Max RecordsThe maximum number of records to fetch in total. Only available when Infinite Scroll is disabled.
Filter SettingDescription
Display ModeHow the filter interface appears (e.g., Modal, Drawer, or Card).
Columns Per RowThe number of filter fields displayed per horizontal row (1-4).
WidthThe layout width in pixels. Available for Modal and Drawer modes.
Drawer PositionThe placement of the drawer (Left, Right, Top, or Bottom). Available for Drawer mode.

Detail View​

Customize how individual record details are presented.

View Detail View settings
SettingDescription
Display ModeThe layout style for record details. Choose between Modal, Drawer, or Card. (New Page is currently in development).
Columns Per RowThe number of fields displayed per horizontal row (1-4).
WidthThe layout width in pixels. Available for Modal and Drawer modes.
Drawer PositionThe 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: Enable Custom Theme 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: Enable Infinite Scroll with a Page Size of 50 to allow staff to quickly scan long inventory lists without clicking through pages.