Install

npm install --save @sveltepress/theme-default
sh
yarn add @sveltepress/theme-default
sh
pnpm install @sveltepress/theme-default
sh
bun add @sveltepress/theme-default
sh

Add in your Vite config

vite.config.(js|ts)
+
+
import { defaultTheme } from '@sveltepress/theme-default' 
import { sveltepress } from '@sveltepress/vite'

import { defineConfig } from 'vite'

const config = defineConfig({
  plugins: [
    sveltepress({
      theme: defaultTheme(/** theme options */) 
    })
  ],
})

export default config
js

Types Overview

/// <reference types="vite/client" />
/// <reference types="@sveltepress/vite/types" />
/// <reference types="@sveltejs/kit/vite" />

declare module 'virtual:sveltepress/theme-default' {
  import type { import DocSearchPropsDocSearchProps } from '@sveltepress/docsearch/types'
  import type { import CreateTwoslashSvelteOptionsCreateTwoslashSvelteOptions } from '@sveltepress/twoslash'
  import type { import LoadThemeLoadTheme } from '@sveltepress/vite'
  import type { import SvelteKitPWAOptionsSvelteKitPWAOptions } from '@vite-pwa/sveltekit'
  import type { import BundledThemeBundledTheme } from 'shiki'
  import type { import BundledLanguageBundledLanguage } from 'shiki/langs'
  import type { interface Component<Props extends Record<string, any> = {}, Exports extends Record<string, any> = {}, Bindings extends keyof Props | "" = string>

Can be used to create strongly typed Svelte components.

Example:

You have component library on npm called component-library, from which you export a component called MyComponent. For Svelte+TypeScript users, you want to provide typings. Therefore you create a index.d.ts:

import type { Component } from 'svelte';
export declare const MyComponent: Component<{ foo: string }> {}

Typing this makes it possible for IDEs like VS Code with the Svelte extension to provide intellisense and to use the component like this in a Svelte file with TypeScript:

<script lang="ts">
	import { MyComponent } from "component-library";
</script>
<MyComponent foo={'bar'} />
Component
} from 'svelte'
export interface WithTitle { WithTitle.title?: string | undefinedtitle?: string } export interface LinkItem extends WithTitle { LinkItem.icon?: string | undefinedicon?: string LinkItem.to?: string | undefinedto?: string LinkItem.external?: boolean | undefinedexternal?: boolean LinkItem.collapsible?: boolean | undefinedcollapsible?: boolean LinkItem.items?: LinkItem[] | undefineditems?: LinkItem[] } export interface AutoSidebarOptions { /** * Enable auto-generated sidebar */ AutoSidebarOptions.enabled: boolean

Enable auto-generated sidebar

enabled
: boolean
/** * Routes directory, default 'src/routes' */ AutoSidebarOptions.routesDir?: string | undefined

Routes directory, default 'src/routes'

routesDir
?: string
/** * Root paths to generate sidebar for, e.g. ['/guide/', '/reference/'] * If not specified, auto-detect from top-level route directories */ AutoSidebarOptions.roots?: string[] | undefined

Root paths to generate sidebar for, e.g. ['/guide/', '/reference/'] If not specified, auto-detect from top-level route directories

roots
?: string[]
} export interface DefaultThemeOptions { DefaultThemeOptions.navbar?: LinkItem[] | undefinednavbar?: interface Array<T>Array<LinkItem> DefaultThemeOptions.github?: string | undefinedgithub?: string DefaultThemeOptions.logo?: string | undefinedlogo?: string DefaultThemeOptions.sidebar?: AutoSidebarOptions | Record<string, LinkItem[]> | undefinedsidebar?: type Record<K extends keyof any, T> = { [P in K]: T; }

Construct a type with a set of properties K of type T

Record
<string, LinkItem[]> | AutoSidebarOptions
DefaultThemeOptions.editLink?: string | undefinededitLink?: string DefaultThemeOptions.discord?: string | undefineddiscord?: string DefaultThemeOptions.ga?: string | undefinedga?: string
DefaultThemeOptions.pwa?: (SvelteKitPWAOptions & {
    darkManifest?: string;
    precachePages?: boolean | string[];
    precacheClient?: boolean;
}) | undefined
pwa
?: import SvelteKitPWAOptionsSvelteKitPWAOptions & {
darkManifest?: string | undefineddarkManifest?: string /** * Which prerendered HTML pages to put in the Workbox precache. * * Default `false` only precaches the homepage so service-worker * install/update stays fast on sites with many versions and locales. * * - `false`: homepage only * - `true`: all prerendered HTML (historical versions are still ignored) * - `string[]`: URL prefixes, e.g. `['/zh/', '/v/2026-08-27/']` */ precachePages?: boolean | string[] | undefined

Which prerendered HTML pages to put in the Workbox precache.

Default false only precaches the homepage so service-worker install/update stays fast on sites with many versions and locales.

  • false: homepage only
  • true: all prerendered HTML (historical versions are still ignored)
  • string[]: URL prefixes, e.g. ['/zh/', '/v/2026-08-27/']
precachePages
?: boolean | string[]
/** * Which client files to put in the Workbox precache. * * Default `false` only precaches the app shell (SvelteKit entry, * hashed CSS/fonts, and root icons) so service-worker install/update * stays fast on sites with many pages. Per-route nodes and chunks * are fetched on demand. * * - `false`: app shell only * - `true`: every matching client file (the previous catch-all glob) */ precacheClient?: boolean | undefined

Which client files to put in the Workbox precache.

Default false only precaches the app shell (SvelteKit entry, hashed CSS/fonts, and root icons) so service-worker install/update stays fast on sites with many pages. Per-route nodes and chunks are fetched on demand.

  • false: app shell only
  • true: every matching client file (the previous catch-all glob)
precacheClient
?: boolean
} DefaultThemeOptions.docsearch?: Omit<DocSearchProps, "theme" | "container"> | undefineddocsearch?: type Omit<T, K extends keyof any> = { [P in Exclude<keyof T, K>]: T[P]; }

Construct a type with the properties of T except for those in type K.

Omit
<import DocSearchPropsDocSearchProps, 'container' | 'theme'>
DefaultThemeOptions.search?: string | boolean | Component<{}, {}, string> | undefinedsearch?: interface Component<Props extends Record<string, any> = {}, Exports extends Record<string, any> = {}, Bindings extends keyof Props | "" = string>

Can be used to create strongly typed Svelte components.

Example:

You have component library on npm called component-library, from which you export a component called MyComponent. For Svelte+TypeScript users, you want to provide typings. Therefore you create a index.d.ts:

import type { Component } from 'svelte';
export declare const MyComponent: Component<{ foo: string }> {}

Typing this makes it possible for IDEs like VS Code with the Svelte extension to provide intellisense and to use the component like this in a Svelte file with TypeScript:

<script lang="ts">
	import { MyComponent } from "component-library";
</script>
<MyComponent foo={'bar'} />
Component
| string | boolean
DefaultThemeOptions.themeColor?: {
    light: string;
    dark: string;
    primary?: string;
    primaryDeep?: string;
    hover?: string;
    gradient?: {
        start: string;
        end: string;
    };
} | undefined
themeColor
?: {
light: stringlight: string dark: stringdark: string primary?: string | undefinedprimary?: string /** * Darker variant of primary, used for accent text on light backgrounds * where the primary color alone lacks contrast. * Defaults to `#e11d48` when primary is not customized, otherwise falls back to primary. */ primaryDeep?: string | undefined

Darker variant of primary, used for accent text on light backgrounds where the primary color alone lacks contrast. Defaults to #e11d48 when primary is not customized, otherwise falls back to primary.

primaryDeep
?: string
hover?: string | undefinedhover?: string
gradient?: {
    start: string;
    end: string;
} | undefined
gradient
?: {
start: stringstart: string end: stringend: string } }
DefaultThemeOptions.highlighter?: {
    languages?: BundledLanguage[];
    themeLight?: BundledTheme;
    themeDark?: BundledTheme;
    twoslash?: boolean | CreateTwoslashSvelteOptions;
    codeCollapseLines?: number;
} | undefined
highlighter
?: {
languages?: BundledLanguage[] | undefinedlanguages?: import BundledLanguageBundledLanguage[] themeLight?: anythemeLight?: import BundledThemeBundledTheme themeDark?: anythemeDark?: import BundledThemeBundledTheme twoslash?: anytwoslash?: boolean | import CreateTwoslashSvelteOptionsCreateTwoslashSvelteOptions /** * Code blocks taller than this many lines start collapsed with an * "Expand code" bar. Set to 0 to disable collapsing. * @default 30 */ codeCollapseLines?: number | undefined

Code blocks taller than this many lines start collapsed with an "Expand code" bar. Set to 0 to disable collapsing.

@default30
codeCollapseLines
?: number
}
DefaultThemeOptions.i18n?: {
    navbarMenu?: string;
    heroCode?: {
        title?: string;
        messageBefore?: string;
        messageStrong?: string;
        messageAfter?: string;
        tipLabel?: string;
        counterLabel?: string;
    };
    onThisPage?: string;
    suggestChangesToThisPage?: string;
    lastUpdateAt?: string;
    previousPage?: string;
    nextPage?: string;
    expansionTitle?: string;
    expandCode?: string;
    pwa?: {
        tip?: string;
        reload?: string;
        close?: string;
        appReadyToWorkOffline?: string;
        newContentAvailable?: string;
    };
    ... 22 more ...;
    searchClear?: string;
} | undefined
i18n
?: {
navbarMenu?: string | undefinednavbarMenu?: string
heroCode?: {
    title?: string;
    messageBefore?: string;
    messageStrong?: string;
    messageAfter?: string;
    tipLabel?: string;
    counterLabel?: string;
} | undefined
heroCode
?: {
title?: string | undefinedtitle?: string messageBefore?: string | undefinedmessageBefore?: string messageStrong?: string | undefinedmessageStrong?: string messageAfter?: string | undefinedmessageAfter?: string tipLabel?: string | undefinedtipLabel?: string counterLabel?: string | undefinedcounterLabel?: string } onThisPage?: string | undefinedonThisPage?: string suggestChangesToThisPage?: string | undefinedsuggestChangesToThisPage?: string lastUpdateAt?: string | undefinedlastUpdateAt?: string previousPage?: string | undefinedpreviousPage?: string nextPage?: string | undefinednextPage?: string expansionTitle?: string | undefinedexpansionTitle?: string /** Label of the expand bar on collapsed long code blocks */ expandCode?: string | undefined

Label of the expand bar on collapsed long code blocks

expandCode
?: string
pwa?: {
    tip?: string;
    reload?: string;
    close?: string;
    appReadyToWorkOffline?: string;
    newContentAvailable?: string;
} | undefined
pwa
?: {
tip?: string | undefinedtip?: string reload?: string | undefinedreload?: string close?: string | undefinedclose?: string appReadyToWorkOffline?: string | undefinedappReadyToWorkOffline?: string newContentAvailable?: string | undefinednewContentAvailable?: string } footnoteLabel?: string | undefinedfootnoteLabel?: string /** Label of the language switcher trigger. */ localeSwitcher?: string | undefined

Label of the language switcher trigger.

localeSwitcher
?: string
/** Notice shown after switching locale fell back to that locale's home. */ localePageUnavailable?: string | undefined

Notice shown after switching locale fell back to that locale's home.

localePageUnavailable
?: string
versionSelector?: string | undefinedversionSelector?: string versionPageUnavailable?: string | undefinedversionPageUnavailable?: string versionDeprecated?: string | undefinedversionDeprecated?: string versionEol?: string | undefinedversionEol?: string versionViewCurrent?: string | undefinedversionViewCurrent?: string versionDeprecatedLabel?: string | undefinedversionDeprecatedLabel?: string versionEolLabel?: string | undefinedversionEolLabel?: string versionSearchUnavailable?: string | undefinedversionSearchUnavailable?: string /** Template for page and section badges. Use `{version}` for the version label. */ versionNewLabel?: string | undefined

Template for page and section badges. Use {version} for the version label.

versionNewLabel
?: string
/** Compact badge shown beside changed sidebar pages and table-of-contents sections. */ versionNavigationNewLabel?: string | undefined

Compact badge shown beside changed sidebar pages and table-of-contents sections.

versionNavigationNewLabel
?: string
versionChangesSelector?: string | undefinedversionChangesSelector?: string versionChangesNewPages?: string | undefinedversionChangesNewPages?: string versionChangesUpdatedPages?: string | undefinedversionChangesUpdatedPages?: string versionChangesNoBaseline?: string | undefinedversionChangesNoBaseline?: string versionChangesEmpty?: string | undefinedversionChangesEmpty?: string searchPlaceholder?: string | undefinedsearchPlaceholder?: string searchNoResults?: string | undefinedsearchNoResults?: string searchDevNotice?: string | undefinedsearchDevNotice?: string searchClose?: string | undefinedsearchClose?: string searchClear?: string | undefinedsearchClear?: string }
DefaultThemeOptions.preBuildIconifyIcons?: {
    [iconSetName: string]: string[];
} | undefined
preBuildIconifyIcons
?: {
[iconSetName: stringiconSetName: string]: string[] } } export type type ThemeDefault = LoadTheme<DefaultThemeOptions>ThemeDefault = import LoadThemeLoadTheme<DefaultThemeOptions> const const options: DefaultThemeOptionsoptions: DefaultThemeOptions export default const options: DefaultThemeOptionsoptions } declare module '@sveltepress/theme-default/context' { import type { interface Writable<T>

Writable interface for both updating and subscribing.

Writable
} from 'svelte/store'
export interface SveltepressContext { SveltepressContext.isDark: Writable<boolean>isDark: interface Writable<T>

Writable interface for both updating and subscribing.

Writable
<boolean>
} export const const SVELTEPRESS_CONTEXT_KEY: symbolSVELTEPRESS_CONTEXT_KEY: symbol export const const TITLE_ROW_ACTION_KEY: symbolTITLE_ROW_ACTION_KEY: symbol export interface TitleRowAction { TitleRowAction.href: stringhref: string TitleRowAction.label: stringlabel: string } export interface TitleRowActionContext { readonly TitleRowActionContext.current: TitleRowAction | undefinedcurrent: TitleRowAction | undefined } } declare module 'virtual:sveltepress/theme-default/versioning' { export * from '@sveltepress/theme-default/dist/components/versioning' } declare module 'virtual:sveltepress/theme-default/VersionSelector.svelte' { import type { interface Component<Props extends Record<string, any> = {}, Exports extends Record<string, any> = {}, Bindings extends keyof Props | "" = string>

Can be used to create strongly typed Svelte components.

Example:

You have component library on npm called component-library, from which you export a component called MyComponent. For Svelte+TypeScript users, you want to provide typings. Therefore you create a index.d.ts:

import type { Component } from 'svelte';
export declare const MyComponent: Component<{ foo: string }> {}

Typing this makes it possible for IDEs like VS Code with the Svelte extension to provide intellisense and to use the component like this in a Svelte file with TypeScript:

<script lang="ts">
	import { MyComponent } from "component-library";
</script>
<MyComponent foo={'bar'} />
Component
} from 'svelte'
const
const component: Component<{
    mobile?: boolean;
}, {}, string>
component
: interface Component<Props extends Record<string, any> = {}, Exports extends Record<string, any> = {}, Bindings extends keyof Props | "" = string>

Can be used to create strongly typed Svelte components.

Example:

You have component library on npm called component-library, from which you export a component called MyComponent. For Svelte+TypeScript users, you want to provide typings. Therefore you create a index.d.ts:

import type { Component } from 'svelte';
export declare const MyComponent: Component<{ foo: string }> {}

Typing this makes it possible for IDEs like VS Code with the Svelte extension to provide intellisense and to use the component like this in a Svelte file with TypeScript:

<script lang="ts">
	import { MyComponent } from "component-library";
</script>
<MyComponent foo={'bar'} />
Component
<{ mobile?: boolean | undefinedmobile?: boolean }>
export default
const component: Component<{
    mobile?: boolean;
}, {}, string>
component
} declare module 'virtual:sveltepress/theme-default/VersionFallbackNotice.svelte' { import type { interface Component<Props extends Record<string, any> = {}, Exports extends Record<string, any> = {}, Bindings extends keyof Props | "" = string>

Can be used to create strongly typed Svelte components.

Example:

You have component library on npm called component-library, from which you export a component called MyComponent. For Svelte+TypeScript users, you want to provide typings. Therefore you create a index.d.ts:

import type { Component } from 'svelte';
export declare const MyComponent: Component<{ foo: string }> {}

Typing this makes it possible for IDEs like VS Code with the Svelte extension to provide intellisense and to use the component like this in a Svelte file with TypeScript:

<script lang="ts">
	import { MyComponent } from "component-library";
</script>
<MyComponent foo={'bar'} />
Component
} from 'svelte'
const const component: Component<{}, {}, string>component: interface Component<Props extends Record<string, any> = {}, Exports extends Record<string, any> = {}, Bindings extends keyof Props | "" = string>

Can be used to create strongly typed Svelte components.

Example:

You have component library on npm called component-library, from which you export a component called MyComponent. For Svelte+TypeScript users, you want to provide typings. Therefore you create a index.d.ts:

import type { Component } from 'svelte';
export declare const MyComponent: Component<{ foo: string }> {}

Typing this makes it possible for IDEs like VS Code with the Svelte extension to provide intellisense and to use the component like this in a Svelte file with TypeScript:

<script lang="ts">
	import { MyComponent } from "component-library";
</script>
<MyComponent foo={'bar'} />
Component
export default const component: Component<{}, {}, string>component } declare module 'virtual:sveltepress/theme-default/VersionLifecycleBanner.svelte' { import type { interface Component<Props extends Record<string, any> = {}, Exports extends Record<string, any> = {}, Bindings extends keyof Props | "" = string>

Can be used to create strongly typed Svelte components.

Example:

You have component library on npm called component-library, from which you export a component called MyComponent. For Svelte+TypeScript users, you want to provide typings. Therefore you create a index.d.ts:

import type { Component } from 'svelte';
export declare const MyComponent: Component<{ foo: string }> {}

Typing this makes it possible for IDEs like VS Code with the Svelte extension to provide intellisense and to use the component like this in a Svelte file with TypeScript:

<script lang="ts">
	import { MyComponent } from "component-library";
</script>
<MyComponent foo={'bar'} />
Component
} from 'svelte'
const const component: Component<{}, {}, string>component: interface Component<Props extends Record<string, any> = {}, Exports extends Record<string, any> = {}, Bindings extends keyof Props | "" = string>

Can be used to create strongly typed Svelte components.

Example:

You have component library on npm called component-library, from which you export a component called MyComponent. For Svelte+TypeScript users, you want to provide typings. Therefore you create a index.d.ts:

import type { Component } from 'svelte';
export declare const MyComponent: Component<{ foo: string }> {}

Typing this makes it possible for IDEs like VS Code with the Svelte extension to provide intellisense and to use the component like this in a Svelte file with TypeScript:

<script lang="ts">
	import { MyComponent } from "component-library";
</script>
<MyComponent foo={'bar'} />
Component
export default const component: Component<{}, {}, string>component }
ts
Expand code

