新しい年にコード エディタを変更するための新しいテーマを探している場合、私たちはそれをカバーすることができます。 洗練されたものから、おしゃれなもの、鮮やかなものなど、ユニークなカラー パレットを持つさまざまなスタイリッシュなテーマをチェックして、あなたに最適なものを見つけてください。 また、VS Codeをさらにカスタマイズするためのアイコンパックも用意されています。
これらの VS Code のテーマは、以下のセクションに整理されています。
- Trending (1-20)
- Dark (21-30)
- Light (31-40)
- Colorful (41-50)
- Bonus: Icons (51-56)
TV Code にテーマをインストールするには、マーケットプレースにアクセスしてダウンロードするテーマを選択するだけでよいです。 インストールしたテーマを切り替えるには、CMD/CTRL + SHIFT + P
でコマンドパレットを開き、Preferences: Color Theme
と入力します。 その後、メニューでテーマを参照することができます。
Trending
VS Code 用の新しいトレンドのテーマで、人気が高まっているものを発見してください。
Radical
![](https://raw.githubusercontent.com/DHedgecock/radical-vscode/master/assets/editor.jpg)
Gruvbox Material
![](https://user-images.githubusercontent.com/37491630/69468770-671d3400-0d85-11ea-85a7-cf7ffedab468.png)
Merko
![](https://github.com/merko30/merko-green-theme/raw/master/img/s.png)
Tokyo Night
![](https://raw.githubusercontent.com/enkia/tokyo-night-vscode-theme/master/static/ss_tokyo_night.png)
Remedy
![](https://raw.githubusercontent.com/robertrossmann/vscode-remedy/master/resources/screenshots/gui.png)
Minimal
![](https://github.com/dawran6/minimal-theme-vscode/raw/master/screenshot.png)
Aurora X
![](https://github.com/marqu3s10/Aurora-X/raw/master/images/screenshot.png)
Atlantic Night
![](https://github.com/mrpbennett/atlantic-night-vscode-theme/raw/master/imgs/first-screen.png)
Glass UI
![](https://user-images.githubusercontent.com/38076644/62824174-54eb0180-bbab-11e9-975e-2baf0e8cf33f.png)
A Touch of Lilac
![](https://raw.githubusercontent.com/alexnho/vscode-a-touch-of-lilac-theme/master/images/workbench.png)
FireFlyProのページです。
![](https://raw.githubusercontent.com/ankitmlive/firefly-theme/master/assets/second-demo.png)
ReUI
![](https://raw.githubusercontent.com/barrsan/react-italic-theme-vscode/master/sc.png)
Slime
![](https://github.com/smlombardi/theme-slime/raw/master/screenshots/screenshot.png)
Signed Dark Pro
![](https://raw.githubusercontent.com/alex-munene/vscode-signed-dark-pro/master/images/signed-dark-pro.png)
Ariake Dark
![](https://github.com/a-wart/ariake-dark/blob/master/misc/screenshot_frag.png?raw=true)
Snazy Light
![](https://raw.githubusercontent.com/loilo/vscode-snazzy-light/master/screenshots/javascript.png)
Spacegray
![](https://raw.githubusercontent.com/ionutvmi/spacegray-vscode/master/screenshots/eighties.png)
Celestial
![](https://github.com/apvarun/celestial-theme/raw/master/Preview.png)
Blueberry Dark
![](https://raw.githubusercontent.com/peymanslh/vscode-blueberry-dark-theme/master/screenshot.png)
Bear
![](https://raw.githubusercontent.com/shaodahong/theme-bear/master/bear-theme-snap.png)
Dark
暗いところで仕事をしたいですか? VS Code 用の最も優れたダーク テーマをいくつかご紹介します。
Best Dark Themes Pack をインストールすることにより、これらのダーク テーマをすべてインストールすることも可能です。
One Dark Pro
![](https://raw.githubusercontent.com/Binaryify/OneDark-Pro/master/static/screenshot2.png)
Dracula Official
![](https://github.com/dracula/visual-studio-code/raw/master/screenshot.png)
Nord
![](https://raw.githubusercontent.com/arcticicestudio/nord-docs/develop/assets/images/ports/visual-studio-code/ui-overview-jsx.png)
Palenight
![](https://i.imgur.com/1mYWEP4.png)
One Monokai
![](https://github.com/azemoh/vscode-one-monokai/raw/master/screenshot-v0.2.0.png)
Night Owl
![](https://github.com/sdras/night-owl-vscode-theme/raw/master/first-screen.jpg)
Andromeda
![](https://github.com/EliverLara/Andromeda/raw/master/images/andromeda.png)
Darcula
![](https://github.com/rokoroku/vscode-theme-darcula/raw/master/screenshot.png)
Horizon Theme
![](https://i.imgur.com/y0gi1ez.png)
Cobalt2
![](https://raw.githubusercontent.com/wesbos/cobalt2-vscode/cobalt2-updates/images/ss.png)
ライト
あなたのコードエディターに何か軽いものはいかがですか? これらのスタイリッシュなライト テーマをチェックしてください。
Best Light Themes Pack をインストールすることにより、これらのライト テーマをすべてインストールすることも可能です。
Atom One Light
![](https://raw.githubusercontent.com/akamud/vscode-theme-onelight/master/screenshots/preview.png)
Blululoco Light
![](https://raw.githubusercontent.com/uloco/theme-bluloco-light/master/screenshots/js.png)
Brackets Light Pro
![](https://raw.githubusercontent.com/EryouHao/brackets-light-pro/master/static/screenshot.png)
Ysgrifennwr
![](https://github.com/xaverh/theme-ysgrifennwr/raw/master/screenshot.png)
NetBeans Light
![](https://github.com/obrejla/vscode-netbeans-light-theme/raw/master/images/vscode-netbeans-light-theme.png)
Quiet Light
![](https://github.com/onecrayon/theme-quietlight-vsc/raw/master/images/screenshot.png)
Hop Light
![](https://raw.githubusercontent.com/bubersson/hop-theme-vscode/master/hop-light.png)
NotepadPlusPlus Remixed
![](https://raw.githubusercontent.com/s-h-a-d-o-w/NotepadPlusPlus-Remixed-Theme/master/screenshot.png)
GitHub Light
![](https://github.com/Hyzeta/vscode-theme-github-light/raw/master/screenshot/0.png)
GitHub Plus
![](https://github.com/thenikso/github-plus-theme/raw/master/screenshot.jpg)
カラフル
単色のテーマやつまらない色調はうんざりしていませんか? これらのカラフルなテーマで、あなたのエディターに色を加えてください。
Best Colorful Themes Pack をインストールすることにより、これらのカラフルなテーマをすべてインストールすることも可能です。
Shades of Purple
![](https://raw.githubusercontent.com/ahmadawais/shades-of-purple-vscode/master/images/markdown.png)
SynthWave
![](https://github.com/robb0wen/synthwave-vscode/raw/master/theme.jpg)
Code Blue
![](https://i.imgur.com/JLCnwvi.jpg)
Cyberpunk
![](https://github.com/max-SS/cyberpunk/raw/master/assets/preview.png?raw=true)
LaserWave
![](https://github.com/Jaredk3nt/laserwave/raw/master/screenshot.png)
ゼオニカ
![](https://zeonicacom.files.wordpress.com/2018/09/zeonica_9502.png)
ヒップスター
![](https://github.com/ModoNoob/vscode-hipster-theme/raw/master/screenshot.png)
ワイルドベリー
![](https://github.com/geoffstevens8/best-colorful-themes-pack/blob/master/images/wildberry.png?raw=true)
キータ
![](https://qiita-image-store.s3.amazonaws.com/0/6598/e054a4bb-cea1-8fc9-e193-fbb8376ed93d.png)
Soft Era
ボーナスのことである。 アイコン
VS Code では、エディターのアイコンをカスタマイズすることもできます。 新しいアイコンが VS Code サイド バーに表示され、さまざまなファイルやフォルダーを視覚化できるようになります。 他のテーマと同様にアイコン パックをインストールすることができます。
エディターのアイコンを変更するには、CMD/CTRL + SHIFT + P
でコマンドパレットを開き、Preferences: File Icon Theme
というコマンドを入力します。 その後、メニューからインストールされたアイコン テーマを参照し、リアルタイムでプレビューすることができます。
Quill
![](https://github.com/cdonohue/vscode-quill-icons/raw/master/screenshots/demo-dark.png)
Helium
![](https://raw.githubusercontent.com/helgardferreira/vscode-helium-icon-theme/master/images/fileIcons.png)
Seedling
![](https://raw.githubusercontent.com/rastikerdar/vscode-seedling-icon-theme/master/images/preview.png)
City(市街地)。 ライト
![](https://raw.githubusercontent.com/yummygum/city-lights-icons-vsc/master/city-lights-icon-preview.gif)
Keen Neutral
![](https://github.com/keenethics/neutral-icon-theme/raw/master/preview.png)
Chalice
![](https://raw.githubusercontent.com/artlaman/chalice-icon-theme/master/assets/preview.png)
次は何だろう?
さらに多くのテーマをお探しですか。 VS Code マーケットプレイスを検索して、Themes
でソートしてみてください。 開発者は 2,500 以上のテーマを作成しており、その中から選んで VS Code をカスタマイズできます。
VS Code の独自のテーマを作成したいですか? チュートリアルでは、拡張機能を作成する方法、VS Code のカラー パレットをカスタマイズする方法、およびプロジェクトを VS Code マーケットプレイスにプッシュする方法について説明します。 30 分以内に VS Code マーケットプレイスで製品を発売してください。