普段からリモートワークがメインで仕事をしているエンジニアです。
オンラインでコードを共有して議論することがあるのですが、いつも「見づらいです」と言われ続けた私のVSCodeのテーマを晒します。
なお老眼により私自身も見づらくなってきたため、現在は落ち着いたテーマになってます。
加えて、SynthWave（というよりはCustom CSS and JS Loader）を適用すると、スクリーンショット右下にあるように「お前のVSCodeぶっ壊れてるから再インストールしろや」というメッセージが毎回表示されるためいい加減辞めました。
使っていた拡張機能
SynthWave '84
テーマは「SynthWave '84」を使ってます。バックトゥーザフューチャーやブレードランナー感がカッコいいです。そして何より文字が光ります。でも年取って来ると、光のせいで文字が小さいとぼやけて見づらいという致命的問題が発生し始めました。
これかっこいい、使いたいという（若い）方はぜひ以下の記事も参照してください。
Synthwave x Fluoromachine
この拡張機能に含まれるCSSを使うことで、VSCodeの背景にかっこいい奥行きが生まれます。（さらに見づらくなる）
なお、このテーマの色合いは自分自身でさえコードが見づらくなったため、早急にやめました。
Custom CSS and JS Loader
この拡張機能はSynthWave '84といっしょに使う必要があります。
settings.jsonの設定
見た目に関わる部分の設定のみ記述します。SynthWave用のCSSへのパスはご自身の環境に合わせて変更してください。
フォントに指定している「UDEV Gothic 35NF」は日英フォントを同時に使う場合に文字間隔がいい感じに調整されるので、普通におすすめです。
{
// SynthWave用
"vscode_custom_css.imports": [
"file:///Users/bon/.vscode/extensions/webrender.synthwave-x-fluoromachine-0.0.14/synthwave-x-fluoromachine.css"
],
"editor.fontFamily": "'UDEV Gothic 35NF'",
"editor.fontLigatures": true,
"editor.fontSize": 13,
"editor.fontWeight": 300,
（以下略）
}
udev-gothic:
VSCodeに設定する方法
いざ適用
適用の順番にもこだわりが必要です。
まずはテーマを変えます。メニューの設定→テーマ→カラーテーマ→SynthWave '84。VSCode再起動
↓
次に Custom CSS and JS LoaderをEnableにします。Macの場合は Command + Shift + P で開くコマンドウィンドウから「Enable Custom CSS and JS」を選んで実行
その後再度再起動
↓
完成！
VSCodeをアップデートするとCustom CSSがリセットされる場合もあるため、そのときは再度上記手順を適用してください。