Aeropage Documentation

Setup your Project

Setup your Theme

The theme controls the colors, text and overall style of the content (blocks) in your templates and pages but not the content itself. Every theme has the same variables, so when you add content from other projects or libraries they will automatically stitch to your theme styles and colors.

⁠

Managing Themes

You can manage themes in your project from the main dashboard, create new ones or click to open the editor.

⁠

You can just modify the default theme instead of creating and applying a new one.

Applying Themes to Branches

Theme are applied at the root and inherited by pages in the branch. So if your public and portal branches need different branding, you can apply a different theme to each root.

⁠

⁠

Editing Themes

To edit a theme, click on it from the manager or inside the page editor (see below).

Upload Logos

You can upload a logo for both light and dark context, so that each is available whenever required - and if the system detects a dark container background the relevant logo will be applied.

⁠

⁠

Apply Overlay

To save you time converting an existing logo - you can upload the same logo for both modes and just toggle the apply overlay option (as long as the logo has transparency) to switch it to solid black or white.

Background Colors

The colors shown behind each logo are the background colors for the theme, they should complement the logos. These will also be available as variables.

Theme Colors

You can use three colors to create a palette, though most of the time not all will be used. For each of your theme colors an entire range of tints and shades will be automatically produced in your palette as variables. A range of greyscale values from white to black is also available,

⁠

⁠

Color Generator

If your brand is still in early stages or you don’t have a three color palette, you can use the color generator to automatically create colors. Just provide a primary color, then choose which algorithm to use for the generation.

Dark Theme

You can switch a theme to default as dark or see how it will behave when it automatically detects a dark context (container) and switches modes.

⁠

⁠

If you leave this option toggled on it will make your entire project dark by default.

Theme Text, Classes & Fonts

You can customize the theme fonts using any google font. The fonts will be loaded from the Aeropage backend (api) and not directly from Google servers. There are also HTML classes (p, H1,2,3,4) that can be customized as needed.

Text components will use the styles from the theme / class unless an override is added.

From the Page editor

In the page editor you can also see and control various aspects of the theme system.

Edit the theme

From the page level controls, under theme - click the name of the active theme to open the theme editor.

Changes to the theme will appear on the page after a few seconds.

⁠

⁠

Choose a different theme

To override the inherited theme, switch the theme from inherit to custom then choose the desired theme.

⁠

⁠

Automatic Color Mode

When a dark background color for a container is detected - the color mode will automatically switch to light colors for everything inside the container. You can override this by changing the mode from automatic to either light or dark.

⁠

⁠

Component Styles

In components, most style settings are inherited from the theme - but can be overriden / set explictly instead.

⁠

⁠

Dynamic Branding

It’s worth noting that you are not limited to using theme variables - you can also hide the template blocks and add logo and colors to a page with dynamic variables from any data source.

To access variables in color fields, click the database icon at the top right of the palette.

⁠

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.