Trito

Visually refurbished VitePress default theme

Demos • About VitePress

❓ What is Trito?

Trito (pronounced as try-toe) is a VitePress theme, which determines the look and feel of a VitePress generated site.

Trito titles itself as "visually refurbished VitePress default theme", thus it does exactly no more than the functionalities achieved by the default theme. What makes it differs from the default one is pure UI/UX improvements.

Trito is designed to be a drop-in replacement to the default theme. If you want to make your site different from all other VitePress websites, please choose Trito 🌊. Don't forget to add a star ⭐!

🚀 How to use it?

Firstly install it using your favorite package manager, choose devDependency or not based on your use case, here we take npm as an example:

npm add vitepress-theme-trito

Then modify your .vitepress/theme/index.ts or .vitepress/theme/index.js to be like this:

import Trito from 'vitepress-theme-trito';
export default Trito;

Go to .vitepress/config.ts or .vitepress/config.js and do the modifications below:

// ... some other imports
import { ThemeConfig } from 'vitepress-theme-trito'; // specially for TypeScript
import { defineConfig } from 'vitepress';

export default defineConfig<ThemeConfig>({ // [specially for TypeScript] the type parameter makes VitePress aware of the theme
    // ... your config
    vite: {
        ssr: {
            noExternal: ['vitepress-theme-trito'], // this ensures the website can build
        },
    },
})

The extension of the theme is exactly the same as the default theme, refer to how to extend the theme and how to use the a custom theme in the official documentation for more detail.

🛠 Configuration

Trito keeps minimal intrusion to the default theme APIs.

If you want to stylize the styles, you can see all configurable CSS variables in this file. For how to extend the styles, consult this official page.

The theme configuration is almost identical to the default theme's, which is documented well at the reference page. But some options do differ in nuances, see below:

Frontmatters

Removed Home Page Option hero.image

• Replaced by logoLarge theme config

New Common Markdown Page (including Home) Option unstyled: boolean

• By setting it to true, pre-made styles will not be applied to the text content of the page.

Slots

Doc Page content-before

• Slot for content before the main content card (not in the card).

Doc Page content-after

• Slot for content after the main content card (not in the card).

Theme Config

New Option logoLarge

• Type: ThemeableImage
• It determines the hero image and the image in loading view, replacing hero.image in home frontmatter.

New Option i18n

• Adds or overrides translation strings.
• Type: Object, values are translation texts.

New Option NotFoundLink

• Configures the target of the return link shown in the 404 page.

Removed outline.label

• Handled by internal i18n utility.
• Now outline directly configures the outline level, refer to official docs.

Removed editLink.text

• Handled by internal i18n utility.
• Now editLink directly configures the link pattern, refer to official docs.

Removed lastUpdated.text

• Handled by internal i18n utility.
• Now lastUpdated directly configures the date format, refer to official docs.

Removed carbonads

• It downgrades UX and the UI has no room for it.

Removed darkModeSwitchLabel, lightModeSwitchTitle, darkModeSwitchTitle, sidebarMenuLabel, returnToTopLabel, langMenuLabel, notFound

• All handled by the internal i18n option.

🌐 Sites Using Trito

• Pointeract documentation
• Hēsperus' portfolio
• ... Missing yours? Add here!

Disclaimer: vitepress-theme-trito is not related to, or effected by, the content of any of the sites above.

📝 Copyright & License

Trito is adapted from VitePress default theme and released under the MIT License.

Copyright ©️ 2025-2026 Hesprs (Hēsperus) (modifications), 2019-2025 Yuxi (Evan) You (unchanged parts)