Theme Options

navbar

  • title The label text of the item in the navigation bar.
  • to The link address
  • icon An HTML string. Will show the html content instead of title. It is useful to display a custom icon on the navbar.
  • external Determine whether the link is external or not. Would render an external icon if set to true
  • items Children links. If this prop is provided it would render a dropdown instead of a single link.

discord

The web invite address to the project's Discord server. Would show a discord icon on the navigation bar when provided.

github

The web address of the project's GitHub repository. Would show a GitHub icon on the navigation bar when provided

logo

The address of the site's logo, to be shown on the navigation bar.

sidebar

The sidebar can be configured in two ways:

Auto-generated sidebar

Pass an object with enabled: true to automatically generate the sidebar from your routes directory.

  • enabled - Set to true to enable auto sidebar generation
  • routesDir - Custom routes directory path. Default is 'src/routes'
  • roots - Root paths to generate sidebar for, e.g. ['/guide/', '/reference/']. If not specified, auto-detected from top-level route directories. Historical version snapshot trees (/v/{id}/, including locale-composed bases) are skipped.

Pages can control their sidebar appearance via frontmatter:

  • title - Page title, also used as sidebar label
  • sidebarTitle - Override the sidebar label (takes precedence over title)
  • order - Sort order within the same level. Lower numbers appear first. Default is 100
  • sidebar - Set to false to exclude this page from the sidebar
  • collapsible - Whether the sidebar group is collapsible

