# テーマを作成する

最初のテーマを作成するために、ジェネレータを作成することを推奨します。

$ npm init slidev-theme

作成されたテーマを修正し、試すことができます。例として 公式テーマを参照することもできます。

# できること

テーマでは次のことができます：

• グローバルスタイル
• デフォルトの設定を指定する (フォント、 カラースキーマ、 ハイライト、など）
• カスタムレイアウトを指定する、もしくは既存のレイアウトを上書きする
• カスタムコンポーネントを指定する、もしくは既存のコンポーネントを上書きする
• Windi CSSの設定を拡張する
• MonacoやPrismのようなツールの設定をする

# 規約

テーマはnpmレジストリに公開され、以下の規約に従います。

• パッケージ名はslidev-theme-から始めます。例： slidev-theme-awesome
• package.jsonのkeywordsフィールドに、slidev-themeとslidevを追加します。

# セットアップ

テーマのテスト用プレイグラウンドをセットアップするには、以下のようなフロントマターでexample.mdを作成し、現在のディレクトリをテーマとして使用することをSlidevに伝えます。

---
theme: ./
---

オプションで、いくつかのスクリプトをpackage.jsonに追加することもできます。

// package.json
{
  "scripts": {
    "dev": "slidev example.md",
    "build": "slidev build example.md",
    "export": "slidev export example.md",
    "screenshot": "slidev export example.md --format png"
  }
}

テーマを公開するにはnpm publishを実行すればOKです。ビルドプロセスは必要ありません（つまり、.vueと.tsファイルを直接公開することができ、Slidevはスマートなのでそれらを読み込むことができます）。

テーマのコントリビューションポイントはローカルカスタマイズと同じ規約に従います。命名規約についてはドキュメントを参照してください。

# デフォルトの設定

v0.19から使用可能です

テーマではpackage.jsonを介して、デフォルトの設定を指定できます。

// package.json
{
  "slidev": {
    "default": {
      "aspectRatio": "16/9",
      "canvasWidth": 980,
      "fonts": {
        "sans": "Robot",
        "mono": "Fira Code"
      }
    }
  }
}

フォントはGoogle Fontsから自動でインポートされます。

詳細はフォントとフロントマターの設定を参照してください。

# メタデータ

# カラースキーマ

デフォルトでは、Slidevはライトモードとダークモードの両方をサポートするテーマを想定しています。もしデザインされたカラースキーマだけでテーマを表示したいなら、package.jsonで明示的に指定する必要があります。

// package.json
{
  "name": "slidev-theme-my-cool-theme",
  "keywords": [
    "slidev-theme",
    "slidev"
  ],
  "slidev": {
    "colorSchema": "light" // or "dark" or "both"
  }
}

テーマのスタイルを作成する際にダークモードにアクセスするには、ダークモード特有の設定をdarkクラスで囲みます：

/* 全体に適用されるCSS */

html:not(.dark) {
  /* ライトモードのCSS */
}

html.dark {
  /* ダークモードのCSS */
}

Slidevはカラースキーマを切り替えるために、ページのhtml要素のdarkクラスを切り替えます。

# シンタックスハイライト

シンタックスハイライトの色もテーマで指定することができます。PrismとShikiの両方をサポートしています。詳細はシンタックスハイライトについてのドキュメントを参照してください。

どちらかだけをサポートすることもできます。サンプルとして、デフォルトテーマを参照してください ./styles/code.css / ./setup/shiki.ts

またpackage.jsonでサポートしているシンタックスハイライトを指定することを忘れないでください。

// package.json
{
  "slidev": {
    "highlighter": "shiki" // or "prism" or "all"
  }
}

# Slidevのバージョン

テーマが新しく追加されたSlidevの機能に依存している場合は、テーマが正しく動作するのに必要な最小のSlidevのバージョンを指定する必要があります。

// package.json
{
  "engines": {
    "slidev": ">=0.19.3"
  }
}

ユーザーが指定されたバージョンよりも古いSlidevを使用している場合、例外が発生します。