Community Themes

Explore and discover community-created themes for VitePress that extend beyond the default theme capabilities.

Popular Community Themes

VitePress Theme Hope

• Author: Mr.Hope
• GitHub: vuepress-theme-hope/vitepress-theme-hope
• Features:
  • Blog functionality
  • Advanced sidebar
  • Dark mode support
  • SEO optimization
  • PWA support
  • Comment system integration
• Installation:

  npm install vitepress-theme-hope

VitePress Theme Demoblock

• Author: xinlei3166
• GitHub: xinlei3166/vitepress-theme-demoblock
• Features:
  • Live code demos
  • Component playground
  • Syntax highlighting
  • Mobile responsive
• Use Case: Component library documentation

VitePress Theme Minimalist

• Author: Community Contributor
• Features:
  • Clean, minimal design
  • Fast loading
  • Typography focused
  • Accessibility optimized
• Best For: Technical documentation, blogs

VitePress Theme Corporate

• Author: Enterprise Developer
• Features:
  • Professional design
  • Brand customization
  • Team pages
  • Contact forms
  • Multi-language support
• Best For: Company documentation, product sites

Theme Categories

Blog Themes

VitePress Blog Theme

• Features:
  • Post listing and pagination
  • Tag and category support
  • RSS feed generation
  • Social media integration
  • Author profiles
• Configuration:

  // .vitepress/config.js
  export default {
    extends: 'vitepress-theme-blog',
    themeConfig: {
      blog: {
        postsDir: 'posts',
        authorsDir: 'authors',
        tagsDir: 'tags'
      }
    }
  }

Personal Blog Theme

• Features:
  • Personal branding
  • Portfolio integration
  • Social links
  • Newsletter signup
  • Analytics integration

Documentation Themes

API Documentation Theme

• Features:
  • API endpoint documentation
  • Interactive examples
  • Code generation
  • Version management
  • Authentication docs
• Example Usage:

  ---
  title: User API
  endpoint: /api/users
  method: GET
  ---
  
  # User Management API
  
  Retrieve user information from the system.

Component Library Theme

• Features:
  • Component showcase
  • Props documentation
  • Live examples
  • Design tokens
  • Usage guidelines

Portfolio Themes

Developer Portfolio

• Features:
  • Project showcase
  • Skills section
  • Experience timeline
  • Contact information
  • Resume download

Designer Portfolio

• Features:
  • Visual project gallery
  • Case studies
  • Design process
  • Client testimonials
  • Service offerings

Theme Development

Creating Custom Themes

Basic Theme Structure

my-vitepress-theme/
├── Layout.vue
├── index.js
├── components/
│   ├── Header.vue
│   ├── Sidebar.vue
│   └── Footer.vue
├── styles/
│   ├── vars.css
│   └── base.css
└── package.json

Theme Entry Point

// index.js
import Layout from './Layout.vue'
import './styles/vars.css'
import './styles/base.css'

export default {
  Layout,
  enhanceApp({ app, router, siteData }) {
    // App-level enhancements
  }
}

Main Layout Component

<!-- Layout.vue -->
<template>
  <div class="theme-container">
    <Header />
    <div class="main-content">
      <Sidebar v-if="showSidebar" />
      <div class="content-wrapper">
        <Content />
      </div>
    </div>
    <Footer />
  </div>
</template>

<script setup>
import { useData } from 'vitepress'
import Header from './components/Header.vue'
import Sidebar from './components/Sidebar.vue'
import Footer from './components/Footer.vue'

const { page, frontmatter } = useData()

const showSidebar = computed(() => {
  return frontmatter.value.sidebar !== false
})
</script>

Theme Configuration

Theme Options

// .vitepress/config.js
export default {
  themeConfig: {
    // Custom theme options
    brand: {
      logo: '/logo.svg',
      name: 'My Site',
      tagline: 'Amazing documentation'
    },
    colors: {
      primary: '#3eaf7c',
      secondary: '#2c3e50'
    },
    layout: {
      sidebar: true,
      toc: true,
      breadcrumbs: true
    }
  }
}

Extending Default Theme

// .vitepress/theme/index.js
import DefaultTheme from 'vitepress/theme'
import CustomLayout from './CustomLayout.vue'
import './custom.css'