Manual sidebar

Pass an object where each key is a group route prefix and each value is an array of sidebar items:

  • title The label text of the sidebar item
  • collapsible Determine whether the sidebar group is collapsible or not.
  • to The link address
  • items Children links. If this prop is provided would render a sidebar group instead of a single sidebar item

highlighter

An object that contains custom highlight options.

  • languages - Customize the supported highlight languages. Default is: ['svelte', 'sh', 'js', 'html', 'ts', 'md', 'css', 'scss']
  • themeLight - The code theme that will be applied in light mode. Default is vitesse-light
  • themeDark - The code theme that will be applied in dark mode. Default is night-owl
  • twoslash - Set to true to enable Twoslash. Default is false
  • codeCollapseLines - Collapse code blocks taller than this number of lines. Default is 30; set it to 0 to disable collapsing.
TIP

You can get all the supported languages and themes in Shiki Repo

editLink

The link used for bottom edit this page on GitHub button For example this site uses https://github.com/SveltePress/sveltepress/edit/main/packages/docs-site/src/routes/:route

:route represent the route path, for example: /foo/bar/+page.md

ga

The id provided by Google Analytics. Something like G-XXXXXXX.

Would add gtag script in site head if provided.

Language switcher and default Local Search

When sveltepress({ locales }) is configured, the Default Theme shows a language switcher in the navbar (customize copy with i18n.localeSwitcher / i18n.localePageUnavailable). See Internationalization.

