VS Code のカラーテーマを自作したよ. 名前は桜っぽいから Cherry Petals. リポジトリはこちら.
その制作日記風の読み物を置いておく.
非常に主観的な独自研究でやっているのでツッコミされても何も言えないし, 色の決定に関して参考にした文献もないよ. 自分用のカラーテーマだからね.
コンセプトの決定
デフォルトや他のテーマに不満があったために, 自作テーマを作ることにした. 具体的には以下の不満があった.
- コントラストが強すぎて長時間の作業に向いていない
- コントラストが弱すぎて文字の判別がしづらい
- 使う部分以外の色が多く, 画面上に不必要な情報が多い
というわけで, これを補う感じで以下のコンセプトに基づいてカラーテーマを作っていく.
- ダークテーマ
- 長時間の作業でも目が疲れにくい
- 文字を判別しやすい
- あまり使わない部分ほど色数を減らす
背景色の決定
長時間見ていても疲れないように, 目に優しいと言われている緑色を暗くした色を使うことにした. 緑色を暗くした様々な色の候補を画面全体に広げて長時間眺めることで, どの色が背景色に適しているかを確かめた.
実験の結果, #191d19 を使うことにした.
アクセント色の決定
ハイライトしているアイテムやカーソルに用いる色を決める. 先程の背景色に対して, それぞれ色相が遠い色と近い色の 2 つを選ぶことにした.
ハイライトに使う色は, 早々と #e6ade6 に決まった. 桜をイメージした淡いピンクのつもり. バッジや通知に使う色はこれを暗くした #64004b にした.
対して, カーソルの色には難航した. パット見でも迷わずにカーソルの位置がすぐにわかる明るめの色が必要だった. これは紫や青緑や黄を試した後に水色の #00f7ff に決まった. 実際には #00f7ffbb と少し透過させてある.
色のとり方
#191d19, #e6ade6, #00f7ff の三つを組み合わせて色を取っていき, 以下の法則に従って細かい色を決めていくことにした.
- 近い系列のモノの色は近くして, 遠い系列とは遠ざける
- 頻度の少ないものほど明るくして, 多いものは暗くする
- 頻度が偏るもの (選択中のテキストやコメント) はアクセント色に寄せる
シンタックスハイライト
シンタックスハイライトをするために決めた大体の色とその理由を書いておく.
- 地の文
#ccc: ボーッとしていても集中していても見やすい灰色を試行錯誤した - 変数
#faeaab: プログラム中で把握する必要がある存在なので, 地の文と同じくらいの明るさでどのアクセント色からも遠ざけた - コメント
#e6ade6: 連なっても点在しても目立ちやすく読みやすいようにするため第一アクセント色と同じ - キーワード
#38b4aa: 文法上重要な意味を持つが要らない情報であることも多いので背景色と第二アクセント色の中間 - リテラル
#5ab8cf: 頻度は少ないが, 値自体を頻繁に眺める必要は無いため第二アクセント色を濁らせた - 文字列
#c3e88d: 頻度が少なく値自体の意味も強いため背景色を明るくした - クラス
#6b8eff: それなりの頻度でかつ重要であるため第一アクセント色と第二アクセント色の中間 -
this系#158a4f: 頻度が多いがこれ自体には意味がないため背景色を少し明るくした (暗めではある) - 記号系
#b89c69: 単体は重要ではないため背景色と第一アクセント色の中間を暗くした
セマンティックハイライト
公開してからしばらく後にセマンティックハイライトにも対応した. そのときに決めた色も同様に書いておく.
- インターフェイス
#a280cf: より第一アクセント色を強くしてクラスとの違いを明確にした - 関数
#84d4b3: 大量に書かれている可能性があるため, 背景色を明るくしつつ第二アクセント色に寄せた