今回はvsコードをオリジナルCSSを適用して色を自在に変更してみたいとおもいます。
Custom CSS and JS Loaderのインストール
VS Codeの拡張機能マーケットプレイスで「Custom CSS and JS Loader」を検索し、インストールします。
開発者ツールにてCSSを調べる
Ctrl + Shift + IまたはF1キーを押してコマンドパレットを開き、「開発者ツールの切り替え」と入力して開発者ツールを開きます。- 開発者ツールが開いたら、上部の「Elements」タブを選択します。
- 左上の選択ツール（マウスアイコン）をクリックして、変更したい要素を選択します。
- 選択した要素に関連するCSSセレクターが右側のスタイルペインに表示されます。このセレクターをメモしておきます。
カスタムCSSファイルの作成
- 任意の場所にカスタムCSSファイル（例：
custom.css）を作成します。 - 開発者ツールで確認したセレクターを使用して、以下のようなCSSコードを記述します。以下のコードはエクスプローラーのトップフォルダーの行のみ背景色を変えるものです。
.explorer-folders-view .monaco-list-row[aria-level='1'] {
background-color: #5D99FF !important;
}VS Codeの設定にCSSファイルのパスを指定
- VS Codeの設定（
settings.json）を開きます。通常、Ctrl + ,で設定を開き、右上の「{}」アイコンをクリックしてsettings.jsonを直接編集します。 - 以下の設定を追加します。※
絶対パスは作成したcustom.cssの絶対パスに置き換えてください。Windowsの場合、パスはfile:///C:/path/to/custom.cssのようになります。
"vscode_custom_css.imports": [
"file:///絶対パス/custom.css"
]VS Codeを管理者権限で再起動
VS Codeを一度閉じて、管理者権限で再起動します。
管理者権限で再起動する方法：
・Windowsの場合：VS Codeのショートカットを右クリックし、「管理者として実行」を選択します。
・macOSの場合：ターミナルからsudo codeコマンドを使用してVS Codeを起動します。
Custom CSS and JS Loaderのコマンドを実行
Ctrl + Shift + Pを押してコマンドパレットを開き、「Enable Custom CSS and JS」を選択します。
変更の確認
VS Codeが再起動した後、エクスプローラービューでaria-level='1'の要素の背景色が#5D99FFに変更されていることを確認します。
最後に
- 管理者権限での再起動やカスタムCSSの適用は、VS Codeのバージョンやセキュリティ設定によっては注意が必要です。設定変更前に、必要に応じてバックアップを取ってください。
- VS Codeのアップデート後に再度カスタムCSSを有効にする必要がある場合があります。
コメント