If neither docsearch nor a custom search component is set, the theme uses built-in Local Search (Pagefind). Set search: false to hide search entirely. Details: Search.

search

The supported custom-search hook, with type Component | string. Use it to integrate a Svelte search component such as @sveltepress/meilisearch. A string identifies the wrapper component's source path:

import { const defaultTheme: ThemeDefaultdefaultTheme } from '@sveltepress/theme-default'

function defaultTheme(themeOptions?: DefaultThemeOptions | undefined): ResolvedThemedefaultTheme({
  DefaultThemeOptions.search?: string | boolean | Component<{}, {}, string> | undefinedsearch: '/src/lib/MeilisearchSearch.svelte',
})
ts
Production builds

This public API and the M Search integration are supported. A source .svelte path configured through search is bundled into static production builds — the theme resolves it at build time and loads it as a lazy chunk. Passing a component object directly is not supported, because theme options are serialized to JSON for the client. See the search guide for the wrapper setup.

docsearch

  • appId
  • apiKey
  • indexName

All these values are provided by Algolia. Visit Docsearch for more details.

docsearch is used only when search is not provided.

pwa

See PWA for details.

App-shell client precache

pwa.precacheClient (default false) precaches only the app shell. Set precacheClient: true to restore the previous catch-all client glob. HTML policy remains on pwa.precachePages.

