20250111102543 vscodeのカラーテーマを作る
成果物はこちら。気がついたら適当に更新すると思う。 kazbo/kino-minimal: vscode theme for me - Kinoshita Laboratory git: all your base are belong to us
手順的なもの
Color Theme(公式ドキュメント) の手順。 ただし、これで作成されるテーマのテンプレートみたいなものが、markdownの設定だけやたら細かいなど、自分には合わないものだった。ほとんど消してから作った。
F5 を押すとテーマを適用したvscodeが立ち上がり、変更がリアルタイム反映されるので、その部分は使いやすい。
日本語 VSCodeのカラーテーマを作り始めた話 | 東京工業大学デジタル創作同好会traP
tips
開発を ~/.vscode/extensions 内のフォルダでやると、デバッグ用ではない通常のvscodeでもテーマが試せる。ここで作業した方がいいかもしれない。
コマンド Developer: Generate Color Theme From Current Settings で、現在の設定が全て出力できる。何か元になるテーマがある場合は、この機能を有効に使える。
コマンド Developer: Inspect Editor Tokens and Scopes を選んで、 該当の文字列などをクリックする(範囲指定ではない)と、どのような属性で設定可能なのかが表示できる。 foreground に表示されている名前で指定しても良いし、textmate scopes で更に細かく指定することもできる。
例えば Cのプリプロセッサは、
- “keyword.control.directive”,
#define, #if など - “entity.name.function.preprocessor.cpp”,
#define HOGEの HOGE - “string.quoted.other.lt-gt.include.cpp”,
<stdio>など - “string.quoted.double.include.cpp”
"hoge.h"など
・・・まだあると思う。細かく指定しようとすれば、いくらでもできるが、大変。 自分が使う言語で細かく設定してもいいかもしれないとは思うが、全部をケアするのは恐らく人類には不可能。
また、タブ、サイドバーなどはInspectすることができない。 どのようなエントリーがあるのかすら謎だったりする。
Theme Studio: Create VS Code Themes! このサイトで Side Bar とか Tabs などを選択して、表示されている色をいじってみてどのように変化するかを確認しながら入れていくと多少はできた。それでも全部ではない。
色の決め方
RGBだと選択肢がありすぎて決められない。 HSLだとhueである程度制限された中で色が選択できるようになる。 ところが、HSLでは見た目のコントラストが同じlightnessの範囲で設定したとしても統一感がなくなってしまう問題がある。それを解決した、OKLCHがあるけどchromaパラメータが色によって最大値が違っていたりややこしい。 などを経て OKHSL (cf. Two new color spaces for color picking - Okhsv and Okhsl) というのが考えられ、それが使いやすい。
それを使おうという話 Let’s Create a Terminal Color Scheme - Ham Vocke。
Root Loops その成果物的なWEBアプリ。 角度と分割数とかで生成したいが、パラメータで遊んじゃっててわけわからない。
これはOKHSLが使えてRGBに変換できる。 Interactive color picker comparison
完全に自分用メモだけど60°ずつの表。 82は素の文字の色 ccc の OKHSLでのL。
| OKHSL | RGB |
|---|---|
| 0, 50, 82 | ebbecb |
| 60, 50, 82 | e9c4a7 |
| 120, 50, 82 | c5d599 |
| 180, 50, 82 | 99dcce |
| 240, 50, 82 | afd1eb |
| 300, 50, 82 | d1c5ea |
OKHSLはCSSなどでは使えないが、OKLCHまでなら可能。
いい感じの色を作りたいならOklchを使うといい感じになる | なすびブログ
OKLCHで高コントラストなカラーパレットを生成するサイトを作った【ダークテーマ対応】
20251019 これを元に変更するかも : I am sorry, but everyone is getting syntax highlighting wrong