Default theme

Install

npm install --save @sveltepress/theme-default
npm install --save @sveltepress/theme-default
sh

Add in your vite config

vite.config.(js|ts)
+
+
import { defineConfig } from 'vite'
import { sveltepress } from '@sveltepress/vite'

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

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

export default config
import { defineConfig } from 'vite'
import { sveltepress } from '@sveltepress/vite'

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

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

export default config
js

Theme Options

export interface DefaultThemeOptions {
  navbar: Array<LinkItem>
  github?: string
  logo?: string
  sidebar?: Record<string, LinkItem[]>
  editLink?: string
  discord?: string
  ga?: string
  pwa?: SvelteKitPWAOptions & {
    darkManifest?: string
  }
  docsearch?: {
    appId: string
    apiKey: string
    indexName: string
  }
  themeColor?: {
    light: string
    dark: string
    primary?: string
    hover?: string
    gradient?: {
      start: string
      end: string
    }
  }
  highlighter?: {
    languages?: Lang[]
    themeLight?: string
    themeDark?: string
  }
  i18n?: {
    onThisPage?: string
    suggestChangesToThisPage?: string
    lastUpdateAt?: string
    previousPage?: string
    nextPage?: string
    expansionTitle?: string
    pwa?: {
      tip?: string
      reload?: string
      close?: string
      appReadyToWorkOffline?: string
      newContentAvailable?: string
    }
    footnoteLabel?: string
  }
  preBuildIconifyIcons?: {
    [iconSetName: string]: string[]
  }
}
export interface DefaultThemeOptions {
  navbar: Array<LinkItem>
  github?: string
  logo?: string
  sidebar?: Record<string, LinkItem[]>
  editLink?: string
  discord?: string
  ga?: string
  pwa?: SvelteKitPWAOptions & {
    darkManifest?: string
  }
  docsearch?: {
    appId: string
    apiKey: string
    indexName: string
  }
  themeColor?: {
    light: string
    dark: string
    primary?: string
    hover?: string
    gradient?: {
      start: string
      end: string
    }
  }
  highlighter?: {
    languages?: Lang[]
    themeLight?: string
    themeDark?: string
  }
  i18n?: {
    onThisPage?: string
    suggestChangesToThisPage?: string
    lastUpdateAt?: string
    previousPage?: string
    nextPage?: string
    expansionTitle?: string
    pwa?: {
      tip?: string
      reload?: string
      close?: string
      appReadyToWorkOffline?: string
      newContentAvailable?: string
    }
    footnoteLabel?: string
  }
  preBuildIconifyIcons?: {
    [iconSetName: string]: string[]
  }
}
ts

navbar

  • title
    The label text of the navbar item
  • 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 would render a dropdown instead of a single nav link

discord

The discord chat channel link
Would show a discord icon on the navbar when provided

github

The github repo link
Would show a github icon on the navbar when provided

logo

The logo image
Would show on the navbar

sidebar

An object, key is the group route prefix, value is an array of object with following fields:

  • title
    The label text of the sidebar item
  • collapsible
    Determine whtheme-default/+paether 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

highlight

An object that contains custom highlight options.

  • languages - Customize the supported highlight languages. Default is:
const DEFAULT_SUPPORT_LANGUAGES: Lang[] = ['svelte', 'sh', 'js', 'html', 'ts', 'md', 'css', 'scss']

const DEFAULT_SUPPORT_LANGUAGES: Lang[] = ['svelte', 'sh', 'js', 'html', 'ts', 'md', 'css', 'scss']
ts
  • themeLight - The code theme that will be applied in light mode. Default is vitesse-light
  • darkTheme - The code theme that will be applied in dark mode. Default is night-owl

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 use https://github.com/Blackman99/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.

docsearch

  • appId
  • apiKey
  • indexName

All these values are provided by the docsearch.
Visit

Docsearch
for more details.

pwa

See

PWA
for details.

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',
}
const defaultGradient = {
  start: '#fa709a',
  end: '#fee140',
}
js
  • primary - the primary theme color of the site
  • 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
  • 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"

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'],
  'emojione': ['artist-palette'],
  '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'],
}
preBuildIconifyIcons: {
  'vscode-icons': ['file-type-svelte', 'file-type-markdown', 'file-type-vite'],
  'logos': ['typescript-icon', 'svelte-kit'],
  'emojione': ['artist-palette'],
  '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'],
}
ts

These icons looks like this:

<script>
  import { IconifyIcon } from '@sveltepress/theme-default/components'
  import themeOptions from 'virtual:sveltepress/theme-default'