themeColor

The color of window bar when opened as a local PWA application.

  • light - the color that applied on light theme
  • dark - the color that applied on dark theme
  • gradient - the gradient theme color. Would be applied on home page action button and main title. Default is:
const defaultGradient = {
  start: '#fa709a',
  end: '#fee140',
}
js
  • primary - the primary theme color of the site
  • primaryDeep - a darker primary color used for accessible accent text on light backgrounds
  • hover - the hovered links color

i18n

The fixed text contents that can be replaced by your config.

  • onThisPage - The text for "On this page"
  • suggestChangesToThisPage - The text for "Suggest changes to this page"
  • lastUpdateAt - The text for "Last update at:"
  • previousPage - The text for "Previous"
  • nextPage - The text for "Next"
  • expansionTitle - The text for "Click to expand/fold code" in markdown or svelte live code
  • expandCode - The label on the expand bar for collapsed long code blocks
  • heroCode - The localized text inside the default home page code preview: title, messageBefore, messageStrong, messageAfter, tipLabel, and counterLabel
  • versionDeprecated / versionEol - The message in the global old-version lifecycle bar
  • versionDeprecatedLabel / versionEolLabel - The compact lifecycle status label
  • versionViewCurrent - The link label that opens the current version of the same logical page
  • versionNewLabel - The template for page title and section badges. Use {version} for the version label placeholder. Default is "New in {version}"
  • versionNavigationNewLabel - The compact badge shown beside changed sidebar pages and table-of-contents headings automatically associated with :::since markers. Default is "New"
  • pwa - The PWA prompt relative text contents. All of the following fields correspond to the same text in PWA prompt
    • tip
    • reload
    • close
    • appReadyToWorkOffline
    • newContentAvailable
  • footnoteLabel - The auto generated footnotes title. Default is "Footnotes"
