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.

To show the site name next to the logo, click your site’s header and, in the right-hand panel, turn on Also show the site name: the image sits on the left and the name on the right, in your style’s typography.

Matching the colours to your brand

The simplest way: in Brand color, type your colour code (#rrggbb) or pick it on screen with the eyedropper. The style derives its whole palette from it, keeping text readable.

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.

Your own fonts

From the Premium edition, the My fonts section of the Typo tab adds your brand fonts: .woff2, .woff, .ttf or .otf files.

1. Tick I have the right to use these fonts on a website. Many commercial fonts need a “web” licence.
2. Click Add a font… and choose your files. Add every style of a family (regular, bold, italic): TOWeb reads the family name, weight and italic from each file, and groups them by itself.
3. Choose your font at the top of the Display font or Body font list.

Your fonts show right away in the editor, are saved in the site (backups and copies included) and published with it, without relying on any online service. There is no code to paste and no archive to prepare.

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.