slidev-themes

Slidev テーマ

このスキルでは、Slidev のプレゼンテーションでテーマを使用、カスタマイズ、作成する方法を説明します。テーマを使うと、スライド全体で一貫したスタイル、レイアウト、コンポーネントを使用できます。

このスキルを使用する場面

• プレゼンテーションのテーマを選ぶとき
• テーマの色やスタイルをカスタマイズするとき
• テーマをイジェクトして変更するとき
• 独自のテーマを作成するとき
• テーマの構造を理解するとき

テーマの使用

テーマの設定

最初のスライドのフロントマターに記述します。

---
theme: seriph
---

テーマ名の規則

• 公式テーマ：短い名前を使用します（seriph、default）
• NPM パッケージ：完全な名前を使用します（slidev-theme-custom）
• ローカルテーマ：パスを使用します（./my-theme）

自動インストール

Slidev は、不足しているテーマのインストールを自動的に促します。

? The theme "seriph" was not found, do you want to install it now? (Y/n)

手動インストール

npm install slidev-theme-seriph

公式テーマ

default

組み込みのデフォルトテーマです。

---
theme: default
---

• すっきりとしたミニマルなデザイン
• ライトモードとダークモードに対応
• 標準的なレイアウト

seriph

セリフ体のタイポグラフィを使った優雅なテーマです。

---
theme: seriph
---

• 優雅なセリフ体フォント
• 洗練されたスタイル
• プロフェッショナルな外観

apple-basic

Apple の基調講演をイメージしたデザインです。

---
theme: apple-basic
---

• すっきりとしたモダンな外観
• Apple らしい美的デザイン
• 邪魔になる要素を最小限に抑制

bricks

カラフルで鮮やかなテーマです。

---
theme: bricks
---

• 大胆な色使い
• 遊び心のあるデザイン
• クリエイティブなコンテンツに最適

shibainu

柴犬をモチーフにしたテーマです。

---
theme: shibainu
---

コミュニティテーマ

テーマギャラリーで、さらに多くのテーマを見つけられます。

人気のコミュニティテーマには、次のものがあります。

• slidev-theme-penguin
• slidev-theme-purplin
• slidev-theme-geist
• slidev-theme-dracula
• slidev-theme-eloc

コミュニティテーマのインストール

npm install slidev-theme-penguin

---
theme: penguin
---

テーマの設定

themeConfig

テーマに設定を渡します。

---
theme: seriph
themeConfig:
  primary: '#5d8392'
  secondary: '#8b5cf6'
  tertiary: '#3b82f6'
  darkBg: '#1a1a2e'
  lightBg: '#f8fafc'
---

使用可能なオプション

各テーマは独自のオプションを定義しています。テーマのドキュメントで、以下の項目を確認してください。

• 色のカスタマイズ
• フォント設定
• レイアウトオプション
• コンポーネントのバリエーション

themeConfig の一般的なオプション

themeConfig:
  # Colors
  primary: '#3b82f6'
  secondary: '#10b981'
  background: '#ffffff'
  text: '#1e293b'

  # Typography
  fontFamily: 'Inter'
  fontSize: '16px'

  # Layout
  padding: '2rem'

配色

自動（デフォルト）

---
colorSchema: auto
---

システム設定に従います。

ライトモードに固定

---
colorSchema: light
---

ダークモードに固定

---
colorSchema: dark
---

テーマのイジェクト

イジェクトする理由

テーマのソースコードを全面的にカスタマイズするには、次のことができます。

• レイアウトの変更
• コンポーネントの変更
• スタイルの大幅なカスタマイズ

イジェクト方法

slidev theme eject

テーマがプロジェクトのローカルファイルにコピーされます。

イジェクト後の構成

my-presentation/
├── slides.md
├── theme/
│   ├── layouts/
│   │   ├── default.vue
│   │   ├── cover.vue
│   │   └── ...
│   ├── components/
│   ├── styles/
│   │   └── index.css
│   └── setup/
│       └── main.ts
└── package.json

イジェクトしたテーマの使用

---
theme: ./theme
---

カスタムテーマの作成

テーマの構成

slidev-theme-mytheme/
├── package.json
├── layouts/
│   ├── default.vue
│   ├── cover.vue
│   ├── center.vue
│   └── two-cols.vue
├── components/
│   └── MyComponent.vue
├── styles/
│   └── index.css
└── setup/
    ├── main.ts
    └── shiki.ts

package.json

