Install
npm install --save @sveltepress/theme-default yarn add @sveltepress/theme-default pnpm install @sveltepress/theme-default bun add @sveltepress/theme-default Add in your Vite config
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 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: booleanEnable auto-generated sidebar
enabled: boolean
/**
* Routes directory, default 'src/routes'
*/
AutoSidebarOptions.routesDir?: string | undefinedRoutes 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[] | undefinedRoot 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[] | undefinedWhich 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 | undefinedWhich 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 | undefinedDarker 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 | undefinedCode blocks taller than this many lines start collapsed with an
"Expand code" bar. Set to 0 to disable collapsing.
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 | undefinedLabel 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 | undefinedLabel of the language switcher trigger.
localeSwitcher?: string
/** Notice shown after switching locale fell back to that locale's home. */
localePageUnavailable?: string | undefinedNotice 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 | undefinedTemplate 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 | undefinedCompact 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
}
Theme Options
navbar
titleThe label text of the item in the navigation bar.toThe link addressiconAn HTML string. Will show the html content instead oftitle. It is useful to display a custom icon on the navbar.externalDetermine whether the link is external or not. Would render an external icon if set totrueitemsChildren 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 totrueto enable auto sidebar generationroutesDir- 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 labelsidebarTitle- Override the sidebar label (takes precedence overtitle)order- Sort order within the same level. Lower numbers appear first. Default is100sidebar- Set tofalseto exclude this page from the sidebarcollapsible- 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:
titleThe label text of the sidebar itemcollapsibleDetermine whether the sidebar group is collapsible or not.toThe link addressitemsChildren 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 isvitesse-lightthemeDark- The code theme that will be applied in dark mode. Default isnight-owltwoslash- Set totrueto enable Twoslash. Default isfalsecodeCollapseLines- Collapse code blocks taller than this number of lines. Default is30; set it to0to disable collapsing.
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.
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',
}) 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
appIdapiKeyindexName
All these values are provided by Algolia. Visit Docsearch for more details.
docsearchis used only whensearchis not provided.
pwa
See PWA for details.
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 themedark- the color that applied on dark themegradient- the gradient theme color. Would be applied on home page action button and main title. Default is:
const defaultGradient = {
start: '#fa709a',
end: '#fee140',
} primary- the primary theme color of the siteprimaryDeep- a darker primary color used for accessible accent text on light backgroundshover- 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 codeexpandCode- The label on the expand bar for collapsed long code blocksheroCode- The localized text inside the default home page code preview:title,messageBefore,messageStrong,messageAfter,tipLabel, andcounterLabelversionDeprecated/versionEol- The message in the global old-version lifecycle barversionDeprecatedLabel/versionEolLabel- The compact lifecycle status labelversionViewCurrent- The link label that opens the current version of the same logical pageversionNewLabel- 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:::sincemarkers. Default is"New"pwa- The PWA prompt relative text contents. All of the following fields correspond to the same text in PWA prompttipreloadcloseappReadyToWorkOfflinenewContentAvailable
footnoteLabel- The auto generated footnotes title. Default is"Footnotes"
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): TAssociates 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);
$
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);
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> 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'] 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: ObjectConstructorProvides 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
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> 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): TRetrieves 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): SveltepressContextRetrieves 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> 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> 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
/// <reference types="@sveltepress/theme-default/types" />
// Your other types