Theme properties

Fontdue’s components and the pages it serves are styled with CSS custom properties, one per color role, named like --primary_text_color. The Settings → Theme tab writes values into these properties; this page lists every property, its default, and the property it inherits from when left unset.

On pages Fontdue serves, the values are written into a :root block in the page head. On your own site, embedded components fetch the same values through the GraphQL API and inject them the same way – so the properties exist wherever Fontdue components render, and you can also set them from your own stylesheet.

Base palette

The base palette covers text, backgrounds, links, and status colors. Several button properties below inherit from these, so changing a base color restyles the dependent buttons with it.

--cart_indicator_color fills the item-count indicator on the Cart Button.

Buttons

Generic buttons have properties for their resting, hover, and selected states. The selected state applies to toggle-style choices in the Store Modal, like the currently chosen license.

Action buttons

The three high-intent buttons – add to cart, checkout, and download – can be styled independently of the generic buttons. Each has the same six properties, and each property inherits from the corresponding --button_* property until you set it, so they all follow the generic button styling by default.

Setting properties from your own CSS

These are ordinary CSS custom properties, so your own stylesheet can set them too. Fontdue injects its values – including the defaults – at :root, so declare your overrides on a selector closer to the content, like body; a declaration on :root can lose to the injected block depending on stylesheet order. For example, to make only the checkout button stand out:

body {
  --checkout_button_background_color: #0000ff;
  --checkout_button_text_color: #ffffff;
  --checkout_button_border_color: #0000ff;
}

Values from your CSS and values from the Theme tab compose – the tab is the no-code path for the common case, and custom CSS takes over where you need selectors, media queries, or values per page.

This is also the way to support dark mode. The Theme tab sets one value per property, but a prefers-color-scheme media query can swap the palette to follow the visitor’s system setting. Because most button properties inherit from the base palette, overriding the base colors restyles the buttons with them – only the properties with fixed defaults, like --horizontal_rule_color and --button_selected_background_color, need their own dark values:

@media (prefers-color-scheme: dark) {
  body {
    --primary_text_color: #ffffff;
    --secondary_text_color: #888888;
    --primary_background_color: #111111;
    --secondary_background_color: #1d1d1d;
    --horizontal_rule_color: #333333;
    --link_color: #888888;
    --link_hover_color: #bbbbbb;
    --active_link_color: #bbbbbb;
    --button_selected_background_color: #333333;
  }
}