Getting Started

Starlight UI Tweaks is a Starlight plugin that extends and customizes core UI components:

• Replaces the theme toggle with an icon-based selector
• Adds navigation links to the navbar
• Enables ads in the table of contents
• Provides a customizable four-column footer

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. Install it by running the following command in your terminal:

   npm

   npm install starlight-ui-tweaks

   yarn

   yarn add starlight-ui-tweaks

   pnpm

   pnpm add starlight-ui-tweaks

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 starlightUiTweaks from 'starlight-ui-tweaks'
   
   export default defineConfig({
     integrations: [
       starlight({
         plugins: [starlightUiTweaks()],
         title: 'My Docs',
       }),
     ],
   })

3. Add the following line to the globals.css file:

   src/styles/global.css

   /* Rest of the content */
   @import "starlight-ui-tweaks/styles";

4. Start the development server to preview the plugin in action.