Colours, fonts and words

Colours

The colours the theme uses are named in _includes/css/theme.css, as plain CSS. Each one has a light and a dark value, written light-dark(light, dark):

--brand: light-dark(var(--mint-400), var(--mint-300));

The ones you’re most likely to change:

Name	Used for
--page	The page background
--band	The background of tone: band sections
--surface	Cards
--ink	Text
--brand	Buttons and other fills. Text on it is always dark.
--brand-ink	Mint links and text (darker in light mode so small text stays readable)
--highlight	The amber of rating stars

You can use any colour value, for example --brand: light-dark(#5b6cf0, #9aa5ff);. Check that text on it is still readable with a contrast checker such as WebAIM’s: 4.5 to 1 for normal text.

The raw colour scales (mint, graphite, amber and red, from 50 to 950) are in _includes/css/colors.css. Edit the mint values there to re-colour the whole brand at once, or point the names in theme.css at different values.

Light and dark mode

Izar is dark by default. Three settings in _config.yml control how it behaves (see Site settings):

• color_scheme is dark, light or auto. auto follows each visitor’s system setting.
• theme_switch: true adds a round light/dark button in the header. A visitor’s choice is remembered in their browser, and color_scheme sets where they start. Without the button, color_scheme applies to everyone.
• reveal: true makes sections fade in as they scroll into view. It’s one small script with no library, and visitors who ask their device for less motion never see it. The hero and page headers never fade in. Set reveal: false to turn it off.

Section backgrounds

Sections can take a different background with tone:: default, band or mint. See Sections.

Fonts

Everything uses JetBrains Mono, self-hosted in assets/fonts/ as one variable file of about 40 KB (every weight from 100 to 800, Latin letters). It’s licensed under the SIL Open Font License (assets/fonts/OFL.txt).

Izar also describes fallback fonts scaled to match JetBrains Mono, so nothing jumps while it loads.

To use another font:

1. Put its .woff2 file in assets/fonts/.
2. Update the @font-face rules in _includes/css/fonts.css.
3. Update the preload link in _includes/head.html.
4. Change --font-display, --font-body and --font-mono in _includes/css/scale.css.

A proportional font changes how every line breaks, so check each page afterwards.

Sizes and spacing

Type sizes, spacing, the page width (--wrap) and the width of reading columns (--wrap-narrow) are in _includes/css/scale.css. They grow smoothly between phone and desktop, so one value works on every screen.

The theme’s words: _data/strings.yml

Every word and phrase Izar prints by itself is in _data/strings.yml: “Menu”, “Send message”, “Previous”, “min read”, “Visit site”, the 404 page and more. Reword or translate any line and it changes everywhere.

read: "Lire"
min_read: "min de lecture"
send_message: "Envoyer le message"
date_format: "%d/%m/%Y"

• Delete a line and the English text built into the theme is used instead.
• Set lang: in _config.yml to match (lang: fr), so browsers and screen readers use the right language.
• Month names always come out in English. For another language, use a numeric date_format such as "%d/%m/%Y".
• The footer words, the form’s labels and the author bio (author_bio) are in this file too.

Your own content isn’t in this file. Pages, notes and projects hold their own words, and settings such as izar.footer are in _config.yml.