Creating Your Lovely Color Scheme

Color schemes occupy an important part in your life. This talk will explain how to create your lovely color scheme for Vim, and will introduce some useful tools.

VimConf 2017 — International Vim Conference:
http://vimconf.vim-jp.org/2017/

Iceberg — Dark blue color scheme for Vim:
https://github.com/cocopon/iceberg.vim

colorswat.ch — Collection of color schemes for Vim:
http://colorswat.ch/

Transcript

1. Creating Your Lovely
   Color Scheme
   Hiroki Kokubun (@cocopon), #vimconf2017
   

   View Slide

2. About me
   

   View Slide

3. cocopon
   Developer/Designer
   

   View Slide

4. Creating mobile apps...
   http://cocopon.me/works/llumino/
   

   View Slide

5. And digital arts...
   http://sushipi.co/
   

   View Slide

6. And some Vim plugins
   https://github.com/cocopon/
   

   View Slide

7. How about you?
   I love color schemes!
   

   View Slide

8. Jellybeans
   This is the first color scheme I met
   

   View Slide

9. hybrid
   After a while I loved this new color scheme so much
   

   View Slide

10. And finally
    I created my own one
    

    View Slide

11. Iceberg
    https://github.com/cocopon/iceberg.vim
    

    View Slide

12. Ah...beautiful...
    I really love the universe
    of texts and colors
    

    View Slide

13. Color scheme
    is
    very IMPORTANT
    

    View Slide

14. If you are a programmer...
    8.0h: Sleeping
    8.0h: Working
    = Coding
    = Looking your color scheme
    8.0h: Spending time with your family
    or enjoying time for hobbies
    

    View Slide

15. 33% of your life is color scheme
    8.0h: Sleeping
    8.0h: Working
    = Coding
    = Looking your color scheme
    8.0h: Spending time with your family
    or enjoying time for hobbies
    33%
    33%
    33%
    * Source: ME
    

    View Slide

16. Agenda What is color scheme? ·····················
    How to create a color scheme? ·············
    How to create your lovely color scheme? ···
    Make your color scheme more lovely ········
    How to find great forerunners? ············
    Inside colorswat.ch ·······················
    

    View Slide

17. What is color scheme?
    

    View Slide

18. Before learning about color schemes,

    we need to know about
    Syntax and Highlighting
    

    View Slide

19. Syntax
    Syntax extracts syntax groups for highlighting
    help.txt For Vim version 8.0. Last change: 2016 Sep 12
    VIM - main help file
    k
    Move around: Use the cursor keys, or "h" to go left, h l
    "j" to go down, "k" to go up, "l" to go right. j
    Close this window: Use ":q".
    Get out of Vim: Use ":qa!" (careful, all changes are lost!).
    Jump to a subject: Position the cursor on a tag (e.g. bars) and hit CTRL-].
    With the mouse: ":set mouse=a" to enable the mouse (in xterm or GUI).
    Double-click the left mouse button on a tag, e.g. bars.
    Jump back: Type CTRL-T or CTRL-O. Repeat to go further back.
    Get specific help: It is possible to go directly to whatever you want help
    on, by giving an argument to the :help command.
    Prepend something to specify the context: help-context
    WHAT PREPEND EXAMPLE
    Normal mode command :help x
    :help
    

    View Slide

20. help.txt For Vim version 8.0. Last change: 2016 Sep 12
    VIM - main help file
    k
    Move around: Use the cursor keys, or "h" to go left, h l
    "j" to go down, "k" to go up, "l" to go right. j
    Close this window: Use ":q".
    Get out of Vim: Use ":qa!" (careful, all changes are lost!).
    Jump to a subject: Position the cursor on a tag (e.g. bars) and hit CTRL-].
    With the mouse: ":set mouse=a" to enable the mouse (in xterm or GUI).
    Double-click the left mouse button on a tag, e.g. bars.
    Jump back: Type CTRL-T or CTRL-O. Repeat to go further back.
    Get specific help: It is possible to go directly to whatever you want help
    on, by giving an argument to the :help command.
    Prepend something to specify the context: help-context
    WHAT PREPEND EXAMPLE
    Normal mode command :help x
    Syntax groups
    helpVim
    helpHyperTextJump
    helpSpecial
    :help
    

    View Slide

