slidev-theme-troshab

A minimal, universal Slidev theme built around one flexible layout and a library of 36 ready-to-use components. Supports both light (Alucard) and dark (Dracula) color schemes.

Install

---
theme: @troshab/slidev-theme-troshab
---

What makes it different

Single universal layout - layout: slide with three modes covers every slide type. No need to memorize a dozen layout names.

Component library - 10 primitives and 26 widgets drop into any slide as Vue components. Everything from KPI metrics and pricing tables to iMessage-style conversations and device mockups.

Design system - 3-layer Dracula/Alucard palette (11 color families × 11 shades), IBM Plex Sans/Mono typography, and a motion system based on IBM Carbon. All tokens are CSS variables - components never hardcode colors.

1920×1080 canvas - optimized for Full HD projectors and screens. All sizing uses rem units that scale automatically from the root font-size, so the layout adapts cleanly if the canvas resolution changes.

v-click auto-registration - interactive components (AnimatedCounter, Countdown, ImageCompare, Stepper, Conversation, StyledText spoilers) register their own click slots. No clicks: frontmatter, no <v-click> wrappers needed.

Accessibility - WCAG AA contrast (target AAA), BDA dyslexia-friendly spacing (word-spacing 0.08em, letter-spacing 0.02em), keyboard focus styles, 5% safe-zone padding.

5 built-in audits - contrast, Shiki tokens, chart palette, typography, integrity. All must exit 0 before release.

Layout

All slides use layout: slide with mode: fullscreen | split | columns (default: columns).

---
layout: slide
mode: fullscreen
---

::bg::
<Background :gradient="'section'" />

::default::
# Section Title

---
layout: slide
mode: split
split: [5, 7]
---

::left-bg::
<Background src="/photo.jpg" />

::right::
# Content here

---
layout: slide
cols: 2
---

# Title

::col1::
Left content

::col2::
Right content

Components

Primitives

| Component | Description | |-----------|-------------| | Background | Bg-slot wrapper: color, gradient, image, overlay | | StyledText | Universal text: heading/block/inline, color, spoiler v-click | | Image | Content image with caption, border, sizing | | Icon | Phosphor icon with size and color | | Metric | KPI display with count-up animation | | PersonCard | Speaker/member card with avatar | | Iframe | External content embed | | ColorSwatch | Theme color display with resolved value | | StyledList | Themed list markers: check / arrow / star / number | | CodeHighlight | Syntax-highlighted code block (Shiki) |

Widgets

| Component | Description | |-----------|-------------| | Stepper | Steps / timeline / progress with dots, numbers, or arrows | | Callout | Admonition: info, tip, warning, danger, note | | Card / CardGrid | Feature cards in responsive grid | | QRCode | Theme-aware SVG QR code | | Tags | Tag pills | | Progress | Presentation progress bar | | SpeechBubble | Speech and thought bubbles | | Conversation | iMessage-style chat with v-click reveal | | DeviceMockup | Device frames: iPhone, MacBook, browser, tablet | | Countdown | Animated timer with v-click trigger | | AnimatedCounter | Count-up number animation | | Typewriter | Text typing animation | | Confetti | Celebration particles (bg slot) | | ImageCompare | Before/after image slider with v-click | | CodeDiff | Code comparison: split or unified view | | Testimonial | Customer quote card with rating | | QuoteBlock | Large centered quote with decorative mark | | Funnel | Conversion funnel | | Pyramid | Hierarchical levels | | PricingTable | Pricing tier cards | | MatrixGrid | 2×2 quadrant grid | | SwotGrid | SWOT analysis (named MatrixGrid wrapper) | | CaseStudy | Multi-section case study card | | Definition | Term definition card | | MermaidChart | Mermaid diagram wrapper with auto-theming |

Addons

• Asciinema - terminal recordings: <Asciinema src="/casts/demo.cast" autoplay />
• FancyArrow - hand-drawn arrows: <FancyArrow x1="100" y1="100" x2="300" y2="200" />
• PreloadImages - automatic image preloading (configurable look-ahead)

Development

npm run dev          # both themes in parallel (dark :30303, light :31313)
npm run dev:dark     # dark only
npm run dev:light    # light only

Audits

npm run audit:all       # run all 5 audits
npm run audit:contrast  # WCAG contrast ratios
npm run audit:shiki     # Shiki token contrast + hue distinguishability
npm run audit:charts    # chart palette grayscale spread
npm run audit:typography
npm run audit:integrity

Visual export

npx slidev export example_white.md --format png --output ./slides-export/white
npx slidev export example_dark.md --format png --output ./slides-export/black

License

PolyForm Noncommercial 1.0.0 - free for non-commercial use.