Skip to main content

Styling for Light and Dark Backgrounds

How to adjust the elements in a section for light/dark​

Adjusting a section to compensate for a light or dark background can be done in the main toolbar. To do this, simply select the correct T icon.

T Icon

The white "T" with a black background is used to toggle lighter text/element colors when the background is darker.

Dark Background

The black "T" with a white background is used to toggle darker text/element colors when the background is lighter.

The blue outline indicates which is currently active. One must always be active since it contains the style settings for that section.

This is accessible within the styles manager, you can use the same toggling method in the editor.

Typography​

Note: Toggling isn't available for blog typography since by default blog is a lighter background.

You'll notice in the video above when toggled to dark background, the app will place your preset color for dark background behind the text and show the editable settings.

Since the light background is the primary setting for elements, that is where things like font-family, size, and more will be set. Whereas, dark background settings are simply there to adjust the color so it can easily be seen when the background is of darker coloration.

Quotes​

When toggling a quote, you'll be able to edit the mark and text color for darker background.

Highlight​

Since highlight is simply the solid color line that appears below text when it is enabled, you're able to entirely change the color selected for both light and dark backgrounds.

Buttons​

Buttons have a lot of options for changes between light and dark backgrounds. However, alike typography, you cannot change font-family or sizing.