> ## Documentation Index
> Fetch the complete documentation index at: https://docs.blode.md/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Appearance and branding

Configure your logo, favicon, and light/dark mode behavior in docs.json.

Blode.md keeps site branding intentionally narrow. Use `logo`, `favicon`, and `appearance` in `docs.json` to control the parts of the visual identity that are currently supported. The `logo` and `favicon` shapes follow Mintlify's light and dark asset pattern, and Blode.md also accepts `logo.alt` for accessible text.

> [!INFO]
> Blode.md does not support Mintlify's `theme`, `colors`, `fonts`, `icons`,
>   `background`, or `styling` fields.

## Logo

Use `logo` to show a single mark everywhere or separate assets for light and dark mode.

  ### Tab

```json title="docs.json"
    {
      "logo": {
        "light": "/logo/light.svg",
        "dark": "/logo/dark.svg",
        "alt": "Example Co. logo",
        "href": "/"
      }
    }
    ```
  ### Tab

```json title="docs.json"
    {
      "logo": "/logo/logo.svg"
    }
    ```

- `light` (type: string): Logo image path or URL for light mode.
- `dark` (type: string): Logo image path or URL for dark mode.
- `href` (type: string): Optional destination when someone clicks the logo. Defaults to your docs homepage.
- `alt` (type: string): Accessible alt text for the logo image.

## Favicon

Use `favicon` for the browser tab icon.

```json title="Single favicon"
{
  "favicon": "/favicon.svg"
}
```

```json title="Light and dark variants"
{
  "favicon": {
    "light": "/favicon-light.svg",
    "dark": "/favicon-dark.svg"
  }
}
```

## Appearance

Use `appearance` to control the initial light or dark mode and whether readers can switch modes.

```json title="docs.json"
{
  "appearance": {
    "default": "dark",
    "strict": true
  }
}
```

- `default` (type: 'system' | 'light' | 'dark'): Default color mode. Choose `system`, `light`, or `dark`.
- `strict` (type: boolean): When `true`, locks the site to the default mode and hides the theme toggle.

## Example

```json title="docs.json"
{
  "$schema": "https://blode.md/docs.json",
  "name": "Example Docs",
  "slug": "example-docs",
  "logo": {
    "light": "/logo/light.svg",
    "dark": "/logo/dark.svg",
    "alt": "Example Co. logo",
    "href": "/"
  },
  "favicon": "/favicon.svg",
  "appearance": {
    "default": "system"
  },
  "navigation": {
    "groups": [{ "group": "Getting started", "pages": ["index"] }]
  }
}
```

Blode.md uses its built-in visual system for layout, typography, and component styling. Branding today is about the assets and mode behavior you provide here, not per-site theme tokens.