目に優しい 10 の Visual Studio Code テーマ
![目に優しい 10 の Visual Studio Code テーマ](https://cdn.thewindowsclub.blog/wp-content/uploads/2024/02/visual-studio-code-themes-that-are-easy-on-the-eyes-featured-1-640x375.webp)
![VS Code テーマを使用するラップトップ。 VS Code テーマを使用するラップトップ。](https://cdn.thewindowsclub.blog/wp-content/uploads/2024/02/visual-studio-code-themes-that-are-easy-on-the-eyes-featured.webp)
組み込みの Visual Studio Code テーマは悪くありませんが、他のものが欲しくなるかもしれません。コーディングに何時間も費やす場合は、目に優しいものが必要です。組み込みのダーク VS Code テーマがうまく機能しない場合は、代わりにこれらの他のオプションを試してください。
インストールとカスタマイズ
Visual Studio Code テーマを一覧表示する前に、それらのテーマをインストールする方法について説明します。まず、必要なテーマを選択し、「インストール」を選択してVisual Studio Code を開きます。「インストール」を押して、テーマをインストールすることを確認します。[拡張機能]を開いてテーマ名を検索し、直接インストールすることもできます。
![Visual Studio Code に新しいテーマをインストールします。 Visual Studio Code に新しいテーマをインストールします。](https://cdn.thewindowsclub.blog/wp-content/uploads/2024/02/visual-studio-code-themes-that-are-easy-on-the-eyes-installing.webp)
「カラーテーマの選択」ボックスからテーマを選択します。テーマによっては、複数のバージョンから選択できる場合があります。これが表示されない場合は、[カラー テーマの変更]をクリックするか、 [ファイル] -> [設定] -> [テーマ] -> [カラー テーマ]に移動してテーマを選択します。より速く操作するには、次のVisual Studio Code キーボード ショートカットを試してください。
テーマをカスタマイズする場合は、テーマをインストールし、サイドバーの[拡張機能] (または[ファイル] -> [拡張機能] ) に移動します。テーマの横にある設定歯車を選択し、必要なだけ編集します。テーマでこれが提供されていない場合、またはさらに詳細な制御が必要な場合は、workbench.colorCustomizations設定を使用します。
![Visual Studio Code テーマのカスタマイズ。 Visual Studio Code テーマのカスタマイズ。](https://cdn.thewindowsclub.blog/wp-content/uploads/2024/02/visual-studio-code-themes-that-are-easy-on-the-eyes-customizing.webp)
1. 最優秀ダークテーマ: One Dark Pro
One Dark Pro は、すぐにダーク テーマを愛する人にとって最も人気のある VS Code テーマの 1 つになりました。快適な暗い色合いであるだけでなく、カラーパレットは暗い背景でも不快になりすぎずにうまく機能します。
![JavaScript サンプルコードとともにインストールされた 1 つの Dark Pro テーマ JavaScript サンプルコードとともにインストールされた 1 つの Dark Pro テーマ](https://cdn.thewindowsclub.blog/wp-content/uploads/2024/02/visual-studio-code-themes-that-are-easy-on-the-eyes-one-dark-pro.webp)
ハイライト
- 複数のカラーバリエーション
- ハイコントラストカラー
- 読みやすいフォント
2. 最高のハイコントラスト: 紫の色合い
ダークテーマは黒の色合いだけである必要はありません。Shades of Purple は、驚くほど目に心地よい紫のさまざまな色合いを提供します。深い紫色の背景からより鮮やかな紫色のテキストまで、紫色が好きなら、このテーマのすべてを気に入るはずです。
![Shades of Purple テーマがインストールされた Visual Studio Code。 Shades of Purple テーマがインストールされた Visual Studio Code。](https://cdn.thewindowsclub.blog/wp-content/uploads/2024/02/visual-studio-code-themes-that-are-easy-on-the-eyes-shades-of-purple.webp)
ハイライト
- 色は昼も夜もうまく機能します
- 他の色をうまく混ぜるとコードが表示されます
- パープルとスーパーダークパープルの両方があります
3. 深夜のコーディングに最適: Night Owl
名前が示すように、Night Owl は暗い環境向けに設計されており、画面が目に優しくなります。濃い青色の背景と、一晩中作業するのに最適な色の選択です。ただし、日中のコーディング用に軽量バージョンも含まれています。
![Night Owl Visual Studio Code テーマの使用。 Night Owl Visual Studio Code テーマの使用。](https://cdn.thewindowsclub.blog/wp-content/uploads/2024/02/visual-studio-code-themes-that-are-easy-on-the-eyes-night-owl.webp)
ハイライト
- 高コントラストでありながら、色は抑えられています
- 色覚異常に最適
- 斜体オプションと斜体オプションなしの両方が含まれます
4. ベストミニマルコントラスト: Palenight
ハイコントラストの Visual Studio Code テーマが好みでない場合は、Palenightを試してください。 Shades of Purpleのトーンダウンバージョンです。エレガントなパープルは、昼夜を問わずコーディングに適しています。さらに、配色は派手ではありませんが、コードを簡単に区別できるように十分なコントラストがあります。
![VS Code テーマの中でコントラストが低いオプションの 1 つである Palenight テーマを使用します。 VS Code テーマの中でコントラストが低いオプションの 1 つである Palenight テーマを使用します。](https://cdn.thewindowsclub.blog/wp-content/uploads/2024/02/visual-studio-code-themes-that-are-easy-on-the-eyes-palenight.webp)
ハイライト
- コントラストを高めるための中間コントラストのバリエーションが含まれています
- イタリック版も含まれます
- Shades of Purple のよりエレガントなバージョン
5. GitHub ユーザーに最適: GitHub テーマ
GitHub のコード表示方法がすでに気に入っている場合は、GitHub テーマ を試してください。クラシックな GitHub スタイルのすべてが Visual Studio Code 内で楽しめます。ほぼあらゆるニーズに対応できる 9 つのバリエーションがあります。これは、独自のテーマを一から設計しなくても、GitHub の公式テーマに限りなく近いものです。
![暗闇での GitHub Visual Studio Code テーマの使用。 暗闇での GitHub Visual Studio Code テーマの使用。](https://cdn.thewindowsclub.blog/wp-content/uploads/2024/02/visual-studio-code-themes-that-are-easy-on-the-eyes-github.webp)
ハイライト
- ライトバージョンとダークバージョンの両方
- 2 つの色盲バージョン
- 2 つの従来のバリエーションですが、頻繁には更新されません
6. 最もエレガント: アユ
Ayu は、優雅さとシンプルさを組み合わせた美しいテーマで、短期および長期のコーディング セッション向けに設計されています。明るい色は、暗い色と明るい色の変化に対して素晴らしい効果を発揮します。個人的には、Ayu は光のバリエーションとしては優れた配色の 1 つだと思います。
![Ayuテーマのライトバージョン Ayuテーマのライトバージョン](https://cdn.thewindowsclub.blog/wp-content/uploads/2024/02/visual-studio-code-themes-that-are-easy-on-the-eyes-ayu.webp)
ハイライト
- 3 つのバリエーション: ダーク、ライト、ミラージュ
- ミラージュは暗いよりもわずかに明るい
- どのバリエーションでも明るいテキストが目立ちます
7. ベストバラエティ: 夜
多数の Visual Studio Code テーマをインストールしたくない場合は、Noctisをインストールするだけです。この 1 つのテーマには、暗いものから明るいもの、そしてその間のあらゆるものまで、11 のバリエーションが用意されています。私は深いシアン色のセレノのバリエーションが大好きです。昼も夜もうまく機能します。
![Noctis テーマの Sereno バリエーションを使用します。 Noctis テーマの Sereno バリエーションを使用します。](https://cdn.thewindowsclub.blog/wp-content/uploads/2024/02/visual-studio-code-themes-that-are-easy-on-the-eyes-noctis.webp)
ハイライト
- カラーバリエーションはローズ、シアン、ブルー、パープル、オレンジ、バイオレット
- Azureus のバリエーションが明るすぎる場合、Minimus は彩度を低くします。
- Lux は目に優しい明るいテーマに最適です
8. 最優秀微妙なテーマ: パンダのテーマ
シンプル、エレガント、そして繊細な要素がパンダ テーマにシームレスに溶け込んでいます。ダークテーマは、扱いやすい微妙な色を特徴としています。最小限ではありますが、これによりコードに焦点が当てられます。
![Visual Studio Code での Panda テーマを使用したコーディング。 Visual Studio Code での Panda テーマを使用したコーディング。](https://cdn.thewindowsclub.blog/wp-content/uploads/2024/02/visual-studio-code-themes-that-are-easy-on-the-eyes-panda.webp)
ハイライト
- すべてを可能な限りシンプルに保つ
- 1 つのバージョンのみが含まれています
- 明るい環境でも暗い環境でもうまく機能するシンプルな色
9. 最も入手しやすいもの: Dracula 公式
さまざまなコード エディターを使用する傾向があり、一貫したテーマが必要な場合は、Dracula Officialを使用してください。これは最高の VS Code テーマの 1 つであるだけでなく、他の何百ものアプリでも利用できます。コードエディタを切り替えれば、Dracula Official が利用できるようになる可能性があります。
ハイライト
- 紫色のダークテーマ
- ノーマルとソフトの2種類をご用意
- 2016年から頻繁に更新
10. ベストローコントラスト: 東京の夜
低コントラストの Visual Studio Code テーマを好む場合は、Tokyo Night が最適なテーマとなる可能性があります。低コントラストの薄暗いテーマを含む 3 つのバリエーションがあります。アユに似ていますが、少し濃いめです。すべてのテキストが見やすく、目が気に入ります。
![東京の夜をテーマにした光のバリエーション 東京の夜をテーマにした光のバリエーション](https://cdn.thewindowsclub.blog/wp-content/uploads/2024/02/visual-studio-code-themes-that-are-easy-on-the-eyes-tokyo-night.webp)
ハイライト
- 暗いバリエーションは明るいものよりも少しコントラストが高くなります
- 東京の街の明かりからインスピレーションを受けて
- 暗闇でのディープパープルとブラックのバリエーション
画面を長時間見つめることは目に良いことではありませんが、適切な VS Code テーマは負担を大幅に軽減します。コーディングを学習しているばかりの場合は、これらのコーディング ゲームやオンライン リソースを試してください。次に、新しいお気に入りのテーマを使用して、Visual Studio Code で練習を楽しんでください。
画像クレジット: Unsplash。すべてのスクリーンショットは Crystal Crowder によるものです。
コメントを残す