Theme
Theme configuration that changes the look and feel of the project
Properties
name
"poetry" | "cosmo" | "opener" | "picasso" | string
Required
A theme name.logo
any
Path to logo image or object with path to "light" and "dark" mode logo images, and where the logo links to.fonts
ThemeFont
Font configuration for the theme.Font
Font
family
string
The font family to use.weight
string
The font weight to use.src
string
The font src to use.format
"woff2" | "woff" | "ttf"
The font format to use.
Font[]
Font[]
{ body?: Font
{ body?: Font
Font[]; coder?: Font
Font[]; coder?: Font
Font[]; }
Font[]; }
favicon
string
Path to the favicon image. For example: /path/to/favicon.svgicons
Icons
The iconify library setup.library
The iconify libraryIconLibrary
IconLibrary
name
string
Required
The iconify library nameversion
string
The iconify library versiondefault
boolean
The default iconify icon namenoprefix
boolean
Merge icons from the library into the default iconify library
string
string
IconLibrary[]
IconLibrary[]
appearance
Appearance
Appearance configuration for the theme.colorScheme
"light" | "dark" | "os"
The default color scheme to use.colors
Colors
Colors configuration for the theme.primary
string
Required
The primary color of the theme.light
string
The light color of the theme.dark
string
The dark color of the theme.
cssTokens
{ [token: string]: string; }
CSS tokens for the theme.presets
string[]
Presets for the theme.logo
AppearanceLogo
Logo appearance for the theme.sidebar
boolean | "mobile" | "desktop"
If
true
then the logo will be displayed on the sidebar.header
boolean | "mobile" | "desktop"
If
true
then the logo will be displayed on the header.
search
AppearanceSearch
Search appearance for the theme.fullWidth
boolean
If
true
then the search bar will be displayed as a full width.sidebar
boolean | "mobile" | "desktop"
If
true
then the search bar will be displayed on the sidebar.middle
boolean | "mobile" | "desktop"
If
true
then the search bar will be displayed in the middle of the header.right
boolean | "mobile" | "desktop"
If
true
then the search bar will be displayed on the right side of the header.
header
AppearanceHeader
Header appearance for the theme.externalArrow
boolean
If
true
then the header external links will display an external arrow.separator
"right"
If
right
then separator will be displayed on the right side of the header.type
"classic" | "pad"
The type of the header.buttonSize
"sm" | "md" | "lg"
The button size of the header.
tabs
AppearanceTabs
Tabs appearance for the theme.surface
"center" | "sidebar"
The tabs to display in the header.
sidebar
AppearanceSidebar
Sidebar appearance for the theme.externalArrow
boolean
If
true
then the sidebar will display a scroll shadow.scrollShadow
boolean
If
true
then the sidebar will display a scroll shadow.scrollbar
"secondary"
The color of the sidebar scrollbar.scrollbarColor
string
The color of the sidebar scrollbar.scrollTransition
"smooth" | "instant"
The transition behaviour of the sidebar scroll when navigating to a new page.
buttons
AppearanceButtons
Buttons appearance for the theme.rounded
boolean | "sm" | "md" | "lg"
tables
AppearanceTables
Table appearance for the theme.kind
"secondary"
The kind of the table.
banner
AppearanceBanner
Banner appearance for the theme.fixed
boolean
If
true
then the banner will have fixed position (always visible).
content
AppearanceContent
Content appearance for the theme.contentDecorator
"secondary"
Content decorator for the theme.breadcrumbs
boolean
If
true
then the breadcrumbs will be displayed.sectionSeparator
boolean
If
true
then the section separator will be displayed.
footer
AppearanceFooter
Footer appearance for the theme.surface
"page"
The footer surface.
writer
Writer
Writer configuration for the theme.maxTocDepth
number
The maximum number of table of conten§ts levels.copyPage
boolean
Copy page button
coder
Coder
Coder configuration for the theme, including options like syntax highlighting.lines
boolean
If
true
then code blocks will have line numbers by default.scroll
boolean
If
true
then code blocks will have a scrollbar by default.syntaxHighlight
any
Syntax highlighting configuration.
head
array of [string, Record<string, string | boolean>, ]
Head configurationscripts
string[]
Custom scripts to be added to the head of the every page. Paths are relative to the root of the project or absolute.
Show your support! Star us on GitHub ⭐️