> ## Documentation Index
> [HTML page](https://blode.md/docs/configuration/theming)
> [Documentation index](https://blode.md/docs/llms.txt)
> Use the index to discover all available pages before exploring further.

# Appearance and branding

Configure logo, favicon, and appearance settings in docs.json, including separate light and dark assets and supported branding options for your site.

Edda 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 Edda also accepts `logo.alt` for accessible text.

> [!INFO]
> Edda 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"] }]
  }
}
```

Edda 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.