Vimカラースキーム自作のすすめ

ぺりー

Published in

Pairs Engineering

19 min readJul 19, 2023

https://github.com/lifepillar/vim-colortemplate

こんにちは！Eureka Backend Engineerのぺりーです。

本記事は2023年6月30日にpixivで行われたゴリラ.vimで発表した内容をまとめ、Vim駅伝の2023–07–19に寄稿したものです。

前回はK Ikedaさんの「west-jp-vimのオフ会幹事をしました」でした。

https://speakerdeck.com/satorunooshie/karasukimuzi-zuo-nosusume

2022年にVimのカラースキームがリメイクされてから久しいですね！
みなさんカラースキーム変更していますか？

Remake the built-in color schemes to modern standards by romainl · Pull Request #9795 · vim/vim

replace the original color schemes with the remakes improve check_colors.vim rewrite check_colors.vim in vim9script…

github.com

今年は10年に一度の猛暑日があるということで、少しでも涼しく夏を過ごせるように寒色系のカラースキームに変更してみました。

iceberg開発者のcocoponさんが発表した2017年のVim Confの資料の研究結果によると、人生の33%はカラースキームを眺めているとあります

https://speakerdeck.com/cocopon/creating-your-lovely-color-scheme?slide=15

素敵なカラースキームを使うことでQOLが向上すると言っても過言ではないですね！

今回は、「Vimカラースキーム意外と簡単に自作できるじゃん」と思ってもらえることを目標に、カラースキーム自作の流れを説明してみたいと思います。

想定読者

最初に入れたカラースキームを使い続けてる人
カラースキームの自作大変そう。。。と思っている人
長年カラースキームを変えていなくて刺激が欲しい人

カラースキームを作るとは
用語の説明
2.1. ハイライトグループとは
2.2. CUIとGUIの色定義
2.3. ハイライトのリンク
カラースキーム使いのレベル10
簡単な変更をしてみる
4.1. 標準のカラースキームの適用
4.2. 公開済みカラースキームの適用
4.3. 一部をカスタマイズする
カラースキーム自作の流れ
5.1. コンセプト・テーマ設定
5.2. テンプレート編集
5.3. 色の見え方の確認
最後に

1. カラースキームを作るとは

そもそもカラースキームを作るとは各ハイライトグループに色や書式を設定することです。

色や書式を設定できる対象をグループに分けたのがハイライトグループです

ハイライトグループには予めデフォルトの色や書式が設定されており、設定を省いた場合はデフォルトが適用されます。

2. 用語の説明

この章ではカラースキームを作る際に必要な最低限の用語を説明していきます。

2.1. ハイライトグループとは

ハイライトグループには大きく2種類あります( :help highlight )

Vim本体の部品で使うハイライトグループ
言語関係なく同じ部分を指す( :help highlight-groups )
例)
・テキスト(Normal)
・ステータスライン(StatusLine)
・行番号(LineNr)
・補完のポップアップ(Pmenu)
・quickfixリスト(QuickFixLine)など
Syntax機能で使うハイライトグループ
各言語ごとに多少の差異がある( :help group-name )
例)
・コメント(Comment)
・定数(Constant)
・変数(Identifier)
・命令文(Statement)
・プリプロセッサ命令(Preproc)など

ハイライトグループに対して色や書式を設定するには下記の形式のコマンドを実行します

:hi[ghlight] {group-name} {key}={arg}...

2.2. CUIとGUIの色定義

ハイライトグループにはCUIとGUIそれぞれ色を指定することができます

GUIの設定はターミナルで termguicolors をオンにするか、gVimを使っている際に適用されます

先ほどのコマンドを使って実際に変更を適用することができます

:hi[ghlight] Normal term=bold ctermfg=Cyan guifg=#80a0ff gui=bold

2.3. ハイライトのリンク

全てのハイライトグループに色を割り当てなければならないわけではありません

2.1.2で紹介したSyntax機能で使うハイライトグループ(構文グループ)では、指定したハイライトグループを別のハイライトグループの書式と同じ書式に設定すること(=リンク)ができます

group-names のうち、マーク(*)されている優先グループになっており、優先グループにはデフォルトのSyntaxが定義されています

*Comment, *Constant, *Identifier, *Statement, *PreProc, *Type, *Special, *Underlined, *Ignore, *Error, *Todo

そのため、11個の優先グループの設定を上書きすれば、全てのデフォルトのSyntaxから更新することができます

もちろんハイライトのリンクを削除したり追加することもできます

:hi[ghlight][!] [default] link {from-group} {to-group}

例えば、デフォルトではStringやCharacterなどが*Constantにリンクされていて、以下が実際の記述です。

highlight default link String    Constant
highlight default link Character Constant
highlight default link Number    Constant
highlight default link Boolean   Constant
highlight default link Float     Number

3. カラースキーム使いのレベル10

必要となる用語の学習が終わったところで、今回目指すべき目標を再度確認してみます

Vim使いのレベル10を参考にしたカラースキーム使いのレベル10を用意しました

今回はLv2 デフォルトのカラースキームを使うのをやめ、素晴らしいハイライトに自己陶酔するを目指します

https://speakerdeck.com/satorunooshie/karasukimuzi-zuo-nosusume?slide=19

4. 簡単な変更をしてみる

さっそく簡単な変更をしてみます

4.1. 標準のカラースキームの適用

まずはデフォルトのカラースキームから標準でインストールされているカラースキームに変更してみます

