# テーマ

shikiphpには**Shikiの全テーマ**が含まれます。VS Codeの全65テーマは、[`tm-themes`](https://github.com/shikijs/textmate-grammars-themes) 1.12.2のテーマセットで、Shiki 3.23.0に収録されています。内訳はダーク44、ライト21です。人気のIDには`github-dark`、`github-light`、`nord`、`dracula`、`vitesse-dark`、`vitesse-light`、`one-dark-pro`、`monokai`、`solarized-dark`、さらに`catppuccin-*`と`material-theme-*`の各ファミリーがあります。

[`theme`](https://shikiphp.inline0.dev/ja/docs/options#theme)オプションでテーマを1つ、または[`themes`](https://shikiphp.inline0.dev/ja/docs/options#themes)を使って2つ以上指定し、ライト／ダークのCSS変数出力を行います。[はじめに](https://shikiphp.inline0.dev/ja/docs/getting-started#dual-themes-light-and-dark)を参照してください。

```php
use Shikiphp\Shikiphp;

echo Shikiphp::codeToHtml('const answer = 42', [
    'lang'   => 'js',
    'themes' => ['light' => 'github-light', 'dark' => 'github-dark'],
]);
```

バンドルにないテーマIDを指定すると、`Shikiphp\Exceptions\Highlight`が発生し、メッセージ`Unknown theme "…"`が表示されます。

## テーマで設定できる項目

テーマはブロックの前景色と背景色（`<pre>`に設定）に加え、各トークンの色とフォントスタイル（斜体、太字、下線、取り消し線）を設定します。スタイルはスコープセレクターの具体性に基づいて決まります。`lang: 'ansi'`の場合は、テーマの`terminal.ansi*`色がANSIパレットになります（[ANSI](https://shikiphp.inline0.dev/ja/docs/ansi)を参照）。テーマを編集せずに個別の色を調整するには、[`colorReplacements`](https://shikiphp.inline0.dev/ja/docs/options#colorreplacements)を使います。

## 同梱テーマの一覧表示

PHPから：

```php
use Shikiphp\Shikiphp;

$highlighter = Shikiphp::highlighter();

$highlighter->bundledThemes(); // list<string> — ids shipped in the box
$highlighter->loadedThemes();  // list<string> — bundled plus any you registered
```

またはコマンドラインから、IDをアルファベット順に1行ずつ表示します：

```bash
vendor/bin/shikiphp themes
```

## カタログ

種類はバンドルが各テーマに記録している`light`または`dark`です。`themes`オプションに指定するテーマの組み合わせを選ぶ際に役立ちます。

| テーマ | ID | 種類 |
| --- | --- | --- |
| Andromeeda | `andromeeda` | dark |
| Aurora X | `aurora-x` | dark |
| Ayu Dark | `ayu-dark` | dark |
| Ayu Light | `ayu-light` | light |
| Ayu Mirage | `ayu-mirage` | dark |
| Catppuccin Frappé | `catppuccin-frappe` | dark |
| Catppuccin Latte | `catppuccin-latte` | light |
| Catppuccin Macchiato | `catppuccin-macchiato` | dark |
| Catppuccin Mocha | `catppuccin-mocha` | dark |
| Dark Plus | `dark-plus` | dark |
| Dracula Theme | `dracula` | dark |
| Dracula Theme Soft | `dracula-soft` | dark |
| Everforest Dark | `everforest-dark` | dark |
| Everforest Light | `everforest-light` | light |
| GitHub Dark | `github-dark` | dark |
| GitHub Dark Default | `github-dark-default` | dark |
| GitHub Dark Dimmed | `github-dark-dimmed` | dark |
| GitHub Dark High Contrast | `github-dark-high-contrast` | dark |
| GitHub Light | `github-light` | light |
| GitHub Light Default | `github-light-default` | light |
| GitHub Light High Contrast | `github-light-high-contrast` | light |
| Gruvbox Dark Hard | `gruvbox-dark-hard` | dark |
| Gruvbox Dark Medium | `gruvbox-dark-medium` | dark |
| Gruvbox Dark Soft | `gruvbox-dark-soft` | dark |
| Gruvbox Light Hard | `gruvbox-light-hard` | light |
| Gruvbox Light Medium | `gruvbox-light-medium` | light |
| Gruvbox Light Soft | `gruvbox-light-soft` | light |
| Horizon | `horizon` | dark |
| Horizon Bright | `horizon-bright` | light |
| Houston | `houston` | dark |
| Kanagawa Dragon | `kanagawa-dragon` | dark |
| Kanagawa Lotus | `kanagawa-lotus` | light |
| Kanagawa Wave | `kanagawa-wave` | dark |
| LaserWave | `laserwave` | dark |
| Light Plus | `light-plus` | light |
| Material Theme | `material-theme` | dark |
| Material Theme Darker | `material-theme-darker` | dark |
| Material Theme Lighter | `material-theme-lighter` | light |
| Material Theme Ocean | `material-theme-ocean` | dark |
| Material Theme Palenight | `material-theme-palenight` | dark |
| Min Dark | `min-dark` | dark |
| Min Light | `min-light` | light |
| Monokai | `monokai` | dark |
| Night Owl | `night-owl` | dark |
| Night Owl Light | `night-owl-light` | light |
| Nord | `nord` | dark |
| One Dark Pro | `one-dark-pro` | dark |
| One Light | `one-light` | light |
| Plastic | `plastic` | dark |
| Poimandres | `poimandres` | dark |
| Red | `red` | dark |
| Rosé Pine | `rose-pine` | dark |
| Rosé Pine Dawn | `rose-pine-dawn` | light |
| Rosé Pine Moon | `rose-pine-moon` | dark |
| Slack Dark | `slack-dark` | dark |
| Slack Ochin | `slack-ochin` | light |
| Snazzy Light | `snazzy-light` | light |
| Solarized Dark | `solarized-dark` | dark |
| Solarized Light | `solarized-light` | light |
| Synthwave '84 | `synthwave-84` | dark |
| Tokyo Night | `tokyo-night` | dark |
| Vesper | `vesper` | dark |
| Vitesse Black | `vitesse-black` | dark |
| Vitesse Dark | `vitesse-dark` | dark |
| Vitesse Light | `vitesse-light` | light |

## 独自の文法を追加する

カスタム VS Code テーマ JSON を `loadTheme` に登録します。[カスタム言語とテーマ](https://shikiphp.inline0.dev/ja/docs/custom-languages-themes)を参照してください。