ByteEditor Website Builder

Customize Colors

⚠ Note

In ByteEditor 17, the colours of a design are theme tokens. You edit them as JSON on the design's “Theme” tab, and they apply to the whole site once you save and publish the design.

Step 1. Open the Design Builder

Click Design Builder in the Content section. It shows your designs as cards. The site uses the one marked Default Design; to switch to another design, click Set as Default Design on its card. A single page can also use a different design through its “Special design for the page” setting.

Step 2. Open the Theme tab

Click the design you want to change, then open the Theme tab. It holds the design's theme as JSON:

{
  "tokens": {
    "color.content.background": "#ffffff",
    "color.content.primary": "#222221",
    "color.button.fill": "#2986cc"
  },
  "variants": {
    "inverse": {
      "color.content.background": "#000000",
      "color.content.primary": "#ffffff"
    }
  }
}

“tokens” holds the base values used across the site. “variants” holds the colour overrides for the theme variants that blocks can pick (see Theme variants below).

Step 3. Change a colour

Find the token and change its value. For example, to change the fill of the main buttons, set “color.button.fill” to a new colour. Colours are hex values: #rrggbb, or #rrggbbaa with transparency. A token that isn't in the JSON uses its default value (see the tables below).

💡 An invalid value (for example, a colour name such as “red”) or a misspelled token key doesn't break the site: it is ignored and the default is used instead. If a change has no effect, check the key and the value.

Step 4. Save and publish

Click Save and publish. The site's styles are regenerated automatically.

Colour tokens

Content

Token	What it colours	Default
color.content.background	Page and section background	#ffffff
color.content.h1 … color.content.h6	Headings 1–6	#000000
color.content.primary	Main text	#000000
color.content.secondary	Secondary text	#000000
color.content.border	Borders and dividers	#5b5b5b
color.content.link	Links	#74e5a1
color.content.link-hover	Links on hover	#7cb19d

Button

Token	What it colours	Default
color.button.fill	Button background	#74e5a1
color.button.fill-hover	Button background on hover	#1b646a
color.button.stroke	Button border	#74e5a1
color.button.stroke-hover	Button border on hover	#1b646a
color.button.text	Button text	#ffffff
color.button.text-hover	Button text on hover	#ffffff

Button Secondary (outline button)

Token	What it colours	Default
color.button-secondary.fill-hover	Button background on hover	#ffffff
color.button-secondary.stroke	Button border	#74e5a1
color.button-secondary.stroke-hover	Button border on hover	#1b646a
color.button-secondary.text	Button text	#74e5a1
color.button-secondary.text-hover	Button text on hover	#1b646a

Header

Token	What it colours	Default
color.header.background	Header background	#ffffff
color.header.dropdown-background	Dropdown menu background	#ffffff
color.header.dropdown-background-hover	Dropdown menu item on hover	#f8f9fa
color.header.link	Menu links	#000000
color.header.link-hover	Menu links on hover	#7cb19d
color.header.border	Header border	#000000

Footer

Token	What it colours	Default
color.footer.background	Footer background	#000000
color.footer.link	Footer links	#ffffff
color.footer.link-hover	Footer links on hover	#7cb19d
color.footer.title	Footer column titles	#ffffff
color.footer.copyright-message	Copyright message	#ffffff

Card Hover

Hover colours of cards with a link, used when the card doesn't pick a hover variant of its own.

Token	What it colours	Default
color.card-hover.background	Card background on hover	#ffffff
color.card-hover.text	Card text on hover	#000000
color.card-hover.border	Card border on hover	#5b5b5b
color.card-hover.link	Card links on hover	#74e5a1
color.card-hover.link-hover	Card links on hover, when hovered themselves	#7cb19d

Theme variants

Variants let a block use a different colour scheme, for example a dark section on a light page. A design can define up to nine variants: “inverse”, “accent”, “muted” and “style-4” to “style-9”. A variant can only override the Content, Button and Button Secondary colours; any colour it doesn't override comes from the surrounding section (normally the base tokens). Blocks pick a variant in their “Theme Variant” field, which only offers the variants your design defines (see Add Individual Styling for Blocks and Elements).