$VIMRUNTIME
└── colors/
    ├── README.txt
    ├── blue.vim
    ├── darkblue.vim
    ├── default.vim
    ├── delek.vim
    ├── desert.vim
    ├── elflord.vim
    ├── evening.vim
    ├── habamax.vim
    ├── industry.vim
    ├── koehler.vim
    ├── lists
    │   ├── csscolors.vim
    │   └── default.vim
    ├── lunaperche.vim
    ├── morning.vim
    ├── murphy.vim
    ├── pablo.vim
    ├── peachpuff.vim
    ├── quiet.vim
    ├── ron.vim
    ├── shine.vim
    ├── slate.vim
    ├── tools
    │   └── check_colors.vim
    ├── torte.vim
    └── zellner.vim

標準のカラースキームは $VIMRUNTIME/colors/ にあり、新しく追加されたカラースキームを含む全ての標準のカラースキームはGitHubから参照できます

GitHub - vim/colorschemes: colorschemes for Vim

colorschemes for Vim. Contribute to vim/colorschemes development by creating an account on GitHub.

github.com

適用する際には次のコマンドを使います

:colo[rscheme] {name}

カラースキームに限らずですが、Tabで補完できるようにCtr-dで一覧を確認することができます

4.2. 公開済みカラースキームの適用

公開済みのカラースキームはダウンロードし~/.vim/colors配下に配置する必要があります

適切な場所に配置できていれば colo[scheme] コマンドで適用することができます

~/
└── .vim/
    └── colors/
        └── downloaded_colorscheme.vim

ダウンロードしたカラースキームを直接編集するなどして改変することはできますが、公開する場合はライセンスに気をつけてください。

4.3. 一部をカスタマイズする

前述したようにカラースキームファイルを直接編集することで、特定のカラースキームをカスタマイズすることができます

しかしカラースキームを変更した際にその変更を別のカラースキームにも横断的に適用することはできません

そこでカラースキームに関わらずカスタマイズしたい際には.vimrcにカラースキームを上書きするように追記する方法を取ります

augroup MyVimrcCmd
    autocmd ColorScheme * call s:onColorScheme()
augroup END
function! s:onColorScheme()
    hi DiffAdd    ctermfg=10   ctermbg=NONE cterm=NONE
    hi DiffChange ctermfg=NONE ctermbg=NONE cterm=NONE
    hi DiffDelete ctermfg=242  ctermbg=NONE cterm=NONE
    hi DiffText   ctermfg=15   ctermbg=160  cterm=bold
endfunction
call s:onColorScheme()

上のように記述すると、Vim起動時とカラースキーム変更時の両方で、Diff関連の上書きするため、どのカラースキームを使用してもDiffモードで下記の見た目になります

このように起動時のみならず、カラースキーム変更時に上書きする設定を書くことで、別のカラースキームを適用した際にも、カスタマイズが再度適用されるようになります

5. カラースキーム自作の流れ

いよいよカラースキームの自作の説明に入ります
後述の流れに沿って自作することがおすすめです

5.1. コンセプト・テーマ設定

コンセプト・テーマを設定することで、全体の雰囲気の決定とカラフルになりすぎるのを防ぐことができます

そのために次の二つのことを決めます

対応する背景(background)の決定
dark, light, 両方どれに対応するか
対応するカラーの決定
GUI, base256, base16, base8, 全て

どちらも全て対応するのがカラースキームとしては望ましいですが、敷居を下げるために、まずは自分が使用しているものだけでも良いと思います

何から手をつければいいかわからない場合
:set background? を実行して現在の使用している背景を確認します
カラーはgVimもしくはtermguicolorsを使用している場合はGUI、それ以外はbase256に対応すれば十分です

便利なWebサービス

とはいえ、ゼロからコンセプトとテーマを決めるのは難しいため、それをサポートする便利なWebサービスを2つ紹介します

1. ThemeCreator

ThemeCreator

ThemeCreator, create quickly themes for IntelliJ Editors, Atom, Textmate, Emacs and Vim.

mswift42.github.io

ThemeCreatorではVimだけでなくIntelliJなど別のエディタ・IDEのカラーテーマをブラウザで作成、ダウンロードできます

複数のテーマのサンプルが用意されていたり、JavaScript, Ruby, C, Pythonに対応していたり、GitHubでのforkも歓迎されていたりなどシンプルで使い勝手が良いです。

GitHub - mswift42/themecreator

https://mswift42.github.io/themecreator/ create themes for intellij, textmate, textadept, atom, emacs, vim and gnome…

github.com

2. Vivify

https://speakerdeck.com/satorunooshie/karasukimuzi-zuo-nosusume?slide=23

VivifyはVim用のカラースキームエディターで、特に各ハイライトグループが言語ごとにどの部分に対応するのかを確認することができます

また、100を超えるカラースキームが選択できるため、色の微調整や別のカラースキームを試すこともできます

Bytefluent | Vivify

A colorscheme editor for vim/gvim/macvim. Terminal-friendly color approximation. Vim color schemes.

bytefluent.com

5.2. テンプレート編集

コンセプト・テーマが決まったら、lifepillar/vim-colortemplate を使用してテンプレートを編集します

lifepillar/vim-colortemplate はVimのカラースキームを作るためのプラグインで独自の記法で記述してBuildすることでカラースキームが作成できます

Vimのカラースキームも lifepillar/vim-colortemplate でBuild、配布されていいて、お墨付きといえるでしょう

The color schemes distributed with Vim are built with lifepillar/colortemplate
(https://github.com/lifepillar/vim-colortemplate). It is therefore highly
recommended.
If you would like your color scheme to be distributed with Vim, make sure
that:
- it satisfies the guidelines above,
- it was made with colortemplate,
and join us at vim/colorschemes: (https://github.com/vim/colorschemes).
ref: $VIMRUNTIME/colors/README.txt