Does this skill help with dark mode support?

Absolutely. It provides best practices for using CSS variables and the colorSchema attribute to ensure your theme looks great in light, dark, and system-default modes.

How do I change the primary color of a Slidev theme?

You can modify the themeConfig section in your first slide's YAML frontmatter to update the primary, secondary, and background color attributes.

What does 'ejecting' a theme mean in Slidev?

Ejecting is a process that copies a theme's source files (layouts, components, and styles) into your local project directory, allowing you to modify the underlying code directly.

Can I use my own Vue components in a Slidev theme?

Yes, Slidev themes support a dedicated components/ directory where you can define custom Vue components that are automatically available throughout your slides.

Slidev Theme Customization

Name: Slidev Theme Customization
Author: yoanbernabeu

byyoanbernabeu

•

Design Tools

Manages, customizes, and creates professional themes for Slidev presentations using Vue-based layouts and CSS variables.

The Slidev Theme Customization skill provides specialized guidance for mastering the visual presentation layer of Slidev. It enables users to seamlessly switch between official and community themes, configure brand-specific colors and typography via themeConfig, and perform advanced 'ejecting' to gain full source-code control over layouts. Whether you are applying a minimal default look or building a complex branded design system from scratch, this skill ensures your slides are responsive, accessible, and developer-friendly using Vue.js and Tailwind CSS patterns.

Key Features

01Automated installation and configuration of official and community Slidev themes

02Standardized framework for creating and publishing custom Slidev themes to NPM

03Granular control over theme colors, typography, and layout settings via themeConfig

0413 GitHub stars

05Support for theme 'ejecting' to enable deep customization of Vue layouts and components

06Native support for dark/light mode synchronization and system preference sensing

Use Cases

01Modifying standard layouts to incorporate specialized UI components like themed callouts

02Building reusable presentation templates for workshops, documentation, and meetups

03Branding a technical presentation with corporate color palettes and custom typography

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add yoanbernabeu/slidev-skills customization

For use in Claude.ai and ChatGPT

Download Skill