テーマ (Themes)

公式サイト:

Themes | Documentation for Visual Studio Code [Official]

使い方

参考:

VSCode の Monokai カラーリングをカスタマイズして、Sublime Text の配色に近づける方法 | WEMO

Visual Studio Code のテーマをカスタマイズする | OFF-SOFT.net

VSCode で配色テーマをカスタマイズするには | @IT

Visual Studio Code の設定 虎の巻 配色編 | @IT

設定ファイルで配色を変更する

settings.json ファイル内の workbench.colorCustomizations の項目に配色の設定を追加する。

参考:

Visual Studio Code の配色を好き勝手にカスタマイズした – Qiita

VSCode のカラーテーマの詳細をカスタマイズする方法 | Rriver

対応する括弧を色分けする

参考:

これは便利、VSCode の設定を変更しよう! v.1.60 のアップデートで、ブラケットのカラー化にネイティブ対応 | コリス

背景

参考:

Editor Colors | Visual Studio Code Extension API [Official]

How to change editor background color in vscode using editor.tokenColorCustomizations instead of workbench – Stack Overflow

タブ

参考:

Editor Groups & Tabs | Visual Studio Code Extension API [Official]

エディター罫線

参考:

Visual Studio Code の editor.rulers を見やすくする – Qiita

vertical rulers in Visual Studio Code – Stack Overflow

スクロールバー

参考:

Scrollbar Control | Visual Studio Code Extension API [Official]

Customize Scrollbar (vertical / horizontal) · Issue #24755 · microsoft/vscode – GitHub

colored pixels in scrollbar in VSCode – Stack Overflow

概要ルーラー (Overview Ruler)

行の状態に応じて、スクロールバーにハイライト表示を追加する。

  • editorOverviewRuler.background
  • editorOverviewRuler.border
  • editorOverviewRuler.findMatchForeground検索で合致した結果のある行
  • editorOverviewRuler.rangeHighlightForeground強調表示された範囲
  • editorOverviewRuler.selectionHighlightForeground選択範囲
  • editorOverviewRuler.wordHighlightForegroundカーソル下シンボルの強調
  • editorOverviewRuler.wordHighlightStrongForeground書き込みアクセスしているシンボルの強調
  • editorOverviewRuler.modifiedForeground修正ありの行 (Git 差分)
  • editorOverviewRuler.addedForeground追加した行 (Git 差分)
  • editorOverviewRuler.deletedForeground削除した行 (Git 差分)
  • editorOverviewRuler.errorForegroundエラーのある行 (リンター)
  • editorOverviewRuler.warningForeground警告のある行 (リンター)
  • editorOverviewRuler.infoForeground情報のある行 (リンター)
  • editorOverviewRuler.bracketMatchForeground対応する括弧

参考:

Visual Studio Code で スクロールバー上の info の色が明るすぎて他のマークが識別しづらいので色を変えてみる | 水色 (仮)

VSCode のソーホーバイブ | wenyanet

Overview Ruler | Visual Studio Code Extension API [Official]

theme colors of overview ruler · Issue #26606 · microsoft/vscode – GitHub

colored pixels in scrollbar in VSCode – Stack Overflow

How can I remove symbols on right scrollbar of vscode? – Stack Overflow

ガター (Gutter)

  • editorGutter.backgroundガターの背景色
  • editorGutter.modifiedBackground修正ありの行 (Git 差分)
  • editorGutter.addedBackground追加した行 (Git 差分)
  • editorGutter.deletedBackground削除した行 (Git 差分)
  • editorGutter.commentRangeForegroundコメント範囲
  • editorGutter.foldingControlForeground折り畳みの範囲

参考:

Gutter | Visual Studio Code Extension API [Official]

Gutter color should be consistent with scrollbar for new content · Issue #12829 · microsoft/vscode – GitHub

editorOverviewRuler.addedForeground & deletedForeground not working · Issue #43356 · microsoft/vscode – GitHub

カーソル行

  • editor.lineHighlightBackground

参考:

カーソル行の背景色を変更する方法 | Wataame Frog

ミニマップ

参考:

VSCode のミニマップの表示/非表示を切り替えるには | @IT

VSCode のミニマップの表示方法を変更するには | @IT

Minimap: Render git status decorations · Issue #20934 · microsoft/vscode – GitHub

タイトルバー

参考:

Title Bar Colors | Visual Studio Code Extension API [Official]

Change Visual Studio Code’s title bar color – Stack Overflow

Black Menu Bar – Stack Overflow

サイドバー

参考:

Side Bar – Theme Color | Visual Studio Code Extension API [Official]

プロジェクト毎に配色を変更する

参考:

プロジェクトごとに VSCode の色とテーマを変えて気持ちを切り替える – Qiita

テーマを自作する

参考:

Creating your own Color Theme | Documentation for Visual Studio Code [Official]

Your First Extension | Visual Studio Code Extension API [Official]

Color Theme | Visual Studio Code Extension API [Official]

ファイルのアイコンを変更する

参考:

Visual Studio Code のファイルアイコンを変える – Qiita

マーケットプレイス

入手:

One Dark Pro | Visual Studio Marketplace [Official]

イシュー

参考:

The theme color reference is a bit of a mess · Issue #2264 · microsoft/vscode-docs – GitHub

リファレンス

Theme Color | Visual Studio Code Extension API [Official]

まとめ

参考:

2019年に使える Visual Studio Code 8種類のテーマ | ちんぷいどっとねっと

Visual Studio Code で見やすいテーマファイルのまとめ | コリス

Theming | Visual Studio Code Extension API [Official]

One Dark Pro

公式サイト:

One Dark Pro for VSCode

入手:

One Dark Pro | Visual Studio Marketplace [Official]

リポジトリ:

Binaryify/OneDark-Pro: Atom’s iconic One Dark theme for Visual Studio Code – GitHub

Beautiful UI

入手:

Beautiful UI | Visual Studio Marketplace [Official]

リポジトリ:

swashata/vscode-beautiful-ui: A Set of Beautiful Color Themes for VSCode, Inspired by Sublime DA UI – GitHub

Telstra Purple Theme

入手:

Telstra Purple Theme | Visual Studio Marketplace [Official]

Tokyo Night

入手:

Tokyo Night | Visual Studio Marketplace [Official]

リポジトリ:

enkia/tokyo-night-vscode-theme: A Clean, Dark Visual Studio Code Theme that Celebrates the Lights of Downtown Tokyo at Night – GitHub

記事をシェアする:
タグ:

コメントを残す

メールアドレスが公開されることはありません。

Protected by reCAPTCHA