LoginSignup
23
13

More than 3 years have passed since last update.

VSCodeの選択範囲や検索単語の色設定を変更してもっと目立たせる

Last updated at Posted at 2020-10-29

タイトルのとおりです.

選択範囲や検索ヒット部分にかかる網掛けの色を変更して,派手派手しく目立つようにします.
目が疲れているときに便利です.
自分の場合はTeXを書いていてテキスト検索のときにどこにカーソルがあるかわからず発狂しそうになったので設定しました.

環境:

  • VSCode 1.50.1 (mac/win)
  • GitHub Theme 1.1.5 (GitHub Dark)

設定

ワークスペースまたはユーザー設定を開き,settings.jsonを開きます.
Cmd(Ctrl) + , で設定画面が開くので,右上のほうに出てくるファイルアイコンに矢印が生えたものをクリックすると,jsonが開きます.
(画像の黄色い丸部分)

スクリーンショット 2020-10-29 18.11.23.png

開いたjsonファイルのグローバル域にworkbench.colorCustomizationsというキーを作ります.
この中に選択範囲や検索ヒット時の網掛け色を書いていきます.

てきとうに書いたものがこちら↓

{
    "workbench.colorCustomizations": {

        "editor.selectionBackground": "#c979f7",
        "editor.selectionHighlightBackground": "#394185",
        "editor.findMatchHighlightBackground": "#264eff",
        "editor.findMatchBorder": "#ffffff",
        "editor.findMatchBackground": "#ae00ff"
    },
}

Backgroundが網掛けの色になります.Borderは網掛けの枠線です.
上記の設定では,以下のパターンについて色をカスタマイズしています(テキトーに説明を書きましたが,設定エディタがヒントを出してくれるはずです).

  • selectionBackground: 選択中のテキスト.マウスドラッグやShift+矢印キーで範囲選択したときの色.
  • selectionHighlightBackground: 選択中のテキストと同じ文字列.またはカーソルがある行の色.
  • findMatchHighlightBackground: 検索にヒットした文字列.
  • findMatchBorder: 検索にヒットした文字列群のうち,現在フォーカスしているものの枠線
  • findMatchBackground: 検索にヒットした文字列群のうち,現在フォーカスしているもの.

実際のスクショがこれ(検索で"editor"と入力し,selectionBackgroundに対応する部分にフォーカスした状態).

検索時.png

テキスト選択時はこんな感じです("Background"を選択しました).

テキスト選択時.png

文字の色はもとのままで若干テキストが読みづらかったり,そもそも色がダサいなどの難点はありますが,下のデフォルト設定よりは見やすいと思います.
自分でカスタマイズしてレッツ・ハイ・ビジビリティー・VSCode!

↓デフォルト例("Background"を選択しました).

デフォルト例.png

23
13
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
23
13