Colors¶

The main purpose of Flexoki for Zensical is to bring the Flexoki palette into Zensical without introducing a separate theming model. All of the normal Zensical theme styling and configuration still applies. You can keep using regular settings such as features, icon, font, variant, custom CSS, and the rest of the usual Zensical theming surface.

Color palette¶

Color scheme¶

Flexoki for Zensical supports the two color schemes defined by Zensical: a light mode called default, and a dark mode called slate. The color scheme can be set via configuration:

zensical.tomlmkdocs.yml

[project.theme.palette]
scheme = "default"

theme:
  palette:
    scheme: default

Primary color¶

The primary color is used for text links, and in the classic theme, for the header and the sidebar. In order to change the primary color, set the setting to one of the preset names wired into this theme:

zensical.tomlmkdocs.yml

[project.theme]
palette.primary = "blue"

theme:
  palette:
    primary: blue

Click on a tile to preview the primary color:

Accent color¶

The accent color is used to denote elements that can be interacted with, e.g. hovered links, buttons, and scrollbars. It can be changed in your configuration by choosing one of the preset names wired into this theme:

zensical.tomlmkdocs.yml

[project.theme]
palette.accent = "blue"

theme:
  palette:
    accent: blue

Click on a tile to preview the accent color:

Extended palette¶

The theme exposes two kinds of color variables:

semantic theme variables like --md-default-fg-color and --md-accent-fg-color
raw Flexoki palette tokens like --flexoki-blue-600 and --flexoki-paper

The semantic variables adapt automatically across light and dark mode.

The preset colors come from Flexoki's eight chromatic families: red, orange, yellow, green, cyan, blue, purple, and magenta. Those families are mapped into Zensical's primary and accent slots using the Flexoki-recommended emphasis steps:

light mode: 600
dark mode: 400

If you need more control than the preset names provide, the full raw Flexoki palette is available for CSS overrides.

When in doubt, inspect src/flexoki_zensical/assets/stylesheets/flexoki.css in the repository.

A practical override pattern¶

Use semantic variables to define a component once so it adapts across schemes:

.callout-panel {
  background: var(--md-default-bg-color--light);
  color: var(--md-default-fg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  box-shadow: var(--md-shadow-z1);
}

.callout-panel a {
  color: var(--md-typeset-a-color);
}

Raw Flexoki tokens¶

Reach for raw palette tokens when you need a brand-specific accent that should not follow the semantic accent slot, bespoke charts, diagrams, badges, or a deliberate contrast pair for a custom component.

Each chromatic family is available from 50 through 950.

.status-badge {
  background: var(--flexoki-green-600);
  color: var(--flexoki-paper);
}