Getting Started

A Starlight plugin adding different view mode capabilities to your documentation website.

Prerequisites

You will need to have a Starlight website set up. If you don’t have one yet, you can follow the “Getting Started” guide in the Starlight docs to create one.

Installation

1. Starlight View Modes is a Starlight plugin that you can install using your favorite package manager:

   npm

   npm i starlight-view-modes

   pnpm

   pnpm add starlight-view-modes

   yarn

   yarn add starlight-view-modes

2. Configure the plugin in your Starlight configuration in the astro.config.mjs file.

   astro.config.mjs

   import starlight from '@astrojs/starlight'
   import { defineConfig } from 'astro/config'
   import starlightViewModes from 'starlight-view-modes'
   
   export default defineConfig({
     integrations: [
       starlight({
         plugins: [starlightViewModes()],
         title: 'My Docs',
       }),
     ],
   })

3. Start the development server to see the plugin in action.

The Starlight View Modes plugin behavior can be tweaked using various configuration options.

Component overrides

The Starlight View Modes plugin uses a Starlight component override for the PageTitle, Search, SocialIcons, and TableOfContents components.

If you have a custom PageTitle component override in your Starlight project, you will need to manually render the PageTitle component from the Starlight View Modes plugin in your custom component:

src/components/overrides/PageTitle.astro

---
import Default from '@astrojs/starlight/components/PageTitle.astro'
import StarlightViewModesPageTitle from 'starlight-view-modes/components/PageTitle.astro'
---

<Default><slot /></Default>
<p>Custom content in the PageTitle override</p>
<StarlightViewModesPageTitle />

The same logic applies to the Search, SocialIcons and TableOfContents components.