{
  "name": "slidev-theme-mytheme",
  "version": "1.0.0",
  "keywords": [
    "slidev-theme",
    "slidev"
  ],
  "engines": {
    "slidev": ">=0.40.0"
  },
  "slidev": {
    "colorSchema": "both",
    "highlighter": "shiki",
    "fonts": {
      "sans": "Inter",
      "mono": "Fira Code"
    }
  }
}

基本レイアウト

<template>
  <div class="slidev-layout default">
    <slot />
  </div>
</template>

<style scoped>
.default {
  padding: 2rem;
  height: 100%;
}
</style>

カバーレイアウト

<script setup>
defineProps({
  background: {
    type: String,
    default: ''
  }
})
</script>

<template>
  <div
    class="slidev-layout cover"
    :style="{
      backgroundImage: background ? `url(${background})` : undefined
    }"
  >
    <div class="content">
      <slot />
    </div>
  </div>
</template>

<style scoped>
.cover {
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
}

.content {
  text-align: center;
}
</style>

グローバルスタイル

/* styles/index.css */
:root {
  --slidev-theme-primary: #3b82f6;
  --slidev-theme-secondary: #10b981;
  --slidev-theme-text: #1e293b;
  --slidev-theme-background: #ffffff;
}

.dark {
  --slidev-theme-text: #f1f5f9;
  --slidev-theme-background: #0f172a;
}

.slidev-layout {
  color: var(--slidev-theme-text);
  background: var(--slidev-theme-background);
}

h1 {
  color: var(--slidev-theme-primary);
  font-weight: 700;
}

a {
  color: var(--slidev-theme-secondary);
}

テーマコンポーネント

<script setup>
defineProps({
  title: String,
  variant: {
    type: String,
    default: 'primary'
  }
})
</script>

<template>
  <div :class="['themed-card', `variant-${variant}`]">
    <h3 v-if="title">{{ title }}</h3>
    <slot />
  </div>
</template>

<style scoped>
.themed-card {
  padding: 1.5rem;
  border-radius: 0.5rem;
  margin: 1rem 0;
}

.variant-primary {
  background: var(--slidev-theme-primary);
  color: white;
}

.variant-secondary {
  background: var(--slidev-theme-secondary);
  color: white;
}
</style>

設定に対応したテーマ

設定の受け取り

<script setup>
import { useSlideContext } from '@slidev/client'

const { $slidev } = useSlideContext()
const primaryColor = $slidev.themeConfigs?.primary || '#3b82f6'
</script>

<template>
  <div class="layout" :style="{ '--primary': primaryColor }">
    <slot />
  </div>
</template>

デフォルト設定

setup/main.ts 内：

import { defineAppSetup } from '@slidev/types'

export default defineAppSetup(({ app }) => {
  app.provide('themeDefaults', {
    primary: '#3b82f6',
    secondary: '#10b981',
  })
})

テーマの公開

NPM で公開する準備

1. package.json に正しいフィールドが設定されていることを確認します
2. 使用方法を記載した README を追加します
3. スクリーンショットを含めます

公開

npm publish

ギャラリーへの登録申請

Slidev のテーマギャラリーリポジトリに PR を作成します。

テーマ作成のベストプラクティス

1. 両方の配色に対応する

/* Light mode */
.slidev-layout {
  background: #ffffff;
  color: #1e293b;
}

/* Dark mode */
.dark .slidev-layout {
  background: #0f172a;
  color: #f1f5f9;
}

2. CSS 変数を使用する

:root {
  --theme-primary: #3b82f6;
}

.primary {
  color: var(--theme-primary);
}

3. 一般的なレイアウトを用意する

必須のレイアウト：

• default
• cover
• center
• two-cols
• section
• end

4. 設定をドキュメント化する

README には次の内容を含めてください。

• 使用可能な themeConfig オプション
• 使用例
• スクリーンショット
• レイアウトの説明

5. 十分にテストする

• すべてのレイアウトをテストします
• ライトモードとダークモードをテストします
• 実際のコンテンツでテストします
• PDF へのエクスポートをテストします

出力形式

テーマを設定するとき：

---
theme: [theme-name]
colorSchema: [auto|light|dark]
themeConfig:
  primary: '[color]'
  secondary: '[color]'
  [other options specific to theme]
---

テーマの選択：

• 選択したテーマ：[名前]
• 理由：[このテーマが適している理由]

カスタマイズ：

• プライマリカラー：[hex]
• セカンダリカラー：[hex]
• カスタムオプション：[リスト]

追加ファイル（イジェクトした場合）：

• layouts/[modified].vue
• styles/index.css