Themes

A Theme defines the Homepage’s visual appearance, including its colors, fonts, accents, link styling, and shading.

Themes are controlled in . Copy the Template to create a Theme, then use the Setup to adjust it. The Setup covers Parameters, Fonts, Accents, and Colors.

Setup

Use these sections to configure a Theme.

Use these sections to configure a Theme.

Parameters

Key-value pairs that control the Theme.

Key-value pairs that control the Theme.

Preferences

Connect the theme to the Preferences.

Connect the theme to the Preferences.

Define the human readable name

Label: Tba // Set the name of the theme in the Preferences button

Choose the user selectability

Preferences: false // Control whether the theme can be selected by the user

Adjust the panel shadow

PanelShadow: contrast 20 // Set the color and strength of the shade

Design

Control the typography of content links.

Control the typography of content links.

Select the initial accent color

DefaultAccent: Blue // Choose a given accent color to paint first. The value must exactly match one of the labels defined under `Accents`.

Select resting link color

LinkColor: none // Choose the standard color of resting links. `LinkColor` affects inline content links only; it does not style Breadcrumbs, the Footer, settings, or table-of-contents links.

Select link decoration/offset

LinkUnderline: true 0 // Choose the standard decoration of resting links. `LinkUnderline` affects only inline content links. The optional number is a pixel offset: negative values move the underline closer to the text, positive values move it farther away. `false` hides the resting underline but preserves the hover/focus underline.

Chrome

Adjust the design of the page's chrome.

Adjust the design of the page's chrome.

Adjust logo outline color

LogoOutline: normal // Integrate the logo into the theme

Adjust logo area color

LogoArea: normal // Integrate the logo into the theme. This hides the Theme from the Preferences selector but does not disable it for Content frontmatter or existing saved Preferences.

Control Breadcrumb and Footer

ChromeShadow: default // Set Breadcrumb and Footer label/link shadows; separators are not affected.

Shade

Finetune the theme's shadow/glow.

Finetune the theme's shadow/glow.

Configure shadows and glows

ShadeCenter: 0px, 0px // Position the center of shading effects as top, left
ShadeColor: none // Select the shading color source or disables it
ShadeDuration: 0 // Control the shading transition duration
ShadeFocus: 0 // Control the focus/intensity multiplier of shadings
ShadeRadius: 0px // Adjust the radius of the shadings
ShadeStrength: 0.0 // Adjust the opacity/intensity of the shadings

Fonts

List of fonts and weights by element.

List of fonts and weights by element.

List: Font settings

- UI: Arial, Helvetica, sans-serif // Font families
- UI weight: 400 // Font weight
- Display: "Times New Roman", Times, serif // Font families
- Display weight: 700 // Font weight
- Body: "Times New Roman", Times, serif // Font families
- Body weight: 400 // Font weight
- Mono: "Courier New", Courier, monospace // Font families
- Mono weight: 400 // Font weight

List: Font roles [v]

UI: Navigation, Breadcrumbs, settings, controls, and buttons.
Display: Page and Presentation titles and significant content headings.
Body: Prose, introductions, lists, quotations, and reading-oriented tables.
Mono: Code, identifiers, timestamps, coordinates, and technical metadata.

Accents

List of accent colors the theme contains. The sample values only show the optional override syntax; choose your own colors.

List of accent colors the theme contains. The sample values only show the optional override syntax; choose your own colors.

Markdown list

Accents:

- Tba: #000000 // Replace name and color or delete
  - Light: #000000 // Optional exact Standard Readability text color for Light brightness
  - Dark: #000000 // Optional exact Standard Readability text color for Dark brightness
- Tba: #000000 // Replace name and color or delete
- Tba: #000000 // Replace name and color or delete
- Tba: #000000 // Replace name and color or delete
- Tba: #000000 // Replace name and color or delete
- Tba: #000000 // Replace name and color or delete