21. Syntax file
    * Syntax is defined by syntax file
    * Syntax file extracts syntax groups from buffer using pattern and some other rules
    ...
    " Group name Pattern etc.
    " ------------------ ----------------------------------------
    syn match helpSpecial "\"
    syn match helpHyperTextJump "\\\@syn match helpHyperTextEntry "\*[^"*|]\+\*\s"he=e-1 contains=helpStar
    ...
    Syntax file:
    $VIMRUNTIME/syntax/help.vim
    

    View Slide

22. Highlighting
    Highlighting is appearance information for syntax groups
    help.txt For Vim version 8.0. Last change: 2016 Sep 12
    VIM - main help file
    k
    Move around: Use the cursor keys, or "h" to go left, h l
    "j" to go down, "k" to go up, "l" to go right. j
    Close this window: Use ":q".
    Get out of Vim: Use ":qa!" (careful, all changes are lost!).
    Jump to a subject: Position the cursor on a tag (e.g. bars) and hit CTRL-].
    With the mouse: ":set mouse=a" to enable the mouse (in xterm or GUI).
    Double-click the left mouse button on a tag, e.g. bars.
    Jump back: Type CTRL-T or CTRL-O. Repeat to go further back.
    Get specific help: It is possible to go directly to whatever you want help
    on, by giving an argument to the :help command.
    Prepend something to specify the context: help-context
    WHAT PREPEND EXAMPLE
    Normal mode command :help x
    helpVim
    helpSpecial
    :help
    helpHyperTextJump
    Normal
    

    View Slide

23. Highlighting
    Highlighting is appearance information for syntax groups
    help.txt For Vim version 8.0. Last change: 2016 Sep 12
    VIM - main help file
    k
    Move around: Use the cursor keys, or "h" to go left, h l
    "j" to go down, "k" to go up, "l" to go right. j
    Close this window: Use ":q".
    Get out of Vim: Use ":qa!" (careful, all changes are lost!).
    Jump to a subject: Position the cursor on a tag (e.g. bars) and hit CTRL-].
    With the mouse: ":set mouse=a" to enable the mouse (in xterm or GUI).
    Double-click the left mouse button on a tag, e.g. bars.
    Jump back: Type CTRL-T or CTRL-O. Repeat to go further back.
    Get specific help: It is possible to go directly to whatever you want help
    on, by giving an argument to the :help command.
    Prepend something to specify the context: help-context
    WHAT PREPEND EXAMPLE
    Normal mode command :help x
    helpVim
    foreground: #89b8c2
    helpHyperTextJump
    foreground: #a093c7
    helpSpecial
    foreground: #b4be82
    :help
    Normal
    background: #161821
    foreground: #c6c8d1
    

    View Slide

24. Highlighting
    and for other UI components (= default highlighting groups)
    CursorLineNr Cursor
    LineNr
    VertSplit
    StatusLineNC
    PmenuThumb
    Pmenu
    StatusLine
    

    View Slide

25. Type :hi in your Vim!
    

    View Slide

26. These are highlighting groups
    for your current buffer-----
    

    View Slide

27. So, color scheme is...
    

    View Slide

28. ╭─────────────╮ ╭───────────────╮
    │ Syntax file │ │ Color scheme │
    ╰─────────────╯ ╰───────┬───────╯
    │ :syn │ :hi
    ╭─────────────╮ ▼ ╭──────────────────────────╮ │ ╭────────────────────────╮
    │ Buffer text │───*───▶│ Syntax groups │ │ │ Highlightings │
    ╰─────────────╯ │ ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ │ ▼ │ ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ │
    │ · jsComment │───*───▶ · #6b7089 │
    │ · jsFunction │───*───▶ · #e2a478 │
    │ · jsExport │───*───▶ · #84a0c6 │
    │ ┊ │ ┊ │ ┊ │
    ╰──────────────────────────╯ │ │ │
    ╭──────────────────────────╮ │ │ │
    │ Other UI components │ │ │ │
    │ ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ │ ▼ │ │
    │ · Cursor │───*───▶ · #c6c8d1, #161821 │
    │ · StatusLine │───*───▶ · #17171b, #818596 │
    │ · VertSplit │───*───▶ · #0f1117, #0f1117 │
    │ ┊ │ │ ┊ │
    ╰──────────────────────────╯ ╰────────────────────────╯
    ... a set of highlight definitions for syntax groups and other UI components
    

    View Slide

