Skip to content
Starlight View Modes

View Modes Data

View Modes Data

Learn how to use Starlight View Modes’ data to access information about view modes.

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 data1/3

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

example.astro
---
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:

Using view modes data2/3

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

Using view modes data3/3

Links to another view mode of the current page, e.g. in a custom view mode switcher, automatically keep the section being read.

starlightViewModes

The starlightViewModes object has the following properties:

modes

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

Each mode object has the following properties:

name

Type: string

The name of the view mode.

title

Type: string

The translated name of the view mode in readable form.

switchToText

Type: string

The translated label used to switch to the view mode.

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

keyboardShortcuts

Type: { keys: string[]; ctrl?: boolean; shift?: boolean; alt?: boolean; mode: string }[] | undefined

The keyboard shortcuts to switch to and from the view mode. The default mode has no keyboard shortcuts (undefined).

Switch to normal mode

Contents