Skip to main content

Theme

The Theme tab sets the global visual identity and default display behavior for your project. These settings apply to all Areas and can be overridden per Area. Go to Settings → Theme to access these settings.

note

Project-level theme settings are global defaults. Override them per Area in Areas → Theme for departmental or role-specific branding.

Theme and display​

  1. Go to Settings in the top navigation.
  2. Click the Theme tab in the left sidebar.
  3. Click the Enable Theme Configuration toggle 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 set global layout behavior for Forms, List View, and Detail View.
  7. Click Save Changes to apply the configuration.

Settings reference​

Theme settings​

Define the default visual style for the project interface.

SettingDescription
Default ThemeA list of pre-configured 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 CodeThe code field for CSS or JSON theme definitions. Supports Tailwind v4 and OKLCH color formats.
tip

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

Logo upload​

Manage global branding for both light and dark display modes.

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

Display configuration​

Manage the default presentation logic for notifications, forms, and data tables across the project.

General​

Set system-wide default display behavior.

SettingDescription
Display ModeDetermines the default method for showing system messages and notifications (uses Sonner).

Forms​

Define the default layout and behavior for creating and editing records.

SettingDescription
Use Shared FormWhen enabled, the Add Form configuration applies to both add and edit operations by default.
Display ModeThe layout style for the form. Choose between Modal, Drawer, or Card.
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.
Use Field IconsEnable to display field icons in generated forms.

List view​

Control the default presentation and interaction logic for data tables.

SettingDescription
Display ModeThe default layout style for record tables. Defaults to Table.
Enable PaginationWhen turned on, enables results paging across the project.
Enable Infinite ScrollTurn on to enable infinite scroll loading for records.
Page SizeThe default number of records displayed per page or loaded per scroll batch.
Max RecordsThe default maximum number of records to fetch.

The following settings apply to the filter panel in list views:

Filter settingDescription
Display ModeThe default appearance for filter interfaces (for example, Modal, Drawer, or Card).
Columns Per RowThe default number of filter fields displayed per horizontal row (1–4).
WidthThe default layout width in pixels. Available for Modal and Drawer modes.
Drawer PositionThe default placement of the drawer (Left, Right, Top, or Bottom). Available for Drawer mode.
Use Field IconsEnable to display field icons in filters.

Detail view​

Set the default presentation for individual record details.

SettingDescription
Display ModeThe default layout style for detail views. Choose between Modal, Drawer, or Card.
Columns Per RowThe default number of fields displayed per horizontal row (1–4).
WidthThe default layout width in pixels. Available for Modal and Drawer modes.
Drawer PositionThe default placement of the drawer (Left, Right, Top, or Bottom). Available for Drawer mode.