29. Color scheme is
    a set of highlighting definitions
    for syntax groups
    and other UI components
    

    View Slide

30. How to create
    a color scheme?
    

    View Slide

31. guibg is for background color, guifg is for foreground color (for 24-bit color environments)
    Define highlighting groups
    Use :hi command
    :hi! Normal guibg=#161821 guifg=#c6c8d1
    key value
    group name
    overwrite
    existing defs
    

    View Slide

32. ...and more highlighting groups
    ...
    hi! ColorColumn guibg=#1e2132
    hi! CursorColumn guibg=#1e2132
    hi! CursorLine guibg=#1e2132
    hi! Comment guifg=#6b7089
    hi! Constant guifg=#a093c7
    hi! Cursor guibg=#c6c8d1 guifg=#161821
    hi! CursorLineNr guibg=#2a3158 guifg=#cdd1e6
    hi! Delimiter guifg=#c6c8d1
    hi! DiffAdd guibg=#45493e guifg=#c0c5b9
    hi! DiffChange guibg=#384851 guifg=#b3c3cc
    hi! DiffDelete guibg=#53343b guifg=#ceb0b6
    hi! DiffText guibg=#5b7881 guifg=#c6c8d1
    hi! Directory guifg=#89b8c2
    hi! Error guibg=#161821 guifg=#e27878
    hi! ErrorMsg guibg=#161821 guifg=#e27878
    hi! WarningMsg guibg=#161821 guifg=#e27878
    hi! EndOfBuffer guibg=#161821 guifg=#242940
    hi! NonText guibg=#161821 guifg=#242940
    hi! SpecialKey guibg=#161821 guifg=#242940
    

    View Slide

33. Add CHARM before definitions
    " Support only 256 or full colors
    if !has('gui_running') && &t_Co < 256
    finish
    endif
    " Set appropriate background
    set background=dark
    " Reset existing highlightings and syntax
    hi clear
    if exists('syntax_on')
    syntax reset
    endif
    " Name of the color scheme
    let g:colors_name = 'iceberg'
    hi! ...
    hi! ...
    hi! ...
    

    View Slide

34. That’s all! Very easy?
    

    View Slide

35. View Slide