Optional title-row action

Title-row action

Default Theme PageLayout can render an optional control on the h1 row, after the title and any version-new badge. Sites that omit it keep today's title row.

Pass a titleAction snippet to PageLayout, or provide a { current } object through TITLE_ROW_ACTION_KEY from @sveltepress/theme-default/context (current is { href, label } or undefined):

<script>
  import { const TITLE_ROW_ACTION_KEY: symbolTITLE_ROW_ACTION_KEY } from '@sveltepress/theme-default/context'
  import { function setContext<T>(key: any, context: T): T

Associates an arbitrary context object with the current component and the specified key and returns that object. The context is then available to the component itself and all of its descendants (including slotted content) with getContext.

Like lifecycle functions, this must be called during component initialisation.

createContext is a type-safe alternative.

setContext
} from 'svelte'
const
const action: {
    href: string;
    label: string;
}
action
=
function $derived<{
    href: string;
    label: string;
}>(expression: {
    href: string;
    label: string;
}): {
    href: string;
    label: string;
}
namespace $derived

Declares derived state, i.e. one that depends on other state variables. The expression inside $derived(...) should be free of side-effects.

Example:

let double = $derived(count * 2);
@seehttps://svelte.dev/docs/svelte/$derived Documentation@paramexpression The derived state expression
$
function $derived<{
    href: string;
    label: string;
}>(expression: {
    href: string;
    label: string;
}): {
    href: string;
    label: string;
}
namespace $derived

