Configuration

The Starlight Giscus plugin can be configured inside the astro.config.mjs configuration file of your project:

astro.config.mjs

import starlight from '@astrojs/starlight'
import { defineConfig } from 'astro/config'
import starlightGiscus from 'starlight-giscus'

export default defineConfig({
  integrations: [
    starlight({
      plugins: [
        starlightGiscus({
          // Configuration options
        }),
      ],
      title: 'My Docs',
    }),
  ],
})

Just create a Giscus App, and then copy the relevant settings from there.

Options

The Starlight Giscus plugin accepts the following configuration options:

element

Type: string

Default: starlight-theme-select

Specify the CSS selector for the theme toggle element. This is used to listen for theme change events to update Giscus theme accordingly. If your theme toggle uses a different element, update this selector to match.

repo (required)

Type: string

A public GitHub repository. This repo is where the discussions will be linked to.

repoId (required)

Type: string

Set the repository ID. Copy it from the Giscus app settings.

category (required)

Type: string

Choose the discussion category where new discussions will be created.

categoryId (required)

Type: string

Set the discussion category ID. Copy it from the Giscus app settings.

mapping

Type: string

Default: pathname

Choose the mapping between the embedding page and the embedded discussion.

• pathname - giscus will search for a discussion whose title contains the page’s pathname URL component.

• URL - giscus will search for a discussion whose title contains the page’s URL.

• <title> - giscus will search for a discussion whose title contains the page’s <title> HTML tag.

• og:title - giscus will search for a discussion whose title contains the page’s <meta property="og:title"> HTML tag.

reactions

Type: boolean

Default: true

Show reactions block above the reply form.

inputPosition

Type: string (top | bottom)

Default: bottom

Place the reply form above or below the comments.

theme

Type: string | { light: string; dark: string; auto: string }

Default: preferred_color_scheme | { light: 'light', dark: 'dark', auto: 'preferred_color_scheme' }

Choose a theme that matches your website.

Possible values:

Value	Name
preferred_color_scheme	System (default)
light	GitHub Light
light_high_contrast	GitHub Light High Contrast
light_protanopia	GitHub Light Protanopia & Deuteranopia
light_tritanopia	GitHub Light Tritanopia
dark	GitHub Dark
dark_high_contrast	GitHub Dark High Contrast
dark_protanopia	GitHub Dark Protanopia & Deuteranopia
dark_tritanopia	GitHub Dark Tritanopia
dark_dimmed	GitHub Dark Dimmed
transparent_dark	Transparent Dark
noborder_light	NoBorder Light
noborder_dark	NoBorder Dark
noborder_gray	NoBorder Gray
cobalt	RStudio Cobalt
purple_dark	Purple Dark
gruvbox	Gruvbox
gruvbox_dark	Gruvbox Dark
gruvbox_light	Gruvbox Light
catppuccin_latte	Catppuccin Latte
catppuccin_frappe	Catppuccin Frappé
catppuccin_macchiato	Catppuccin Macchiato
catppuccin_mocha	Catppuccin Mocha
fro	Fro
https://giscus.app/themes/custom_example.css	Custom Theme CSS Url

lazy

Type: boolean

Default: false

Loading of the comments will be deferred until the user scrolls near the comments container.