$30 off During Our Annual Pro Sale. View Details »

Creating Your Lovely Color Scheme

cocopon
November 04, 2017

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/

cocopon

November 04, 2017
Tweet

More Decks by cocopon

Other Decks in Technology

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