Starlight Fullview Mode

A minimalist plugin that collapses Starlight's sidebars and expands the main content to full width, creating a distraction-free, fullscreen-like reading experience. Toggle with a single click to focus purely on your content. Learn more

License

Licensed under the MIT License, Copyright © Windmillcode.

See LICENSE for more information.

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-fullview-mode is a Starlight plugin. Install it by running the following command in your terminal:

NPM

npm install starlight-fullview-mode

PNPM

pnpm add starlight-fullview-mode

YARN

yarn add starlight-fullview-mode

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

``js
import starlight from '@astrojs/starlight'
import { defineConfig } from 'astro/config'
import starlightFullViewMode from 'starlight-fullview-mode'

export default defineConfig({
integrations: [
starlight({
plugins: [
starlightFullViewMode({
// Configuration options go here.
})
],
title: 'My Docs',
}),
],
})
`


Configuration
-------------

The plugin accepts the following configuration options:

$3


- Type: boolean
- Default: true
- Description: Controls whether the left sidebar can be toggled between collapsed and expanded states.

$3

- Type: boolean
- Default: true
- Description: Controls whether the right sidebar (table of contents) can be toggled between collapsed and expanded states.

$3

- Type: string | null
- Default: null (uses default theme width)
- Description: Custom CSS width value for the left sidebar when expanded (e.g., "250px", "20%").

$3

- Type: string | null
- Default: null (uses default theme width)
- Description: Custom CSS width value for the right sidebar when expanded.

$3

- Type: string
- Default: "50px"
- Description: Custom CSS width value for the left sidebar when collapsed.

$3

- Type: string
- Default: "50px"
- Description: Custom CSS width value for the right sidebar when collapsed.

$3

- Type: boolean
- Default: true`
- Description: Rotate the toggle caret buttons when sidebars closed

#### Examples

Enable the left sidebar and disable the right sidebar:

starlightFullViewMode({ leftSidebarEnabled: true, rightSidebarEnabled: false})

Enable the right sidebar and disable the left sidebar:

starlightFullViewMode({ leftSidebarEnabled: false, rightSidebarEnabled: true})