Colours, fonts and dark mode

Your logo

In Theme › Colors, add your Logo. If your site is also shown in dark mode, add a Dark mode logo: a light version of your logo that stays legible on a dark background.

Matching the colours to your brand

Still in Colors, the tonality setting lets you shift a single hue: all the site’s colours are recalculated from it, keeping the lightness and contrast intended by the style. The result stays legible.

• Hue and Intensity: the main colour.
• Secondary color: Analogous (default), Complementary or Triad. Some styles have none and pair their main colour only with black and greys.
• Background: from the style’s tone to neutral (white or black).

The Derived colors are shown as swatches, with a contrast indicator: “sufficient contrast (AA)”, or a warning if a text may be hard to read. A reset button brings back the style’s original colours.

Fonts

The Type tab offers two choices: the Display font (headings) and the Body font. Leave them at the default value to keep the style’s own fonts.

Dark mode

In Theme › Colors, the Light or dark, for your visitors section offers:

• Follow the visitor: the site follows, live, the light or dark setting of each visitor’s device. When their computer or phone switches to dark in the evening, the site switches to dark with it. A button on the site lets them choose the other mode; that choice lasts until their device’s setting next changes;
• Always light: the site is always shown in light mode, with no toggle button;
• Always dark: always dark, with no toggle button.

Some styles exist only in light or only in dark: TOWeb tells you so, and the site is then always shown in that mode.