Shroom Space Theme

アクセシビリティ重視のバリアントとランタイム機能を備えた VS Code カラーテーマ。7つのテーマ設定、ユーザー設定可能なアクセントカラー、ダーク/ライト自動切替、WCAG 2.1 AA 準拠、9つのエクスポート形式に対応。

code --install-extension wyattau.shroom-space-theme

テーマ一覧

Shroom Space

dark

ベースダークテーマ。紫/ティール/グリーンのパレットに、ウォームなアンバーの定数を組み合わせ。

Shroom Space Light

light

ライトバリアント。ウォームなアーストーンの背景とミュートされたアクセント。

Deuteranopia

dark

2型色覚（緑色弱）向けに適応。ブルーシフトで補完、赤緑の混同を回避。

Protanopia

dark

1型色覚（赤色盲）向けに適応。コーラルシフトのエラー表示にブルーの補色を追加。

Tritanopia

dark

3型色覚（青黄色覚異常）向けに適応。ピンク/シアンシフトのアクセントにグリーンの文字列。

Monochrome

dark

グレースケールパレット。エラー表示は輝度コントラストを使用。最大のテキスト明瞭度。

High Contrast

最大コントラスト比。純黒背景。WCAG AAA 完全準拠を目標。

ベースダークカラーパレット

役割	色値	用途
背景	`#24212E`	エディタ背景
前景	`#CCC8D9`	デフォルトテキスト
アクセント（紫）	`#BE9AF7`	キーワード、バッジ
アクセント（ティール）	`#74D7C8`	関数、情報
アクセント（グリーン）	`#A6C18B`	文字列、追加
アクセント（アンバー）	`#E8C990`	定数、型
アクセント（赤）	`#E68484`	エラー、削除
ミュート	`#726D89`	コメント、無効

インストール

VS Code の拡張機能パネルで "Shroom Space" を検索するか、CLI でインストール：

code --install-extension wyattau.shroom-space-theme

Ctrl+K Ctrl+T（macOS：Cmd+K Cmd+T）でテーマを選択。

手動インストール

リリースページから最新の .vsix をダウンロード。
実行：code --install-extension shroom-space-theme-*.vsix

開発

前提条件：Node.js 24+、npm 10+、VS Code 1.120.0+。

コマンド	説明
`npm run compile`	TypeScript コンパイル
`npm run lint`	ESLint 厳格ルール
`npm run validate`	テーマ JSON バリデーション
`npm test`	フルパイプライン（コンパイル + lint + バリデーション + 92 テスト）

機能

WCAG 2.1 AA コントラスト準拠（全7テーマ）
ビジュアルリグレッションテスト（7つの Playwright テスト）
マルチエディタエクスポート（9形式：TextMate、JetBrains、Vim、Windows Terminal、iTerm2、Warp、Alacritty、Kitty、CSS）
テーマごとに1049カラートークン、全20テーマ（既知の VS Code API の100%をカバー）
テーマごとに81の tokenColors エントリ
テーマごとに57の semanticTokenColors ルール

ダウンロード

9つのターミナル/エディタ形式でテーマエクスポートを利用可能：

形式	互換性
`.css`	Web（CSS Custom Properties）
`.tmTheme`	Sublime Text、TextMate、Atom
`.icls`	IntelliJ、WebStorm、PyCharm、GoLand
`.vim`	Vim、Neovim
`.json`（Windows Terminal）	Windows Terminal
`.itermcolors`	iTerm2
`.yaml`	Warp Terminal
`.toml`	Alacritty
`.conf`	Kitty Terminal

GitHub Releases からダウンロード。

拡張機能の設定

設定	値	デフォルト	説明
`shroom-space.accentColor`	default, purple, teal, green, amber, red, pink, cyan	default	プライマリアクセントカラーを上書き
`shroom-space.autoSwitch`	true, false	false	VS Code のカラーテーマに基づきダーク/ライトを自動切替

テーマプレビュー

テーマ：アクセント：

// Theme preview - Shroom Space
const result = 42;
function greet(name: string): string {
  if (name === "hello world") {
    console.log(name);
    return "matched";
  }
  return data ? true : false;
}
      