# Customizing

Override the layer’s components, add a theme or bring your own tokens.

Everything the layer renders is a component, and a component in your app replaces the layer’s component of the same name. Change the parts you need and the rest keeps following the layer.

## Components

Create a component with the name of the one you replace. This one adds a mark before the wordmark in the header and the navigation drawer.

```vue [app/components/DocsLogo.vue]
<template>
  <span class="flex items-center gap-2">
    <img src="/logo.svg" alt="" class="size-6" />
    <span class="docs-wordmark">{{ docs.title }}</span>
  </span>
</template>

<script setup lang="ts">
const { docs } = useAppConfig()
</script>
```

Three components exist to be replaced. The two footers render nothing until you do.

::docs-table
---
columns:
  - label: Component
  - label: Renders
rows:
  - items:
      - label: DocsLogo
      - label: The wordmark, in the header and in the navigation drawer.
        plaintext: true
  - items:
      - label: DocsTocFooter
      - label: Nothing. Sits under the contents rail on the right.
        plaintext: true
  - items:
      - label: DocsHeroFooter
      - label: Nothing. Sits under the landing page’s actions.
        plaintext: true
---
::

Replace a page the same way: `app/pages/index.vue` takes over the landing page.

## Themes

The layer loads the application, breakpoint and dark mode tokens. Add a theme by loading its tokens and setting `data-theme` on the document.

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  extends: ['@maas/docs'],
  css: [
    '~~/.maas/tokens/css/theme/brand/light/application.css',
    '~~/.maas/tokens/css/theme/brand/dark/application.css',
  ],
  app: {
    head: {
      htmlAttrs: { 'data-theme': 'brand' },
    },
  },
})
```

## Tokens

The layer ships the tokens Mirror builds from its own token set. To use yours, run `mirror tokens && mirror css` in your project and set `docs.tokens` to the directory they write to.

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  extends: ['@maas/docs'],
  docs: {
    tokens: '.maas',
  },
})
```

::warning
The layer’s components use Mirror’s utility classes. A token set that drops a family the layer uses, such as `surface`, leaves those classes without styles.
::

## Layout

The shell measures itself with CSS variables. Override them on `:root` in a stylesheet of your own.

| Variable | Default | Description |
| --- | --- | --- |
| `--docs-header` | `3.5rem` | The height of the header. |
| `--docs-sidebar` | `16.25rem` | The width of the sidebar. |
| `--docs-toc` | `13.75rem` | The width of the contents rail. |
| `--docs-measure` | `42rem` | The width of the text column. |
| `--docs-shell` | `78rem` | The width of the whole layout. |
| `--docs-gutter` | `1.25rem` | The space on either side of the layout, `1.5rem` from 1024px. |