View Modes Data

Starlight View Modes exposes information about the view modes in your project. This guide explains how to use Starlight View Modes’ data.

What is view modes data?

Similar to Starlight route data, the route data provided by the Starlight View Modes is an object containing the information about all the view modes available for the current page. It includes information like a list of all the modes, the name of each mode, and in which mode the current page is.

To learn more about all the available properties in the route data object, check the starlightViewModes section.

Using view modes data

You can access the route data object provided by the Starlight View Modes plugin from the Astro.locals.starlightViewModes global in Astro components:

---
const { modes } = Astro.locals.starlightViewModes
//        ^ The list of all the modes in your project.
---

This can be useful for example to render a list of all view modes that link to the same page in that mode:

<ul>
  {
    Astro.locals.starlightViewModes.modes.map((mode) => (
      <li>
        <a href={mode.href} view-modes-ignore>
          {mode.title}
        </a>
      </li>
    ))
  }
</ul>

Preview

`starlightViewModes`

The starlightViewModes object has the following properties:

`modes`

A list of all the available view modes of the current page.

Each modes object has the following properties:

`name`

type: string

The name of the view mode.

`title`

type: string

The name of the view mode in readable form.

`href`

type: string

The link to the same page in this view mode.

`isCurrent`

type: boolean

Indicates if the current page is in this view mode right now.

`icon`

type: string

The activation or deactivation SVG path of the view mode, depending on the current mode. The default mode has no icon (undefined).