Tahta — Design System Cho Slidev, 13 Biến Thể 1 Dòng

Làm slide thuyết trình đẹp luôn là một cuộc chiến. Bạn có thể dùng PowerPoint và mất hàng giờ căn chỉnh. Hoặc dùng Slidev — viết slide bằng Markdown — nhưng rồi vẫn phải lo chuyện theme, màu sắc, bố cục.

Tahta giải quyết vấn đề này triệt để. Nó không chỉ là một theme Slidev — nó là một design system hoàn chỉnh: tokens, components, layouts, với 13 biến thể thiết kế khác nhau, và bạn chuyển đổi giữa chúng chỉ bằng một dòng config.

Tahta Là Gì?#

Tahta (tác giả: Cagdas Salur ↗) là một design system mã nguồn mở (MIT) cho Slidev. Nó cung cấp:

• Token foundation — hệ thống thiết kế 3 tầng (primitives → semantic → variants)
• Component library — Stat, Plot (ECharts), Callout, Badge, Icon, Reveal…
• 30+ layouts — cover, stats, chart, timeline, compare, code, agenda…
• 13 variants — 6 dark / 7 light, mỗi variant là một phong cách hoàn toàn khác

Khác với theme Slidev thông thường (chỉ là stylesheet + vài layout), Tahta là một hệ thống có ràng buộc — tokens được định nghĩa bằng dữ liệu, components đọc token, và variants là một remap của token layer.

13 Variants — 13 Phong Cách#

Điểm ấn tượng nhất của Tahta: bạn đổi toàn bộ diện mạo deck chỉ bằng một dòng:

themeConfig:
  variant: brutalist   # đổi style toàn bộ slide

13 variants có sẵn:

Mỗi variant thay đổi toàn bộ: typeface, shapes, textures, density, motion, palette — không chỉ đổi màu.

Cài Đặt#

npm i slidev-theme-tahta echarts

(ECharts chỉ cần nếu bạn dùng chart layout.)

Sử Dụng#

Khai báo theme trong frontmatter của file .md:

---
theme: slidev-theme-tahta
title: Bài nói của tôi
themeConfig:
  variant: editorial
layout: cover
kicker: Team · 2026
subtitle: Một dòng, 13 phong cách
---

Mỗi layout đọc structured frontmatter — bạn điền dữ liệu, không dàn trang:

---
layout: stats
kicker: Con số
title: Những gì đã thay đổi
stats:
  - { value: 80, unit: "%", label: Giảm latency }
  - { value: 33, unit: "%", label: Tiết kiệm chi phí }
  - { value: 0, label: Giây downtime }
---

Chín dòng, zero markup, một slide stats hoàn chỉnh.

Layouts#

Tahta cung cấp 30+ layouts chia làm 2 nhóm:

Keynote / Pitch: cover, lead, section, default, statement, bigtype, quote, stats, fact, metric, compare, chart, steps, feature, timeline, logos, code, two-cols, image, showcase, bleed, embed, end

Teaching / Technical: agenda, define, columns, panels, reference, vs, code-explain, diagram (Mermaid) + các components <Kbd>, <Terminal>, <FileTree>

Charts hỗ trợ bar, line, area, donut (ECharts) với bảng màu categorical sinh tự động từ accent color. Code layout hỗ trợ Magic Move.

Theme Đi Sâu#

Tahta có 3 cấp độ tuỳ chỉnh, tất cả đều declarative:

1. Variant#

themeConfig:
  variant: brutalist

Đổi toàn bộ style bundle — type, shape, texture, density, motion, palette.

2. Accent#

themeConfig:
  variant: soft
  accent: '#c8f135'   # override brand color

Chỉ override hue — lightness/chroma tự normalize vào variant envelope, đảm bảo màu lúc nào cũng hài hoà, không chói.

3. Tokens#

Hệ thống 3 tầng trong packages/theme/styles/tokens.css:

• Primitives — giá trị gốc (màu, spacing, font size…)
• Semantic tokens — components chỉ đọc tầng này
• Variant bundles — mỗi variant là một :root[data-variant='…'] remap

Muốn custom sâu? Thêm variant mới: viết một block :root[data-variant='…'] là xong.

Branding & Imagery#

themeConfig:
  logo: /path/to/logo.svg
  logoInvert: /path/to/logo-dark.svg

Logo hiển thị lớn trên slide mở đầu, small mark ở footer slide nội dung. Có thể tắt bằng mark: false.

Tahta còn ship module tahta-imagine — crop → duotone theo palette variant → grain. Agent AI có thể dùng nó để tạo ảnh tự động.

Kiến Trúc Hệ Thống#

packages/
  theme/              # slidev-theme-tahta
    tokens.json       # primitives → semantic → variants
    layouts.json      # published contract: mọi layout + field
    variants.json     # published contract: mọi variant
    components/       # Stat, Plot, Callout, Badge...
    layouts/          # 30+ layouts
    modules/          # agent capability modules (branding, imagery)
  grade/              # @zcag/tahta-grade — CLI visual grading

Điểm đặc biệt: layouts.json và variants.json ship trong package như một published contract — máy đọc được. AGENTS.md của theme được generate từ những file này.

Quality Enforcement#

Tahta có CI pipeline kiểm tra:

• Token contract — không có hardcoded values
• WCAG-AA contrast — mọi variant đều pass
• Render test — CI render mọi layout × mọi variant

Công cụ tahta-grade export từng slide ra PNG, flag lỗi blank/broken/overflow, serve side-by-side report với tab cho từng variant.

Tahta vs Theme Thường#

Kết Luận#

Tahta không phải là một theme — nó là một design system cho Slidev. Token-driven, component-based, variant-powered. 13 phong cách, 30+ layouts, zero CSS, một dòng config để đổi toàn bộ diện mạo.

Nếu bạn dùng Slidev và muốn slide đẹp mà không tốn thời gian dàn trang, Tahta là lựa chọn đáng thử.

Live explorer: tahta.cagdas.io ↗ — xem mọi layout × mọi variant.

Tài liệu tham khảo#

• Tahta Live Explorer ↗
• Tahta GitHub Repository ↗
• Slidev Documentation ↗
• ECharts Documentation ↗
• WCAG Contrast Checker ↗