Declares derived state, i.e. one that depends on other state variables. The expression inside $derived(...) should be free of side-effects.

Example:

let double = $derived(count * 2);
@seehttps://svelte.dev/docs/svelte/$derived Documentation@paramexpression The derived state expression
derived
({
href: stringhref: '/playground/markdown/basic-writing/', label: stringlabel: 'Open in Playground', })
setContext<{
    readonly current: {
        href: string;
        label: string;
    };
}>(key: any, context: {
    readonly current: {
        href: string;
        label: string;
    };
}): {
    readonly current: {
        href: string;
        label: string;
    };
}

Associates an arbitrary context object with the current component and the specified key and returns that object. The context is then available to the component itself and all of its descendants (including slotted content) with getContext.

Like lifecycle functions, this must be called during component initialisation.

createContext is a type-safe alternative.

setContext
(const TITLE_ROW_ACTION_KEY: symbolTITLE_ROW_ACTION_KEY, {
get
current: {
    href: string;
    label: string;
}
current
() {
return
const action: {
    href: string;
    label: string;
}
action
}, }) </script>
svelte

The action is a same-page link. Theme consumers do not inherit a SveltePress-docs-only control unless they set one.

preBuildIconifyIcons

The icons in Iconify that you want to pre-build for future usage. An object, key is the collection name, value is the icons array. For example these are the icons this site using:

},
preBuildIconifyIcons: {
  'vscode-icons': ['file-type-svelte', 'file-type-markdown', 'file-type-vite'],
  'logos': ['typescript-icon', 'svelte-kit', 'svelte-icon'],
  'emojione': ['artist-palette'],
  'material-symbols': ['history', 'translate', 'search'],
  'ph': ['smiley', 'layout-duotone'],
  'noto': ['package'],
  'solar': ['chat-square-code-outline', 'reorder-outline'],
  'carbon': ['tree-view-alt', 'import-export'],
  'ic': ['sharp-rocket-launch'],
  'tabler': ['icons'],
  'mdi': ['theme-light-dark'],
  'bi': ['list-nested'],
  'openmoji': ['red-apple']
ts

These icons looks like this:

<script>
  import { 
type IconifyIcon = SvelteComponent<Record<string, any>, any, any>
const IconifyIcon: LegacyComponentType
IconifyIcon
} from '@sveltepress/theme-default/components'
import const themeOptions: DefaultThemeOptionsthemeOptions from 'virtual:sveltepress/theme-default' </script> <div class: stringclass="flex items-center gap-4 text-[48px] flex-wrap"> {#each var Object: ObjectConstructor

Provides functionality common to all JavaScript objects.

Object
.
ObjectConstructor.entries<string[]>(o: {
    [s: string]: string[];
} | ArrayLike<string[]>): [string, string[]][] (+1 overload)

Returns an array of key/values of the enumerable own properties of an object

@paramo Object that contains the properties and methods. This can be an object that you created or an existing Document Object Model (DOM) object.
entries
(const themeOptions: DefaultThemeOptionsthemeOptions.
DefaultThemeOptions.preBuildIconifyIcons?: {
    [iconSetName: string]: string[];
} | undefined
preBuildIconifyIcons
|| {}) as [let collection: stringcollection, let names: string[]names]}
{#each let names: string[]names as let name: stringname} <div> <const IconifyIcon: LegacyComponentTypeIconifyIcon {collection: stringcollection} {name: stringname} /> </div> {/each} {/each} </div>
svelte

Global context

The global context key is in the @sveltepress/theme-default/context. You can get all the contexts with the getContext API

This is an example:

<script lang="ts">
  import type { SveltepressContext } from '@sveltepress/theme-default/context'
  import { const SVELTEPRESS_CONTEXT_KEY: symbolSVELTEPRESS_CONTEXT_KEY } from '@sveltepress/theme-default/context'
  import { function getContext<T>(key: any): T

Retrieves the context set with the specified key in the current component or any of its ancestors. If multiple components set the same key, the value from the closest one is returned. A setContext call in the current component is only visible to getContext calls that run after it. Must be called during component initialisation.

createContext is a type-safe alternative.

getContext
} from 'svelte'
const { const isDark: Writable<boolean>isDark } = getContext<SveltepressContext>(key: any): SveltepressContext

Retrieves the context set with the specified key in the current component or any of its ancestors. If multiple components set the same key, the value from the closest one is returned. A setContext call in the current component is only visible to getContext calls that run after it. Must be called during component initialisation.

createContext is a type-safe alternative.

getContext
<SveltepressContext>(const SVELTEPRESS_CONTEXT_KEY: symbolSVELTEPRESS_CONTEXT_KEYlet $isDark: boolean)
</script> <div class:dark-text={let $isDark: boolean$let $isDark: booleanisDark} class: stringclass="text-10"> isDark: {let $isDark: boolean$let $isDark: booleanisDark} </div> <style> .dark-text { --at-apply: 'text-red'; } </style>
svelte

All contexts:

  • $isDark - Determine the current theme is dark or not. It is a reactive svelte store.

Virtual modules

virtual:sveltepress/theme-default

This module hold the theme options that pass to defaultTheme() function.

Here's an example for showing the theme options of this site:

<script>
  import { 
type JsonViewer = SvelteComponent<Record<string, any>, any, any>
const JsonViewer: LegacyComponentType
JsonViewer
} from 'svelte-json-discovery'
import const themeOptions: DefaultThemeOptionsthemeOptions from 'virtual:sveltepress/theme-default' </script> <div class: stringclass="viewer"> <const JsonViewer: LegacyComponentTypeJsonViewer data: DefaultThemeOptionsdata={const themeOptions: DefaultThemeOptionsthemeOptions} /> </div> <style> .viewer { max-height: 40vh; overflow: auto; } :global(html.dark) .viewer { --discovery-background-color: #1a1a1a; --sjd-app-bg: #1a1a1a; --sjd-fmt-color: #999; --sjd-fmt-hover-color: #aaa; --sjd-fmt-property-color: #d17a8c; --sjd-fmt-number-color: #0f8dc2; --sjd-fmt-atom-color: #0f8dc2; --sjd-fmt-string-color: #7faf20; --sjd-fmt-string-underline-color: #85ab51; --sjd-fmt-string-hover-color: #97cf26; --sjd-ui-color: #ccc; --sjd-match-bg: #565638; --sjd-match-border: #a7a73b; --sjd-error-border: #0004; --sjd-error-bg: #622b29; --sjd-error-color: #c66; --sjd-error-message-bg: #443232; --sjd-toggle-color: #72b372; --sjd-touch-button-color: #aaa; --sjd-touch-button-bg: #50505080; --sjd-popup-bg: #333; --sjd-popup-color: #ccc; --sjd-popup-notes-color: #999; --sjd-popup-error-color: #e66; color-scheme: dark; } </style>
svelte
Expand code

Working with TypeScript

You need to include @sveltepress/theme-default/types in your src/app.d.ts to get theme options and virtual modules type tips

/src/app.d.ts
/// <reference types="@sveltepress/theme-default/types" />

// Your other types
ts