Theme
The Theme tab in Settings allows you to define the global visual identity and default display behavior for your entire project. These settings serve as the default for all Areas, ensuring a consistent look and feel across your workspace.
Project-level configurations serve as global defaults. They can be overridden by specific Area configurations in Areas → Theme, allowing for departmental or role-specific branding (e.g., a "dark mode" warehouse interface).
Configuring Project Theme and Display
Follow these steps to customize the global look and feel of your project:
- Navigate to Settings in the top navigation.
- Click the Theme tab in the left sidebar.
- Toggle Enable Theme Configuration to begin customizing the visual settings.
- Select a Default Theme or enable Custom Theme to provide a custom configuration.
- Upload Light Mode and Dark Mode logos in the Logo Upload section.
- Enable Display Settings to configure global layout behavior for Forms, List View, and Detail View.
- Click Save Changes to apply the configuration.
Reference
Theme Settings
Define the default visual style for the project interface.
View all settings
| Setting | Description |
|---|---|
| Default Theme | A list of pre-configured themes: Default, Amber Minimal, Amethyst Haze, Bold Tech, Bubble Gum, Caffeine, and Candyland. |
| Custom Theme | A toggle to enable the input of custom configuration code. |
| Theme Code | The code field for CSS or JSON theme definitions. Supports Tailwind v4 and OKLCH color formats. |
Visit 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.
View logo constraints
| 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 the default presentation logic for notifications, forms, and data tables across the project.
General
Configure system-wide default display behavior.
View General settings
| Setting | Description |
|---|---|
| Display Mode | Determines the default method for showing system messages and notifications (e.g., Notification, Toast). |
Forms
Define the default layout and behavior for creating and editing records.
View Forms settings
| Setting | Description |
|---|---|
| Use Shared Form | When enabled, the Add Form configuration applies to both add and edit operations by default. |
| Display Mode | The layout style for the form. Choose between Modal, Drawer, or Card. (New Page is currently in development). |
| 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. |
List View
Control the default presentation and interaction logic for data tables.
View List View settings
| Setting | Description |
|---|---|
| Display Mode | The default layout style for record tables. Currently defaults to Table. |
| Enable Pagination | A toggle to enable results paging across the project. |
| Enable Infinite Scroll | A toggle to load records continuously by default. Requires Enable Pagination to be active. |
| Page Size | The default number of records displayed per page or loaded per scroll batch. |
| Max Records | The default maximum number of records to fetch. Available only when Infinite Scroll is disabled. |
| Filter Setting | Description |
|---|---|
| Display Mode | The default appearance for filter interfaces (e.g., Modal, Drawer, or Card). |
| Columns Per Row | The default number of filter fields displayed per horizontal row (1-4). |
| Width | The default layout width in pixels. Available for Modal and Drawer modes. |
| Drawer Position | The default placement of the drawer (Left, Right, Top, or Bottom). Available for Drawer mode. |
Detail View
Customize the default presentation for individual record details.
View Detail View settings
| Setting | Description |
|---|---|
| Display Mode | The default layout style for detail views. Choose between Modal, Drawer, or Card. (New Page is currently in development). |
| Columns Per Row | The default number of fields displayed per horizontal row (1-4). |
| Width | The default layout width in pixels. Available for Modal and Drawer modes. |
| Drawer Position | The default placement of the drawer (Left, Right, Top, or Bottom). Available for Drawer mode. |
Related
- Settings Overview
- Area Theme — Learn how to override these settings for specific Areas