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.

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

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.

How to setup the light/dark style settings for elements

This is accessible within the styles manager, you can use the same toggling method in the editor to toggle to the settings for each element.

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.