Getting Started

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. @six-tech/starlight-theme-six is a Starlight plugin. Install it by running the following command in your terminal:

   npm

   npm install @six-tech/starlight-theme-six @fontsource/inter @fontsource/jetbrains-mono sharp

   pnpm

   pnpm add @six-tech/starlight-theme-six @fontsource/inter @fontsource/jetbrains-mono sharp

   Yarn

   yarn add @six-tech/starlight-theme-six @fontsource/inter @fontsource/jetbrains-mono sharp

   Required Dependencies

   The theme requires these packages:

   • @fontsource/inter & @fontsource/jetbrains-mono: For theme fonts

   • sharp: For image processing (required by Astro for optimizing images)

   These are peer dependencies, meaning you must install them explicitly in your project.

   Troubleshooting Sharp Installation:

   If you encounter “Could not find Sharp” errors after installation, Sharp’s native binaries may need to be rebuilt for your platform. Try:

   # Force rebuild Sharp's native binaries
   pnpm add sharp --force
   # or
   npm install sharp --force
   # or
   yarn add sharp --force

   This forces Sharp to recompile its native binaries for your specific platform (Windows/macOS/Linux).

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

   Automatic Defaults

   The Six theme automatically provides sensible defaults for:

   • Logo: Six theme logos (dark/light variants)

   • Title: “Starlight Six”

   • Fonts: Inter and JetBrains Mono (all weights included)

   • Last Updated: Enabled by default

   • Table of Contents: Shows H1-H5 headings

   You can override any of these by providing your own values in the Starlight configuration.

   Note: Favicons are not automatically configured to avoid base path conflicts. Use the getFavIcons() utility for manual setup.

   astro.config.mjs

   import starlight from '@astrojs/starlight'
   import { defineConfig } from 'astro/config'
   import starlightThemeSix from '@six-tech/starlight-theme-six'
   
   export default defineConfig({
     integrations: [
       starlight({
         plugins: [
           starlightThemeSix({
             navLinks: [{ // optional
               label: 'Docs',
               link: '/getting-started',
             }],
             footerText: //optional
               'Built & designed by [Six](https://six.technology).'
          })
         ],
         title: 'My Docs',
       }),
     ],
   })

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

That’s it! You can now use the theme in your project. 🎉

Minimal Configuration

With the automatic defaults, you can get started with just the plugin configuration:

astro.config.mjs

import starlight from '@astrojs/starlight'
import { defineConfig } from 'astro/config'
import starlightThemeSix from '@six-tech/starlight-theme-six'

export default defineConfig({
  integrations: [
    starlight({
      plugins: [
        starlightThemeSix({
          // Theme-specific options (all optional)
          navLinks: [
            { label: 'Docs', link: '/getting-started' },
          ],
        })
      ],
      // That's it! The theme provides defaults for logo, title, favicons, etc.
    }),
  ],
})

Overriding Defaults

You can override any default by providing your own values:

astro.config.mjs

import { getFavIcons } from '@six-tech/starlight-theme-six/utils/favicons'

export default defineConfig({
  integrations: [
    starlight({
      plugins: [starlightThemeSix({ /* theme config */ })],

      // Override defaults
      title: 'My Custom Title',
      logo: {
        src: './src/assets/my-logo.svg',
      },
      lastUpdated: false, // Disable last updated
      tableOfContents: {
        minHeadingLevel: 2, // Start from H2
        maxHeadingLevel: 4, // End at H4
      },
      head: [
        // Add favicon configuration manually
        ...getFavIcons({ basePath: '/my-project/' }), // For subdirectory deployment
        // Or for root deployment: ...getFavIcons()
      ],

    }),
  ],
})