export default {
  ...DefaultTheme,
  Layout: CustomLayout,
  enhanceApp({ app }) {
    // Custom app enhancements
  }
}

Theme Marketplace

Official Theme Registry

• Location: VitePress official documentation
• Submission Process: GitHub PR to themes list
• Requirements: Documentation, examples, maintenance commitment

Community Platforms

• npm: Search for "vitepress-theme"
• GitHub: Topic "vitepress-theme"
• Awesome VitePress: Curated list of themes and plugins

Theme Directories

• VitePress Themes: Community-maintained directory
• Vue Ecosystem: Vue.js community resources
• Static Site Themes: Cross-platform theme collections

Theme Installation and Usage

Installation Methods

npm Installation

npm install your-vitepress-theme

Git Submodule

git submodule add https://github.com/user/theme.git .vitepress/theme

Local Development

# Clone theme repository
git clone https://github.com/user/theme.git
cd theme
npm link

# Link in your project
cd your-project
npm link your-vitepress-theme

Configuration

// .vitepress/config.js
import { defineConfig } from 'vitepress'

export default defineConfig({
  // Use custom theme
  theme: 'your-vitepress-theme',
  
  // Or extend default theme
  extends: 'vitepress/theme',
  
  themeConfig: {
    // Theme-specific configuration
  }
})

Theme Customization

CSS Variables

/* .vitepress/theme/custom.css */
:root {
  --vp-c-brand: #646cff;
  --vp-c-brand-light: #747bff;
  --vp-c-brand-lighter: #9499ff;
  --vp-c-brand-lightest: #bcc0ff;
  --vp-c-brand-dark: #535bf2;
  --vp-c-brand-darker: #454ce1;
  --vp-c-brand-dimm: rgba(100, 108, 255, 0.08);
}

Component Overrides

<!-- .vitepress/theme/components/CustomHeader.vue -->
<template>
  <header class="custom-header">
    <div class="brand">
      <img :src="logo" :alt="title" />
      <span>{{ title }}</span>
    </div>
    <nav class="nav">
      <a v-for="item in nav" :key="item.text" :href="item.link">
        {{ item.text }}
      </a>
    </nav>
  </header>
</template>

Layout Modifications

<!-- .vitepress/theme/Layout.vue -->
<template>
  <Layout>
    <template #nav-bar-title-after>
      <span class="version-badge">v2.0</span>
    </template>
    
    <template #sidebar-nav-before>
      <div class="sponsor-banner">
        <a href="/sponsor">Support Us</a>
      </div>
    </template>
    
    <template #page-bottom>
      <div class="page-feedback">
        <button @click="sendFeedback">Was this helpful?</button>
      </div>
    </template>
  </Layout>
</template>

Theme Best Practices

Performance

• Optimize images and assets
• Use CSS variables for theming
• Implement lazy loading
• Minimize JavaScript bundle size

Accessibility

• Semantic HTML structure
• Proper ARIA labels
• Keyboard navigation support
• Color contrast compliance

SEO

• Proper meta tags
• Structured data
• Sitemap generation
• Social media optimization

Maintenance

• Regular updates
• Backward compatibility
• Clear documentation
• Community support

Contributing to Themes

Theme Development Guidelines

1. Code Quality: Follow Vue.js and VitePress conventions
2. Documentation: Provide comprehensive setup and usage docs
3. Examples: Include demo sites and use cases
4. Testing: Ensure compatibility across VitePress versions
5. Licensing: Use appropriate open source licenses

Submission Process

1. Create theme repository
2. Add comprehensive README
3. Include demo site
4. Submit to theme directories
5. Engage with community feedback

Community Support

• Discord: VitePress community server
• GitHub Discussions: Theme-specific discussions
• Stack Overflow: Technical questions and answers
• Reddit: r/vuejs community

Theme Showcase

Featured Themes

• VitePress Theme Hope: Full-featured blog and documentation theme
• VitePress Theme Demoblock: Component demonstration theme
• VitePress Theme Minimalist: Clean and simple design
• VitePress Theme Corporate: Professional business theme

Community Favorites

• Most starred themes on GitHub
• Most downloaded themes on npm
• Community-recommended themes
• Award-winning designs

---

The community theme ecosystem is constantly growing. Check back regularly for new themes and updates to existing ones.