The indented and entries are optional text-color overrides for the matching brightness. They affect Standard Readability only and are used exactly as written, even if their contrast is below the automatic target. Without an override, Standard keeps the base accent when it reaches in Light brightness or in Dark brightness against a Theme Background, Surface, or Panel; otherwise it derives the nearest shade that reaches that mode's target. Enhanced Readability ignores these overrides and derives a shade that reaches in both brightness modes. These derived colors apply to accent-colored text, links, and list markers on flat Theme surfaces. Fading line-art images and their captions in gallery bands use the active Background shade as the accent-gradient endpoint, including the caption underline on hover or focus. Accent link underlines follow the same derived shade as their text; unrelated decorative uses retain the base accent. Text over raster images and slides keeps its separate treatment.

The generated CSS exposes the active text colors as , , and , with the Standard and Enhanced Light/Dark variants also available at the root. Accent-colored borders over transparent Theme Background, Surface, or Panel areas use the matching active variant. When a secondary-button hover fills with the accent, its border layers match that fill; other accent fills, standalone icons, and decorative uses retain the base accent.

Colors

Table of colors to be used, by brightness.

Table of colors to be used, by brightness.

Markdown table

Colors:

| Token             | Light   | Dark    |
|-------------------|--------:|--------:|
| Logo glow         | #0000FF | #0000FF |
| Main              | #000000 | #FFFFFF |
| Muted             | #666666 | #C0C0C0 |
| Subtle            | #999999 | #808080 |
| Background        | #FFFFFF | #111111 |
| Surface           | #FFFFFF | #111111 |
| Panel             | #F0F0F0 | #202020 |
| Border            | #C0C0C0 | #808080 |
| Strong border     | #000000 | #FFFFFF |
| Control           | #000000 | #FFFFFF |
| Control secondary | #666666 | #C0C0C0 |
| Control disabled  | #C0C0C0 | #666666 |

Template

Here is a template to copy and paste.

Here is a template to copy and paste.

Markdown

## tba // The internal id of the theme

// Preferences
Label: Tba // Define the human readable name
Preferences: false // Choose the user selectability
PanelShadow: contrast 20 // Adjust the panel shadow

// Design
DefaultAccent: Blue // Select the initial accent color
LinkColor: accent // Select resting link color
LinkUnderline: true 0 // Select link decoration/offset

// Chrome
LogoOutline: black // Adjust logo outline color
LogoArea: white // Adjust logo area color
ChromeShadow: none // Control Breadcrumb and Footer

// Shade
ShadeCenter: 0px, 0px // Position the center of shade as top, left
ShadeColor: none // Select the shade color source or disable
ShadeDuration: 0 // Control the shade transition duration
ShadeFocus: 0 // Control the focus/intensity multiplier of shades
ShadeRadius: 0px // Adjust the radius of the shade
ShadeStrength: 0.0 // Adjust the opacity of the shade

Accents:

- Tba: #000000 // Replace name and color or delete
- Tba: #000000 // Replace name and color or delete
- Tba: #000000 // Replace name and color or delete
- Tba: #000000 // Replace name and color or delete
- Tba: #000000 // Replace name and color or delete
- Tba: #000000 // Replace name and color or delete

Fonts:

- UI: Arial, Helvetica, sans-serif // Font families
- UI weight: 400 // Font weight
- Display: "Times New Roman", Times, serif // Font families
- Display weight: 700 // Font weight
- Body: "Times New Roman", Times, serif // Font families
- Body weight: 400 // Font weight
- Mono: "Courier New", Courier, monospace // Font families
- Mono weight: 400 // Font weight

Colors:

| Token             | Light   | Dark    |
|-------------------|--------:|--------:|
| Main              | #000000 | #FFFFFF |
| Muted             | #666666 | #C0C0C0 |
| Subtle            | #999999 | #808080 |
| Background        | #FFFFFF | #111111 |
| Surface           | #FFFFFF | #111111 |
| Panel             | #F0F0F0 | #202020 |
| Border            | #C0C0C0 | #808080 |
| Strong border     | #000000 | #FFFFFF |
| Control           | #000000 | #FFFFFF |
| Control secondary | #666666 | #C0C0C0 |
| Control disabled  | #C0C0C0 | #666666 |
| Logo glow         | #0000FF | #0000FF |