カラースキーム：エディターのフォントと色彩
開発者は、エディターのソースコード、検索結果、デバッガー情報、コンソールの入出力など、多くのテキストリソースを操作します。 このテキストのフォーマットには色とフォントスタイルが使用されており、一目で理解できるようになります。
WebStorm では、IDE テキストで使用される色とフォントを定義する構成可能な 配色から選択できます。
事前定義された配色を使用するか、あなたの好みに合わせてカスタマイズすることができます。 スキームを共有することも可能です。
配色を選択
Ctrl+Alt+S を押して設定を開き、 を選択します。
あるいは、 ページでスキームを選択することもできます。
配色を選択するには、 スキーム, リストを使用します。
現在の インターフェーステーマのデフォルトの配色がリストに表示されます。
IDE テーマの変更 をクリックすると、設定の ページに移動し、 インターフェーステーマを構成できます。
配色をカスタマイズする
事前定義されたカラースキームはカスタマイズできますが、カスタムの色とフォント設定用に複製を作成することをおすすめします：
配色を複製する
Ctrl+Alt+S を押して設定を開き、 を選択します。
カラースキームを選択し、
をクリックして、続けて 複製… をクリックします。 
（オプション）カスタムスキームの名前を変更するには、
をクリックして 名前の変更… を選択します。
カスタムカラーとフォント設定を定義する
Ctrl+Alt+S を押して設定を開き、 を選択します。
このノードのページ設定では、コードのさまざまな要素や WebStorm インターフェースの色が定義されます。 例: 一般 ページは、ガター、行番号、エラー、警告、ポップアップ、ヒントなどの基本的なエディターの色を定義します。
言語のデフォルト ページには、サポートされているすべてのプログラミング言語にデフォルトで適用される共通の構文ハイライト設定が含まれています。 ほとんどの場合、 言語のデフォルト を設定し、必要に応じて特定の言語に合わせて調整すれば十分です。 要素の継承色設定を変更するには、 次の値を継承 チェックボックスをオフにします。
サンプル: プレースホルダー区切り文字のハイライトを設定する
.js 、 .jsx 、 .ts 、 .tsx 、 .vue 、 .svelte 、 .astro ファイル内の ${ および } プレースホルダー区切り文字のハイライトを設定できます。
Ctrl+Alt+S を押して設定を開き、 を選択します。 次に、 の または を選択します。
テンプレートリテラル ノードで、 プレースホルダ区切り文字 を選択します。
ダイアログの右側のペインにある 次の値を継承 チェックボックスをオフにします。 その後、ペイン内の他のコントロールが使用可能になります。
コントロールを使用して、背景と前景のフォントと色を設定します。 下の領域で設定をプレビューします。
セマンティックハイライト
デフォルトでは、カラースキームは、ソースコード内の予約語やその他のシンボル (演算子、キーワード、候補、文字列リテラルなど) の構文のハイライトを定義します。 多数のパラメーターとローカル変数を持つ関数またはメソッドがある場合、一目で区別することが難しい場合があります。 セマンティックハイライトを使用すると、各パラメーターとローカル変数に異なるランダムな色を割り当てることができます。
セマンティックハイライトを使用可能にする
Ctrl+Alt+S を押して設定を開き、 を選択します。
セマンティックハイライト を選択し、必要に応じて色の範囲をカスタマイズします。
配色を共有する
特定のカラースキームに慣れている場合は、あるインストール環境からエクスポートし、別のインストール環境へインポートできます。 カラースキームを他の開発者と共有することもできます。 。
配色を XML としてエクスポート
WebStorm はカラースキームの設定を .icls 拡張子の XML ファイルとして保存できます。 その後、ファイルを別のインストールにインポートすることができます。
Ctrl+Alt+S を押して設定を開き、 を選択します。
スキーム, リストから配色を選択し、
をクリックしてから エクスポート をクリックして IntelliJ IDEA カラースキーム（.icls） を選択します。ファイルの名前と場所を指定して保存します。
配色をプラグインとしてエクスポートする
プラグインは、他の人がインストールできるように プラグインリポジトリにアップロードできます。 この形式には、メタデータ、フィードバック、ダウンロード統計、バージョン管理など、XML ファイルに比べていくつかの利点があります（プラグインの新しいバージョンをアップロードすると、ユーザーに通知されます）。
Ctrl+Alt+S を押して設定を開き、 を選択します。
スキーム, リストから配色を選択し、
をクリックしてから エクスポート をクリックして カラースキームプラグイン .jar を選択します。カラースキームプラグインを作成する ダイアログで、バージョン詳細とベンダー情報を指定します。 次に OK をクリックします。
配色をインポートする
Ctrl+Alt+S を押して設定を開き、 を選択します。
スキーム, リストから配色を選択し、
をクリックしてから スキームをインポート をクリックします。
フォント
デフォルトのエディターのフォントをカスタマイズする
このフォントは、デフォルトですべてのカラースキームで使用され、継承されます。
Ctrl+Alt+S を押して設定を開き、 を選択します。
フォント リストからフォントを選択します。
適用 をクリックして設定を保存します。
詳細は、 フォント を参照してください。
配色フォントをカスタマイズする
必要であれば、現在のスキーム用に別のフォントを設定します。
Ctrl+Alt+S を押して設定を開き、 を選択します。
デフォルトの代わりにカラースキームのフォントを使用する チェックボックスを選択します。
詳細は、 カラースキームの切り替え を参照してください。
コンソールフォントをカスタマイズする
デフォルトでは、コンソール内のテキストは配色と同じフォントを使用します。 コンソールで別のフォントを使用するには:
Ctrl+Alt+S を押して設定を開き、 を選択します。
デフォルトの代わりにコンソールフォントを使用する チェックボックスを選択します。
新しいカスタムフォントをインストールする
WebStorm では、オペレーティングシステムまたは WebStorm の実行に使用される Java ランタイム で利用可能な任意のフォントを使用できます。 別のフォントを追加したい場合は、ご利用の OS にインストールしてください。WebStorm は再起動後に認識します。
目的の TTF フォントパッケージをダウンロードし、解凍してフォントファイル ( .ttf ) を抽出します。 フォントが正しく機能するには、少なくとも 4 つのファイル (Normal、Bold、Italic、太字斜体) が必要です。
オペレーティングシステムに応じて、次のいずれかを実行してください：
すべてのフォントファイルを選択し、選択範囲を右クリックして、 インストール を選択します。
すべてのフォントファイルを選択し、選択したファイルをダブルクリックしてフォントブックプレビューを開き、下部にある フォントのインストール をクリックします。
フォントを現在のユーザー用に ~/.local/share/fonts に解凍するか、フォントをシステム全体にインストールするために /usr/share/fonts に解凍してから、
fc-cache -f -vを実行します。WebStorm を再起動し、 エディター | フォント 設定ページ  Ctrl+Alt+S でインストールしたフォントを選択します。
生産性のヒント
エディターで現在使用されているフォントを確認する
Ctrl+Shift+A を押し、 エディターの使用フォントを表示 アクションを見つけて実行します。
これにより、フォントのリストを含む エディターで使用されているフォント ダイアログが開きます。
クイックスイッチャーを使う
Ctrl+` を押すか、メインメニューから を選択します。
切り替え ポップアップで エディターのカラースキーム を選択し、目的の配色を選択します。