このダークテーマは目に優しく、コードも見やすい! VS Codeのエレガントなモノクロームのテーマファイル -Sequoia
Post on:2022年7月5日
ダークテーマは好きだけど、#000のブラックだったり、テキストが派手なカラーだったりすると、目が疲れませんか?
背景のブラックはほんの少しだけブルーがかった夜空のように落ち着いた色合いで、グレーの濃淡だけのMonochromeと淡いカラーで構成されたMoonlightの2種類の配色が用意された、VS Code用のテーマファイルを紹介します。

Sequoia for VS Code
Sequoia for VS Code -GitHub
Sequoia for VS Codeの公式サイトは、下記から。

Sequoiaには、2種類のテーマが揃っています。
- Sequoia Monochrome
- Sequoia Moonlight
個人的には、モノクロームのSequoia Monochromeがいいですね!
画像にするとグレーの違いがわかりにくいかもしれませんが、VS Codeでコードを見ると、グレーの濃淡ははっきり分かります。目に優しく、見やすいです。

Sequoia Monochrome
Sequoia Monochromeのカラーパレットです。
背景には#0d0e10が使用されており、落ち着きのあるブラックです。

Sequoia Monochromeのカラーパレット
モノクロームだとちょっと分かりにくいという人には、こちらがお勧めです。カラフルですが、色味は少し控えめなので、見やすいです。

Sequoia Moonlight
Sequoia Moonlightのカラーパレットです。

Sequoia Moonlightのカラーパレット
ブラウザ版のVS Codeにテーマを適用して、どのようになるか確認できます。

Sequoia Monochromeのプレビュー
Sequoia Moonlightのプレビュー
Sequoiaのインストールは、VS Codeの通常のテーマと同じです。
インストールは、下記ページから。

「Install on VS Code」をクリックすると、VS Codeでテーマファイルが開くので、「インストール」をクリックするだけです。

VS Codeでのインストール画面
sponsors