36. No... :(
    

    View Slide

37. There are still a lot of things to do
    * Cover whole highlighting groups
    * Consider coloration
    * Support 256 colors
    * Support various plugins
    * ...
    

    View Slide

38. Creating a color scheme is easy
    But, creating a lovely one
    is not easy
    

    View Slide

39. How to create
    your lovely
    color scheme?
    

    View Slide

40. Case study: iceberg.vim
    http://cocopon.github.io/iceberg.vim/
    

    View Slide

41. First: decide a concept
    ╭──────────────────────────────╮
    │ │
    │ I want a dark, blue one... │
    │ │
    ╰──────────────────────────────╯
    O o . ∩ ∩
    (ɾωɾ)
    

    View Slide

42. ICEBERG!!
    

    View Slide

43. Q: Why decide a concept first?
    

    View Slide

44. A: It will help you to decide coloration
    in various aspects
    I will explain about that later
    

    View Slide

45. Development flow
    ╭─────────────────────────────────╮
    │ Create a new file: iceberg.vim │
    ╰─────────────────────────────────╯
    │
    ┌───────────────────▶│
    │ ▼
    │ ╭─────────────────────────────────╮
    │ │ Add some definitions by :hi │
    │ ╰─────────────────────────────────╯
    │ │
    │ │
    │ ▼
    │ ╭─────────────────────────────────╮
    │ │ Save, :source % to apply them │
    │ ╰─────────────────────────────────╯
    │ │
    └────────────────────┘
    

    View Slide

46. Let’s start from here
    * Run your Vim without any color scheme
    * And then :hi clear to clear existing highlightings
    

    View Slide

47. Pick default bg/fg color
    Background
    #161821
    Foreground
    #c6c8d1
    

    View Slide

48. Apply default bg/fg color to groups
    Normal and EndOfBuffer is for them
    Normal
    EndOfBuffer
    

    View Slide

49. hi! Normal guibg=#161821 guifg=#c6c8d1
    hi! EndOfBuffer guibg=#161821 guifg=#c6c8d1
    

    View Slide

50. Before After
    

    View Slide

51. Pick representative colors
    #e27878 #e2a478 #b4be82 #89b8c2 #84a0c6 #a093c7
    It will help you to keep an ambience of the color scheme
    Default background color: #161821
    

    View Slide

52. BTW, highlighting has a link structure
    Use :hi link to link a group to another group
    :hi! link jsFunction Function
    ╭────────────╮ ╭──────────╮ ╭───────────────╮
    │ jsFunction │ ─▶ │ Function │ ─▶ ··· ─▶ │ guifg=#e2a478 │
    ╰────────────╯ ╰──────────╯ ╰───────────────╯
    

    View Slide

53. Top level groups are called “preferred group”
    (Filetype etc.) ┊ Minor ┊ Preferred
    ┊ ┊
    ╭─────────────╮ ┊ ╭─────────────╮ ┊ ╭────────────╮
    │ jsFunction │──────▶│ Function │──────▶│ Identifier │
    ╰─────────────╯ ┊ ╰─────────────╯ ┊ ╰────────────╯
    ┊ ┊
    ╭─────────────╮ ┊ ╭─────────────╮ ┊ ╭────────────╮
    │ ··· │──────▶│ String │─┬────▶│ Constant │
    │ ··· │──────▶│ Character │─┤ ┊ ╰────────────╯
    │ ··· │──────▶│ Number │─┤ ┊
    │ ··· │──────▶│ ┊ │ ┊ ┊
    ╰─────────────╯ ┊ ╰─────────────╯ ┊
    ┊ ┊
    ╭─────────────╮ ┊ ╭─────────────╮ ┊ ╭────────────╮
    │ ··· │──────▶│ Conditional │─┬────▶│ Statement │
    │ ··· │──────▶│ Repeat │─┤ ┊ ╰────────────╯
    │ ··· │──────▶│ Label │─┤ ┊
    │ ··· │──────▶│ ┊ │ ┊ ┊
    ╰───────── ───╯ ┊ ╰─────────────╯ ┊
    :help group-name to see the list of the groups
    

    View Slide

54. Apply colors to preferred groups
    ██ #e27878 ─▶ Error
    ██ #e2a478 ─▶ Function (minor group but frequently used)
    ██ #b4be82 ─▶ PreProc, Special
    ██ #89b8c2 ─▶ Identifier, Type
    ██ #84a0c6 ─▶ Statement
    ██ #a093c7 ─▶ Constant
    They make an ambience of your color scheme
    

    View Slide

55. Before
    Looks better!
    After
    

    View Slide

56. TIPS: Use HSB/HSL color model to choose colors
    GIMP, Inkscape, Photoshop, Illustrator ... some kind of graphics software has the feature
    It makes easy to create a harmonious palette
    

    View Slide

57. Change only hue to create initial colors
    Primary
    HSB(215°, 33%, 78%)
    Hue: 0° Hue: 30° Hue: 90° Hue: 180° Hue: 250°
    ─▶
    Fix saturation and brightness at first, and fine-tune them later
    

    View Slide

58. Q: Why create a color palette first?
    

    View Slide

59. A: It will prevent the number of colors
    from explodingly increasing
    

    View Slide

60. an Character ColorColumn Comment Concea
    tional Constant cssBraces cssClassName cssCla
    eudoClassId cssTagName CtrlPMatch CtrlPMode1 CtrlPM
    PrtCursor Cursor CursorColumn CursorIM Cursor
    rLineNr Debug Define Delimiter denite
    eMatchedChar DiffAdd diffAdded DiffChange DiffDe
    emoved DiffText Directory EasyMotionShade EasyMo
    otionTarget2First EasyMotionTarget2Second EndOfBuffer Error ErrorM
    tion Float FoldColumn Folded Functi
    tterAdd GitGutterChange GitGutterChangeDelete GitGutterDelete graphq
    qlOperator graphqlStructure helpHyperTextJump htmlArg htmlEn
    ag icebergALAccentRed Identifier Ignore Includ
    archKeyword Label lCursor LineNr Macro
    Paren ModeMsg MoreMsg NonText Normal
    r Operator phpVarSelector plug1 plug2
    ash plugMessage Pmenu PmenuSbar PmenuS
    Thumb PreCondit PreProc Question QuickF
    t Search SignColumn Special Specia
    alComment SpecialKey SpellBad SpellCap SpellL
    Rare Statement StatusLine StatusLineNC Status
    sLineTermNC StorageClass String Structure swiftI
    sticError SyntasticErrorSign SyntasticStyleError SyntasticStyleErrorSign Syntas
    sticStyleWarningSign SyntasticWarning SyntasticWarningSign TabLine TabLin
    neSel Tag Title Todo Type
    ef Underlined VertSplit vimContinue vimIsC
    l VisualNOS WarningMsg WildMenu xmlAtt
    dTag xmlNamespace xmlTag xmlTagName yamlKe
    There are huge amount of highlighting groups
    

    View Slide

61. So if you select a color for each group,
    a huge amount of similar colors
    will be generated
    It will cause many bad effects: increasing maintenance cost, breaking an ambiance, etc.
    

    View Slide

62. highlight-groups highlight-default
    These are the default highlighting groups. These groups are used by the
    'highlight' option default. Note that the highlighting depends on the value
    of 'background'. You can see the current settings with the ":highlight"
    command.
    hl-ColorColumn
    ColorColumn used for the columns set with 'colorcolumn'
    hl-Conceal
    Conceal placeholder characters substituted for concealed
    text (see 'conceallevel')
    hl-Cursor
    Cursor the character under the cursor
    hl-CursorIM
    CursorIM like Cursor, but used when in IME mode CursorIM
    hl-CursorColumn
    CursorColumn the screen column that the cursor is in when 'cursorcolumn' is
    set
    Define colors for default highlighting groups
    :help highlight-groups to see the list for them
    :help highlight-groups
    

    View Slide

63. Pick colors that is close in hue
    They will make the ambience stronger
    Background
    #161821
    Hue: 229°
    Foreground
    #c6c8d1
    Hue: 229°
    LineNr (bg)
    #1e2132
    Hue: 231°
    LineNr (fg)
    #444b71
    Hue: 231°
    StatusLine (bg)
    #818596
    Hue: 229°
    

    View Slide

64. Before After
    Ah...lovely... <3
    

    View Slide

65. Useful tools to cover all highlighting groups
    $VIMRUNTIME/syntax/hitest.vim colorswatch.vim
    

    View Slide

66. Create a color palette first,
    and then apply it to each groups
    It will help you to keep
    an ambience of the color scheme
    

    View Slide

67. Make your color scheme
    more lovely
    

    View Slide

68. Strategy
    Increase positive features and reduce negative features
    ╭───────────────────────────────────╮ ╭───────────────────────────────────╮
    │ Increasing positive features │ │ Reducing negative features │
    │ will increase fan of your scheme │ │ will decrease abandonment rate │
    │ ───────────────────────────────── │ │ ───────────────────────────────── │
    │ · Support various filetypes │ & │ · Support 256 colors │
    │ · Support famous plugins │ │ · Think about warning color │
    │ · Add some identities │ │ · Think about color vision │
    │ · Highlight only important groups │ │ │
    ╰───────────────────────────────────╯ ╰───────────────────────────────────╯
    

    View Slide

69. Increase positive features
    

    View Slide

70. Adjust coloration for various filetypes
    CSS XML TypeScript
    

    View Slide

71. CSS XML TypeScript
    Is this coloration cool?
    

    View Slide

72. Too much orange...?
    

    View Slide

73. ...more blue!
    Remember the concept
    

    View Slide

74. Use syntax-specific groups
    Syntax-specific groups are defined by each syntax files
    vimAbb
    vimAddress
    vimAugroup
    vimAugroupError
    vimAugroupKey
    vimAugroupSyncA
    vimAuHighlight
    vimAuSyntax
    vimAutoCmd
    vimAutoCmdOpt
    vimAutoCmdSfxList
    vimAutoCmdSpace
    vimAutoEvent
    vimAutoEventList
    vimAutoSet
    vimBehave
    xmlAttrib
    xmlAttribPunct
    xmlCdata
    xmlCdataCdata
    xmlCdataEnd
    xmlCdataStart
    xmlComment
    xmlCommentError
    xmlCommentPart
    xmlCommentStart
    xmlDocType
    xmlDocTypeDecl
    xmlDocTypeKeyword
    xmlEndTag
    xmlEntity
    xmlEntityPunct
    cssAnimationAttr
    cssAnimationProp
    cssAttr
    cssAttrComma
    cssAttributeSelector
    cssAttrRegion
    cssAuralAttr
    cssAuralProp
    cssBackgroundAttr
    cssBackgroundProp
    cssBorderAttr
    cssBorderProp
    cssBoxAttr
    cssBoxProp
    cssBraceError
    cssBraces
    $VIMRUNTIME/syntax/css.vim $VIMRUNTIME/syntax/vim.vim $VIMRUNTIME/syntax/xml.vim
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    $VIMRUNTIME/sy
    

    View Slide

75. Adjust coloration
    :hi! link is useful for adjusting coloration
    hi! link typescriptAjaxMethods Normal
    hi! link typescriptBraces Normal
    hi! link typescriptEndColons Normal
    hi! link typescriptGlobalObjects Statement
    hi! link typescriptHtmlElemProperties Normal
    hi! link typescriptIdentifier Statement
    hi! link typescriptMessage Normal
    hi! link typescriptNull Constant
    hi! link typescriptParens Normal
    

    View Slide

76. Result
    Before (much orange) After
    

    View Slide

77. TIPS: Looking for the unknown highlighting group
    How about my plugins (pgmnt.vim and colorswatch.vim)
    First, move cursor to the position that you want to know the highlight info
    

    View Slide

78. TIPS: Looking for the unknown highlighting group
    How about my plugins (pgmnt.vim and colorswatch.vim)
    And then execute :PgmntDevInspect
    

    View Slide

79. TIPS: Looking for the unknown highlighting group
    How about my plugins (pgmnt.vim and colorswatch.vim)
    It will print the link structure of the highlight group
    

    View Slide

80. Support famous plugins
    e.g. EasyMotion
    Before After
    

    View Slide

81. Support famous plugins
    e.g. lightline.vim
    Before After
    

    View Slide

82. Highlight only important groups
    “this” is important keyword in JavaScript but hard to find (much orange...)
    

    View Slide

83. Highlight only important groups
    Less orange, easy to find “this”
    

    View Slide

84. Add some identities
    ↓ CREVASSE
    

    View Slide

85. Add some identities
    ↑ CREVASSE
    

    View Slide

86. Reduce negative features
    

    View Slide

87. Support 256 (cterm) colors
    :hi! Normal ctermbg=234 ctermfg=252
    ctermbg is for background color, ctermfg is for foreground color
    

    View Slide

88. Support 256 (cterm) colors
    Use color chart to picking colors
    https://commons.wikimedia.org/
    wiki/File:Xterm_256color_chart.svg
    

    View Slide

89. Before After
    Support 256 (cterm) colors
    

    View Slide

90. Think about warning color
    Reddish colors are usually used as warning color
    Destructive options on iOS ISO 3864
    DANGER
    WARNING
    CAUTION
    https://developer.apple.com/ios/human-interface-guidelines/views/action-sheets/
    https://www.iso.org/obp/ui/#iso:std:iso:3864:-1:en
    

    View Slide

91. Iceberg refrains from using red colors
    Only uses them for error, warning, and other appropriate elements
    

    View Slide

92. Think about color visions
    Not everyone have the same color visions
    Normal Protanopia
    Dark red should not be used on dark background
    

    View Slide

93. Contrast colors by brightness, not hue
    Normal
    Red
    Normal
    Red
    Normal
    Red
    Normal
    Red
    ↓ ↓
    

    View Slide

94. And...
    

    View Slide

95. Learn from great forerunners
    

    View Slide

96. To make your color scheme more lovely,
    increase positive features and
    reduce negative features
    And... learn from great forerunners
    

    View Slide

97. How to find
    great forerunners?
    

    View Slide

98. Long ago: VIM Color Scheme Test
    https://web-beta.archive.org/web/*/http://vimcolorschemetest.googlecode.com/
    

    View Slide

99. Recently: vimcolors.com
    http://vimcolors.com/
    

    View Slide

100. But I have some frustrations...
     ╭──────────────────────────────────────────╮
     │ │
     │ What really I want to do is not │
     │ to see a huge amount of color schemes, │
     │ but finding the best one! │
     │ │
     ╰──────────────────────────────────────────╯
     O o . ∩ ∩
     (ɾωɾ)
     

     View Slide

101. So I developed a new web app
     

     View Slide

102. colorswat.ch
     http://colorswat.ch/vim/
     

     View Slide

103. Sorting by GitHub stars
     

     View Slide

104. More accurate preview
     vimcolors.com
     Tab/EOL characters, line number, cursor, cursorline, etc.
     colorswat.ch
     

     View Slide

105. References
     You can see the source of color schemes
     

     View Slide

106. References: Example
     onedark is based on FlatColor that is based on pencil
     onedark FlatColor pencil
     ◀┄┄ ◀┄┄
     

     View Slide

107. And... mobile friendly ;)
     

     View Slide

