Vim : colors like Firefox devtools debugger

Rapprocher la coloration syntaxique de vim de celle du debugger des outils de développeur de Firefox en mode sombre.

Pour avoir pas mal travaillé de nuit dernièrement, j’ai trouvé la coloration syntaxique du debugger de Firefox confortable.

$ vim ~/.vimrc

" …
syntax on (1)
set t_Co=256 (2)
colorscheme molokai_devtools (3)
" …

1	Enable syntax coloration
2	Set color scale to 256
3	Point to : `~/.vim/colors/dolokai_devtools.vim` colorscheme file definition

$ vim ~/.vim/colors/dolokai_devtools.vim

" Vim color file
"
" Author: Tomas Restrepo - https://github.com/tomasr/molokai
"
" Mod by Siltaar - https://grimoire-command.es/2022/vim_colors_like_firefox_debugger.html
" Droped GUI colorscheme support
"
hi clear
if version > 580
    " no guarantees for version 5.8 and below, but this makes it stop
    " complaining
    hi clear
    if exists("syntax_on")
        syntax reset
    endif
endif
let g:colors_name="molokai_devtools"
" Support for 256-color terminal
" green : 112
" pink : 212
" purple : 141
" blue : 81
if &t_Co > 255
   hi CursorLineNr ctermfg=208               cterm=none
   hi CursorLine               ctermbg=236   cterm=none
   hi Normal          ctermfg=252   ctermbg=233
   hi Boolean         ctermfg=212
   hi Character       ctermfg=144
   hi Number          ctermfg=208
   hi String          ctermfg=69
   hi Conditional     ctermfg=212
   hi Constant        ctermfg=141
   hi Cursor          ctermfg=16  ctermbg=252
   hi Debug           ctermfg=225
   hi Define          ctermfg=81
   hi Delimiter       ctermfg=241
   "
   hi DiffAdd                     ctermbg=24
   hi DiffChange      ctermfg=181 ctermbg=239
   hi DiffDelete      ctermfg=162 ctermbg=53
   hi DiffText                    ctermbg=102
   "
   hi Directory       ctermfg=212
   hi Error           ctermfg=219 ctermbg=89
   hi ErrorMsg        ctermfg=199 ctermbg=16
   hi Exception       ctermfg=112
   hi Float           ctermfg=135
   hi FoldColumn      ctermfg=67  ctermbg=16
   hi Folded          ctermfg=67  ctermbg=16
   hi Function        ctermfg=81
   hi Identifier      ctermfg=81               cterm=none
   hi Ignore          ctermfg=244 ctermbg=232
   hi IncSearch       ctermfg=193 ctermbg=16
   "
   hi keyword         ctermfg=212
   hi Label           ctermfg=112               cterm=none
   hi Macro           ctermfg=193
   hi SpecialKey      ctermfg=81
   "
   hi MatchParen      ctermfg=233  ctermbg=208
   hi ModeMsg         ctermfg=112
   hi MoreMsg         ctermfg=112
   hi Noise           ctermfg=252
   hi Operator        ctermfg=252
   " complete menu
   hi Pmenu           ctermfg=81  ctermbg=16
   hi PmenuSel        ctermfg=255 ctermbg=242
   hi PmenuSbar                   ctermbg=235
   hi PmenuThumb      ctermfg=81
   "
   hi PreCondit       ctermfg=212
   hi PreProc         ctermfg=212
   hi Question        ctermfg=81
   hi Repeat          ctermfg=212
   hi Search          ctermfg=0   ctermbg=179   cterm=NONE
   " marks column
   hi SignColumn      ctermfg=112 ctermbg=235
   hi SpecialChar     ctermfg=212
   hi SpecialComment  ctermfg=245
   hi Special         ctermfg=81
	 " for spell
	 hi SpellBad                ctermbg=52
   hi SpellCap                ctermbg=17
   hi SpellLocal              ctermbg=17
   hi SpellRare  ctermfg=none ctermbg=none  cterm=reverse
   hi Statement       ctermfg=212
"   hi StatusLine      ctermfg=238 ctermbg=253
"   hi StatusLineNC    ctermfg=244 ctermbg=232
   " let const…
   hi StorageClass    ctermfg=212
   hi Structure       ctermfg=212
   hi Tag             ctermfg=212
   hi Title           ctermfg=166
   hi Todo            ctermfg=231 ctermbg=235
   "
   hi Typedef         ctermfg=81
   hi Type            ctermfg=81                cterm=none
   hi Underlined      ctermfg=244               cterm=underline
   "
   hi VertSplit       ctermfg=244 ctermbg=236
   hi VisualNOS                   ctermbg=238
   hi Visual                      ctermbg=236
   hi WarningMsg      ctermfg=231 ctermbg=238
   hi WildMenu        ctermfg=81  ctermbg=16
   "
   hi Comment         ctermfg=59
   hi CursorColumn                ctermbg=236
   hi ColorColumn                 ctermbg=236
   hi LineNr          ctermfg=250 ctermbg=236
   hi NonText         ctermfg=59
   "
   hi SpecialKey      ctermfg=59
end
" Must be at the end, because of ctermbg=234 bug.
" https://groups.google.com/forum/#!msg/vim_dev/afPqwAFNdrU/nqh6tOM87QUJ
set background=dark

In this previous file, if you define the default category Normal in green, you get very close to Firefox Devtools colorscheme when editing JavaScript… But every normal text stays green, so I kept it white.

Last, but not least, we can improve the way vim analyzes JavaScript (creating the Noise category for instance) :

# vim /usr/share/vim/vim90/syntax/javascript.vim

" Vim syntax file
" Language:     JavaScript
" Maintainer:   vim-javascript community
" URL:          https://github.com/pangloss/vim-javascript
"
" … ~400 lines of definition of code categories

Grimoire-
Command
.es