Zeppelin StudioOpaline
  1. Docs
  2. Theme settings

Theme settings

Colors

Color schemes are named sets of colors — background, text, buttons — that every section can use. Change a scheme once and every section using it follows.

Open these settings#

  1. In the theme editor, click the Theme settings icon (the paintbrush) in the left toolbar.
  2. Click Colors to expand the group.
  3. Changes preview instantly. Click Save to publish them.

Settings#

Open Colors, then click a scheme to edit it or Add scheme to create one. Each scheme holds these colors:

ColorWhere it shows
BackgroundThe section background.
Background gradientAn optional gradient that replaces the background color.
TextHeadings and text.
Primary buttonThe fill of primary buttons.
Primary button textThe text of primary buttons.
Secondary button and linksOutline buttons and text links.
ShadowShadows of cards, buttons and panels.

The schemes of the demo store#

Opaline ships with these five schemes. Every section has a Color scheme setting that picks one of them.

Aa
Text and headings
Button
Scheme 1
Background #f3f3f1 · Text #151515
Aa
Text and headings
Button
Scheme 2
Background #eaeaea · Text #151515
Aa
Text and headings
Button
Scheme 3
Background #151515 · Text #f3f3f1
Aa
Text and headings
Button
Scheme 4
Background #333333 · Text #f3f3f1
Aa
Text and headings
Button
Scheme 5
Background #151515 · Text #f3f3f1
Good to know

Text must stay readable on its background: 4.5:1 contrast for body text, 3:1 for large headings. Dark text on a light background, or the reverse, keeps every scheme legible.