Themes

Bark includes nine built-in themes and four levels of customization:

1. Built-in theme: one value in config.json.
2. CSS variables: palette and font overrides.
3. custom.css / custom.js: arbitrary styling and scripting.
4. Theme class: a theme shipped as code.

Brand colors and dark-mode settings: CSS variables.

Picking a theme ​

theme in docs/config.json selects the theme:

{
  "theme": "forest"
}

Default: default. Changes apply through hot reload without a restart.

A dark or light suffix pins the color scheme, for example "theme": "forest dark". A pinned scheme removes the theme toggle and ignores the OS preference. Without a suffix, the toggle is shown and the OS preference applies.

Every theme defines light and dark palettes, including signal, laserwave and space.

Built-in palettes are generated in OKLCH from a few seeds per theme (see Writing your own theme). Surfaces step by the same perceptual amount in every theme; text, accent and alert colors are solved against the surfaces they sit on to clear WCAG AA in both modes.

An unrecognized name logs a warning and falls back to default.

Former names still resolve: forest-ledger (forest), signal-dark (signal), blueprint-grid (blueprint), deep-space (space).

Alternative sources:

dotnet run --project src/Bark -- --theme signal
dotnet run --project src/Bark -- --export ./out --theme blueprint

What a theme controls ​

Colors, fonts, icon treatment, card treatment and hero styling.

Themes do not affect navigation, content, URLs or front matter.

The theme folder ​

File locations:

CSS variables ​

Colors and fonts are CSS variables. The active theme defines all of them; overrides replace individual values.

Defaults (default theme, light mode):

Set overrides in theme.json or in Docs:Themes in appsettings.json. Field names are the variable names in PascalCase:

{
  "primaryColor": "#7c3aed",
  "fontSans": "'Inter', system-ui, sans-serif",
  "darkMode": true
}

{
  "Docs": {
    "Themes": {
      "PrimaryColor": "#7c3aed",
      "FontSans": "'Inter', system-ui, sans-serif",
      "DarkMode": true
    }
  }
}

Additional fields:

Escape hatches ​

custom.css and custom.js cover changes beyond palette and fonts.

wwwroot/theme/custom.css:

/* Bark's CSS variables don't expose border-radius, so override the rule directly. */
.search-trigger {
  border-radius: 999px;
}

wwwroot/theme/custom.js:

document.addEventListener('DOMContentLoaded', () => {
  console.log('Custom theme JS loaded.');
});

custom.css loads after the built-in stylesheet; equal-specificity selectors override it. custom.js loads with defer, before the built-in script initializes search, the sidebar and dark mode. Code that depends on them should run on DOMContentLoaded.

Writing your own theme ​

A theme is a class implementing IBarkTheme in src/Bark/Services/Theming/Themes/. A ThemePalette derives both modes from seed hues:

namespace Bark.Services.Theming.Themes;

public sealed class MidnightTheme : IBarkTheme
{
    public string Name => "midnight";

    public string Label => "Midnight";

    private static readonly ThemePalette Palette = new()
    {
        Neutral = new(265, 0.012),
        Accent = new(270, 0.16),
        DarkGround = 0.15
    };

    public IReadOnlyDictionary<string, string> LightTokens { get; } = Palette.Light();

    public IReadOnlyDictionary<string, string> DarkTokens { get; } = Palette.Dark();

    public string ComponentCss => """
                .bark-feature {
                    border-radius: 0;
                }
        """;
}

ThemePalette seeds:

Chroma beyond the sRGB gamut is reduced at the same lightness and hue. Alert colors keep their hue families (note blue, tip green, important violet, warning amber, caution red) with lightness solved per theme.

LightTokens and DarkTokens also accept literal dictionaries of hex or oklch() values in place of a palette.

Register it in ThemeRegistry.All:

public static IReadOnlyList<IBarkTheme> All { get; } =
[
    new DefaultTheme(),
    new ForestTheme(),
    new SignalTheme(),
    new BlueprintTheme(),
    new OceanTheme(),
    new SpaceTheme(),
    new SolarizedTheme(),
    new LaserwaveTheme(),
    new MidnightTheme()
];

"theme": "midnight" then selects it.

Rules enforced by the test suite:

• Both modes. Every literal color in LightTokens requires a counterpart in DarkTokens.
• The eight palette keys are required. --bg-color, --sidebar-bg, --text-color, --text-muted, --accent, --accent-light, --border, --code-bg. Other values (alert hues, fonts, shadows, aliases) default from ThemeDefaults.
• Contrast. Text, muted text, accent and alert colors require at least 4.5:1 against the background in both modes (WCAG 1.4.3); accent also against --accent-light. dotnet test --filter ThemeContrastTests reports measured ratios.
• Gamut. Generated oklch() values stay inside sRGB.

ComponentCss is appended after the built-in stylesheet in the same <style> element; !important is not required.

Limitations ​

Themes change presentation only: header structure, sidebar behavior and per-page layouts are fixed.

Structural changes require modifying Bark source. There is no plugin system by design.