108. colorswat.ch is useful
     to find great forerunners
     

     View Slide

109. Inside colorswat.ch
     

     View Slide

110. System overview
     ┊ Server ┊ Client
     ┊ ┊
     Snapshot text ┊ ┊
     ╭─────────────────╮ (JSON) ┊ ╭───────────────╮ (HTML) ┊ ╭─────────────────╮
     ╭────────────╮ ┌ │ snapbuffer.vim │ ──────────────────▶ │ │ ───────▶ │ │
     │ │ │ ╰─────────────────╯ ┊ │ Server App │ ┊ │ Client App │
     │ Vim buffer │ ─┤ ┊ │ │ ┊ │ │
     │ │ │ ╭─────────────────╮ ┊ │ (Node.js) │ ┊ │ (React + Redux) │
     ╰────────────╯ └ │ colorswatch.vim │ ──────────────────▶ │ │ ◀──────▶ │ │
     ╰─────────────────╯ Highlighting data ┊ ╰───────────────╯ (JSON) ┊ ╰─────────────────╯
     (JSON) ┊ ┊
     ┊ ┊
     ┊ ┊
     

     View Slide

111. Taking a shot of the buffer
     Using snapbuffer.vim to extract accurate buffer information
     

     View Slide

112. Extracting highlighting data
     Using colorswatch.vim to extract all highlighting data
     

     View Slide

