Updated docs with example

This commit is contained in:
saberzero1 2024-10-17 19:01:24 +02:00
parent 5231007949
commit d3d6eee220
No known key found for this signature in database
GPG Key ID: 41AEE99107640F10

View File

@ -63,12 +63,15 @@ type Options = {
category: string
categoryId: string
// Url to folder with custom themes
// defaults to 'https://giscus.app/themes'
themeUrl?: string
// filename for light theme .css file
// defaults to 'light'
lightTheme?: string
// filename for dark theme .css file
// defaults to 'dark'
darkTheme?: string
@ -90,3 +93,24 @@ type Options = {
}
}
```
#### Custom CSS theme
Quartz supports custom theme for Giscus. To use a custom CSS theme, place the `.css` file inside the `quartz/static` folder and set the configuration values.
For example, if you have a light theme `light-theme.css`, a dark theme `dark-theme.css`, and your Quartz site is hosted at `https://example.com/`:
```ts
afterBody: [
Component.Comments({
provider: 'giscus',
options: {
// Other options
themeUrl: "https://example.com/static", // corresponds to quartz/static/
lightTheme: "light-theme", // corresponds to light-theme.css in quartz/static/
darkTheme: "dark-theme", // corresponds to dark-theme.css quartz/static/
}
}),
],
```