Light and dark

Every branded template is set up for either a dark or a light background. Flipping it does a lot at once, so you never recolor things by hand.

What flips

• Text colors switch to the versions tuned for the new background.
• The logo swaps to the one made for that background.
• Highlights flip so they still stand out.
• Panels and buttons switch to their matching shades.

One click, and the whole creative reads correctly on the other background.

Keeping something fixed

Sometimes you want a piece to stay one color no matter what, like a button that's always on your accent, or a highlight that matches a photo. You can pin those so they don't flip, and leave everything else to follow the background.

When part of the design sits on the other background

A dark design often has a light card inside it — a sign under a photo, a sticker, a highlight band. Text on that card should be dark even though the design is dark.

That's what the Inverted option in the color controls does. Every Color and Background control starts with two choices, each showing the color it resolves to right now:

• Auto — follows the design's background, and keeps flipping with the scheme (the default).
• Inverted — sits on the scheme's opposite surface: the card. Its colors resolve against the other side, and they keep flipping correctly every time you change scheme. Set the card's Background to Inverted and the text on it to Inverted, and the whole sign stays readable on every scheme.
• Text (shapes only) — the fill follows the scheme's text color. For separator lines and dividers that should read like the copy next to them.

One sentence to remember: Inverted says which surface an element sits on; everything automatic follows that surface; anything you picked by hand still wins. Prefer Auto or Inverted over hand-picking a color — a hand-picked color doesn't flip with the scheme, these do. (In template JSON this is the element's tone field.)

Beyond light and dark

You can also save named color schemes, say "Midnight" or "Sunrise", and switch a template to one of those the same way you flip light and dark. Concept templates are the exception: an iMessage screen isn't light or dark, it just is, so the toggle is hidden for them.