113. Q: So, how does colorswat.ch
     find color schemes?
     

     View Slide

114. A: My power of love
     

     View Slide

115. Source of color schemes
     Web/Twitter search Recommendation from users (colorswat.ch)
     

     View Slide

116. Roadmap
     * Diff mode support
     * Missing components: StatusLine, VirtSplit, etc.
     * Other editors support (Atom, VS Code, ...)
     * Re-implemented server in Go ʕ◔ϖ◔ʔ
     * Author page
     * ...
     

     View Slide

117. colorswat.ch is made
     with my love
     

     View Slide

118. Conclusion
     

     View Slide

119. To create your lovely color scheme,
     

     View Slide

120. Decide a concept
     

     View Slide

121. Remember the concept
     when in doubt
     

     View Slide

122. Learn from great forerunners
     

     View Slide

123. Visit colorswat.ch
     

     View Slide

124. There are as many color preferences

     as there are people
     

     View Slide

125. Enjoy creating your color scheme!
     

     View Slide

126. Creating Your Lovely
     Color Scheme
     Hiroki Kokubun (@cocopon), #vimconf2017
     

     View Slide

127. View Slide

128. Appendix
     

     View Slide

129. Use HSL color model in Vim script
     pgmnt.vim provides the feature
     ···
     let hue_red = 0
     let hue_orange = 25
     let hue_green = 70
     ···
     let g_blue = pgmnt#color#hsl(hue_blue, 0.37, 0.65)
     let g_green = pgmnt#color#hsl(hue_green, 0.32, 0.63)
     let g_lblue = pgmnt#color#hsl(hue_lblue, 0.32, 0.65)
     ···
     If you interested, see iceberg.vim/src/ for the usage case
     

     View Slide

130. Related function: synID()
     Get a syntax ID of the cursor
     ╭───────────────────────────────╮
     │ synID(line('.'), col('.'), 1) │ ─▶ syntax_id
     ╰───────────────────────────────╯
     

     View Slide

131. Related function: synIDattr()
     Get attributes of the syntax by ID
     ╭──────────────────────────────╮
     │ synIDattr(syntax_id, {what}) │ ─▶ syntax_attr
     ╰──────────────────────────────╯
     ╭──────────────────────────────╮
     │ synIDattr(syntax_id, 'name') │ ─▶ 'String'
     ╰──────────────────────────────╯
     ╭──────────────────────────────╮
     │ synIDattr(syntax_id, 'bg') │ ─▶ '#89b8c2'
     ╰──────────────────────────────╯
     ┊
     

     View Slide

132. Related function: synIDtrans()
     Follow linking groups
     ╭───────────────────────╮
     │ synIDtrans(syntax_id) │ ─▶ translated_syntax_id
     ╰───────────────────────╯
     

     View Slide