Creating Your Lovely Color Scheme

by cocopon

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

About me

Slide 3

Slide 3 text

cocopon Developer/Designer

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

How about you? I love color schemes!

Slide 8

Slide 8 text

Jellybeans This is the first color scheme I met

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

And finally I created my own one

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Color scheme is very IMPORTANT

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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 ·······················

Slide 17

Slide 17 text

What is color scheme?

Slide 18

Slide 18 text

Before learning about color schemes,  we need to know about Syntax and Highlighting

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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 "\\\@

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Type :hi in your Vim!

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

So, color scheme is...

Slide 28

Slide 28 text

╭─────────────╮ ╭───────────────╮ │ 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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

How to create a color scheme?

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

...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

Slide 33

Slide 33 text

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! ...

Slide 34

Slide 34 text

That’s all! Very easy?

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No... :(

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

How to create your lovely color scheme?

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

ICEBERG!!

Slide 43

Slide 43 text

Q: Why decide a concept first?

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

Before After

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

Before Looks better! After

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

Q: Why create a color palette first?

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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.

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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°

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

Make your color scheme more lovely

Slide 68

Slide 68 text

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 │ │ │ ╰───────────────────────────────────╯ ╰───────────────────────────────────╯

Slide 69

Slide 69 text

Increase positive features

Slide 70

Slide 70 text

Adjust coloration for various filetypes CSS XML TypeScript

Slide 71

Slide 71 text

CSS XML TypeScript Is this coloration cool?

Slide 72

Slide 72 text

Too much orange...?

Slide 73

Slide 73 text

...more blue! Remember the concept

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

Result Before (much orange) After

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

Support famous plugins e.g. EasyMotion Before After

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

Add some identities ↓ CREVASSE

Slide 85

Slide 85 text

Add some identities ↑ CREVASSE

Slide 86

Slide 86 text

Reduce negative features

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

Before After Support 256 (cterm) colors

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

And...

Slide 95

Slide 95 text

Learn from great forerunners

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

How to find great forerunners?

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

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 . ∩ ∩ (ɾωɾ)

Slide 101

Slide 101 text

So I developed a new web app

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

Sorting by GitHub stars

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

References You can see the source of color schemes

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

And... mobile friendly ;)

Slide 108

Slide 108 text

colorswat.ch is useful to find great forerunners

Slide 109

Slide 109 text

Inside colorswat.ch

Slide 110

Slide 110 text

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) ┊ ┊ ┊ ┊ ┊ ┊

Slide 111

Slide 111 text

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

Slide 112

Slide 112 text

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

Slide 113

Slide 113 text

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

Slide 114

Slide 114 text

A: My power of love

Slide 115

Slide 115 text

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

Slide 116

Slide 116 text

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

Slide 117

Slide 117 text

colorswat.ch is made with my love

Slide 118

Slide 118 text

Conclusion

Slide 119

Slide 119 text

To create your lovely color scheme,

Slide 120

Slide 120 text

Decide a concept

Slide 121

Slide 121 text

Remember the concept when in doubt

Slide 122

Slide 122 text

Learn from great forerunners

Slide 123

Slide 123 text

Visit colorswat.ch

Slide 124

Slide 124 text

There are as many color preferences  as there are people

Slide 125

Slide 125 text

Enjoy creating your color scheme!

Slide 126

Slide 126 text

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

Slide 127

Slide 127 text

No content

Slide 128

Slide 128 text

Appendix

Slide 129

Slide 129 text

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

Slide 130

Slide 130 text

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

Slide 131

Slide 131 text

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' ╰──────────────────────────────╯ ┊

Slide 132

Slide 132 text

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