The Theme Builder in the Edlio App platform controls your mobile application's visual branding, color palettes across Light and Dark modes, home screen layout type, and icon styling.
Accessing Theme Builder
In the Edlio App dashboard, click App Builder in the left sidebar.
Select the Theme Builder tab.
The configuration screen opens with side-by-side color cards for Light Mode and Dark Mode, followed by layout and typography settings.
Configuring Brand Colors
Colors are assigned via standard hexadecimal codes (e.g., #222D67) to ensure exact alignment with your district or school style guide:
Primary Color: The foundational brand color displayed most prominently across app headers, toolbars, active navigation elements, and primary buttons.
Secondary Color: An accent color used to highlight interactive elements, notification badges, and secondary callouts.
Surface Color: The background color for cards and container panels (defaults to clean transparent/neutral if unassigned).
Icon Background: The background fill behind content page icons (leave transparent/none for modern flat designs).
đĄ Best-Practice Adoption Tip: Dark Mode Contrast
When configuring Dark Mode, avoid using very dark navy or black as your primary color, as it will blend into the dark system background. Instead, set your high-contrast secondary color (such as school gold or white) as the primary accent in Dark Mode so headers and active buttons remain crisp and accessible.
Home Screen Layout & Settings
Under the Settings panel, customize your home screen presentation:
Home Type: Controls how users browse your main features on the mobile home screen:
Grid Menu Horizontal: Displays features as icon tiles in paged horizontal swipe screens (indicated by pagination dots at the bottom).
Grid Menu Vertical: Displays an unpaged, vertically scrolling grid of feature tiles.
Highlights: Replaces the static icon grid with a dynamic feed of featured news announcements, upcoming events, and media cards drawn automatically from your newsfeed.
Font Family: Set to System Default Font for optimal native iOS/Android legibility, or select a custom approved web font to match your school brand.
Use Multi-Color Icons: When enabled, uploaded icons retain their original full-color illustrations rather than being automatically tinted with the primary theme color.
đĄ Best-Practice Adoption Tip: Choosing a Home Menu Type
Grid Menu Vertical is the most popular layout choice for school mobile apps. Switching your Home Type to vertical allows families and community members to naturally scroll through all of your app buttons and features on a single continuous screen, rather than needing to swipe across multiple horizontal pages.
Saving and Testing Your Theme
Click the green Save button at the top of the Theme Builder.
Click Open In Browser at the top right of the page to launch your school's live web app preview and inspect how your color choices and home layout render on real devices.