vimのカラースキームを作ってみた - Money Forward Developers Blog

こんにちは。マネーフォワードでインターン中の牧田です。

先日マネーフォワードのvimカラースキームを（勝手に）作ったので簡単に紹介します。

背景

vimに限らず、エディタを使う上でカラースキームは重要な要素です。そして、個々人で好みも多種多様です。

みなさんの中にも、好みに合ったカラースキームを中々見つけられず、妥協しつつも既存のものから選んだという人も多いのではないでしょうか。

私もカラースキームに対して特別に情熱を燃やしているわけではありませんが、既存のカラースキームは自分の好みにあと一歩届かずといったところでした。

「それならば自分で作ってしまおう」と考えました。偶然ながら個人的に好きな色であるオレンジと青が、マネーフォワードのコーポレートカラーとプロダクトカラーということもあり、それをマネーフォワードのカラースキームにしようと思いました。

多少強引かもしれませんが、マネーフォワードのカラースキームであれば愛着も沸き、社内、社外にも共有できるので自分一人で完結させるよりも意味のあるものになります。ということで、カラースキームの簡単な作り方と共に共有させていただきたいと思います。

カラースキームの作り方(vim)

今回私が作ったものがこちらです。

https://github.com/anoike/vim-moneyforward

GUI未対応です。すみません。

カラースキームを作る際に既存のものをいくつか参考にしました。

vimのカラースキームを見るならこちらのサイトがおすすめです。

http://vimcolors.com/

カラースキームを作るときは.vim/colors配下などに<カラースキームの名前>.vimのようなファイルを用意して、そこに色々と記述していきます。

はじめに、カラースキームは明るい背景と暗い背景で大きく2種類に別れます。

vimには明るい背景と暗い背景それぞれに合う色の組み合わせが用意されており、それらを使えるようにするのがset background=light,set background=darkという設定です。多くのカラースキームの定義ファイルの冒頭にはこれらが記述されています。今回はset background=darkとしました。

続いて、シンタックスハイライトを一度デフォルトに戻します。

hi clear
if exists("syntax_on")
  syntax reset
endif

こちらも多くのカラースキームの冒頭に記述されています。

let colors_name = "moneyforward"　これでカラースキームの名前を設定できます。

ここからはいよいよ色を指定していきます。色を指定するときに必要となるのはグループ名、色を指定する属性、指定する色の3つです。

グループ

vimには同じ構文（変数、関数等）を指すグループとそれ以外のvimで使われるもの（選択中の行、ステータスバー等）を指すグループが存在し、それぞれ :help {group-name}と:help highlight-groupsで確認できます。

:help {group-name}

*がついているものは親グループで子グループの色を指定しない限り親グループの色が子グループに適用されます。

※help group-nameでもグループを表示できますが、親グループしか表示されません。

	グループ名	詳細
*	Comment	any comment
*	Constant	any constant
	String	a string constant: "this is a string"
	Character	a character constant: 'c', '\n'
	Number	a number constant: 234, 0xff
	Boolean	a boolean constant: TRUE, false
	Float	a floating point constant: 2.3e10
*	Identifier	any variable name
	Function	function name (also: methods for classes)
*	Statement	any statement
	Conditional	if, then, else, endif, switch, etc.
	Repeat	for, do, while, etc.
	Label	case, default, etc.
	Operator	"sizeof", "+", "*", etc.
	Keyword	any other keyword
	Exception	try, catch, throw
*	PreProc	generic Preprocessor
	Include	preprocessor #include
	Define	preprocessor #define
	Macro	same as Define
	PreCondit	preprocessor #if, #else, #endif, etc.
*	Type	int, long, char, etc.
	StorageClass	static, register, volatile, etc.
	Structure	struct, union, enum, etc.
	Typedef	A typedef
*	Special	any special symbol
	SpecialChar	special character in a constant
	Tag	you can use CTRL-] on this
	Delimiter	character that needs attention
	SpecialComment	special things inside a comment
	Debug	debugging statements
*	Underlined	text that stands out, HTML links

:help highlight-groups

グループ名	詳細
ColorColumn	used for the columns set with 'colorcolumn' \|
Conceal	placeholder characters substituted for concealed \| text (see 'conceallevel')
Cursor	the character under the cursor \|
CursorIM	like Cursor, but used when in IME mode \| CursorIM
CursorColumn	the screen column that the cursor is in when 'cursorcolumn' is \| set
CursorLine	the screen line that the cursor is in when 'cursorline' is \| set
Directory	directory names (and other special names in listings) \|
DiffAdd	diff mode: Added line \| diff.txt
DiffChange	diff mode: Changed line \| diff.txt
DiffDelete	diff mode: Deleted line \| diff.txt
DiffText	diff mode: Changed text within a changed line \| diff.txt
ErrorMsg	error messages on the command line \|
VertSplit	the column separating vertically split windows \|
Folded	line used for closed folds \|
FoldColumn	'foldcolumn' \|
SignColumn	column where \| signs \| are displayed
IncSearch	'incsearch' highlighting; also used for the text replaced with \| ":s///c"
LineNr	Line number for ":number" and ":#" commands, and when 'number' \| or 'relativenumber' option is set.
CursorLineNr	Like LineNr when 'cursorline' or 'relativenumber' is set for \| the cursor line.
MatchParen	The character under the cursor or just before it, if it \| is a paired bracket, and its match. \| pi_paren.txt
ModeMsg	'showmode' message (e.g., "-- INSERT --") \|

基本的にはここで確認できるグループに対して色を指定していくことになります。また、現在各グループに割り当てられている色は:highlightで確認できます。

属性

属性はcui用とgui用に別れ、以下のものがあります。

属性名	指定先	備考
guifg	gvimの文字色	16進数カラーコードか定義済の色で指定
guibg	gvimの文字背景	同上
gui	gvimの文字属性	太字、斜体など
ctermfg	cuiの文字色	ターミナルの色番号で指定
ctermbg	cuiの文字背景	同上
cterm	cuiの文字属性	太字、斜体など

色指定

色の指定はguiならカラーコード、cuiならターミナルの色番号を用いて行います。ターミナルの色番号についてはこちらを参考に。

グループに対しての色の指定は上記の3つを利用して、 hi <group-name> <属性>=<指定する色> とします。hiはhilightでも構いません。あとはこれを各グループに対して指定していきます。ゼロから指定するのは大変だと言う方は、グループ、属性について理解した上で既存のカラースキームの色を置換してみるといいかもしれません。