</script>
<div class="flex items-center gap-4 text-[48px] flex-wrap">
  {#each Object.entries(themeOptions.preBuildIconifyIcons) as [collection, names]}
    {#each names as name}
      <div>
        <IconifyIcon {collection} {name} />
      </div>
    {/each}
  {/each}
</div>
<script>
  import { IconifyIcon } from '@sveltepress/theme-default/components'
  import themeOptions from 'virtual:sveltepress/theme-default'
</script>
<div class="flex items-center gap-4 text-[48px] flex-wrap">
  {#each Object.entries(themeOptions.preBuildIconifyIcons) as [collection, names]}
    {#each names as name}
      <div>
        <IconifyIcon {collection} {name} />
      </div>
    {/each}
  {/each}
</div>
svelte
Click fold/expand code

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:

    {
  "navbar": [
    {
      "title": "Guide",
      "to": "/guide/introduction/"
    },
    {
      "title": "Reference",
      "to": "/reference/vite-plugin/"
    },
    {
      "icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 32 32\"><path fill=\"currentColor\" d=\"M27.85 29H30l-6-15h-2.35l-6 15h2.15l1.6-4h6.85zm-7.65-6l2.62-6.56L25.45 23zM18 7V5h-7V2H9v3H2v2h10.74a14.71 14.71 0 0 1-3.19 6.18A13.5 13.5 0 0 1 7.26 9h-2.1a16.47 16.47 0 0 0 3 5.58A16.84 16.84 0 0 1 3 18l.75 1.86A18.47 18.47 0 0 0 9.53 16a16.92 16.92 0 0 0 5.76 3.84L16 18a14.48 14.48 0 0 1-5.12-3.37A17.64 17.64 0 0 0 14.8 7z\"/></svg>",
      "items": [
        {
          "title": "简体中文",
          "to": "https://cn.sveltepress.site/",
          "external": true
        }
      ]
    }
  ],
  "sidebar": {
    "/guide/": [
      {
        "title": "Introduction",
        "collapsible": true,
        "items": [
          {
            "title": "What is sveltepress",
            "to": "/guide/introduction/"
          },
          {
            "title": "Quick start",
            "to": "/guide/quick-start/"
          },
          {
            "title": "Themes",
            "to": "/guide/themes/"
          },
          {
            "title": "Working with Typescript",
            "to": "/guide/typescript/"
          }
        ]
      },
      {
        "title": "Markdown features",
        "items": [
          {
            "title": "Basic writing",
            "to": "/guide/markdown/basic-writing/"
          },
          {
            "title": "Frontmatter",
            "to": "/guide/markdown/frontmatter/"
          },
          {
            "title": "Svelte in markdown",
            "to": "/guide/markdown/svelte-in-markdown/"
          }
        ]
      },
      {
        "title": "Default theme features",
        "collapsible": true,
        "items": [
          {
            "title": "Frontmatter",
            "to": "/guide/default-theme/frontmatter/"
          },
          {
            "title": "Navbar",
            "to": "/guide/default-theme/navbar/"
          },
          {
            "title": "Sidebar",
            "to": "/guide/default-theme/sidebar/"
          },
          {
            "title": "Home page",
            "to": "/guide/default-theme/home-page/"
          },
          {
            "title": "Built-in Components",
            "to": "/guide/default-theme/builtin-components/"
          },
          {
            "title": "Headings & Anchors",
            "to": "/guide/default-theme/headings-and-anchors/"
          },
          {
            "title": "Admonitions",
            "to": "/guide/default-theme/admonitions/"
          },
          {
            "title": "Code related",
            "to": "/guide/default-theme/code-related/"
          },
          {
            "title": "Unocss",
            "to": "/guide/default-theme/unocss/"
          },
          {
            "title": "Docsearch",
            "to": "/guide/default-theme/docsearch/"
          },
          {
            "title": "PWA",
            "to": "/guide/default-theme/pwa/"
          },
          {
            "title": "Google Analytics",
            "to": "/guide/default-theme/google-analytics/"
          }
        ]
      }
    ],
    "/reference/": [
      {
        "title": "Reference",
        "items": [
          {
            "title": "Vite plugin",
            "to": "/reference/vite-plugin/"
          },
          {
            "title": "Default theme",
            "to": "/reference/default-theme/"
          }
        ]
      }
    ]
  },
  "editLink": "https://github.com/Blackman99/sveltepress/edit/main/packages/docs-site/src/routes/:route",
  "github": "https://github.com/Blackman99/sveltepress",
  "logo": "/sveltepress.svg",
  "discord": "https://discord.gg/MeYRrGGxbE",
  "ga": "G-J2W78BKCHB",
  "docsearch": {
    "apiKey": "fbed412316ec83ff28e9a916161bf715",
    "appId": "4D30VFIAMG",
    "indexName": "sveltepress"
  },
  "pwa": {
    "scope": "/",
    "base": "/",
    "strategies": "injectManifest",
    "kit": {
      "trailingSlash": "always"
    },
    "darkManifest": "/manifest-dark.webmanifest",
    "manifest": {
      "start_url": "/",
      "scope": "/",
      "name": "Sveltepress",
      "short_name": "Sveltepress",
      "icons": [
        {
          "src": "/android-chrome-192x192.png",
          "sizes": "192x192",
          "type": "image/png"
        },
        {
          "src": "/android-chrome-512x512.png",
          "sizes": "512x512",
          "type": "image/png"
        }
      ],
      "theme_color": "#f2f2f2",
      "background_color": "#f2f2f2",
      "display": "standalone"
    }
  },
  "themeColor": {
    "light": "#f2f2f2",
    "dark": "#18181b"
  },
  "preBuildIconifyIcons": {
    "vscode-icons": [
      "file-type-svelte",
      "file-type-markdown",
      "file-type-vite"
    ],
    "logos": [
      "typescript-icon",
      "svelte-kit"
    ],
    "emojione": [
      "artist-palette"
    ],
    "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"
    ]
  }
}
  
<script>
  import themeOptions from 'virtual:sveltepress/theme-default'
</script>
<div class="viewer">
  <pre>
    {JSON.stringify(themeOptions, null, 2)}
  </pre>
</div>
<style>
  .viewer {
    max-height: 40vh;
    overflow-y: auto;
    overflow-x: hidden;
  }
</style>
<script>
  import themeOptions from 'virtual:sveltepress/theme-default'
</script>
<div class="viewer">
  <pre>
    {JSON.stringify(themeOptions, null, 2)}
  </pre>
</div>
<style>
  .viewer {
    max-height: 40vh;
    overflow-y: auto;
    overflow-x: hidden;
  }
</style>
svelte
Click fold/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
/// <reference types="@sveltepress/theme-default/types" />

// Your other types
ts
Suggest changes to this page
Last update at: 2023/08/10 20:32:21