Color Picker to make custom Color Scheme for fzf

[minSW]

• Category
  • fzf binary
  • fzf-tmux script
  • Key bindings
  • Completion
  • Vim
  • Neovim
  • Etc.
• OS
  • Linux
  • Mac OS X
  • Windows
  • Windows Subsystem for Linux
  • Etc.
• Shell
  • bash
  • zsh
  • fish

Hi! I need some tools to make custom color scheme of fzf easily, and I found similar needs from issue #574 on fzf.vim project.

So we made Color Picker GUI based on go-astilectron.

It can make a custom color scheme and apply it to fzf automatically. (We have checked that it is running well on Mac and Ubuntu 18.04 but unfortunately not on Windows)

Here is the preview of GUI, and the link of repository.
User guide of this is on PR #1601 and we hope it can be merged.

• Pull Request (GUI color picker for fzf #1601)
• Assignee : @HongBeenKim @contestpark @minSW

And I implemented the Web Color Picker for demo and web use.

I think it is better to share it with other users too, so I suggest you to link it on READ.ME or wiki - color shemes page if it is possible.

Here is the preview of my page, and the link to demo.

• Page link : https://minsw.github.io/fzf-color-picker/

• Github link : https://github.com/minSW/fzf-color-picker

Please try them, and consider both suggestions.

Thank you!

[junegunn]

Hi, thanks for your interest in the project, and pardon me for the late response.

The color picker looks pretty cool, thanks for sharing. However, I do not think we should add the code to fzf binary since it's still a very niche feature, and I'd like to keep fzf as small as possible like any other Unix tools.

But I like the web version of it, let me add it to the wiki page. It can be somewhat more accessible to the users than #1601 since they don't need the latest version of fzf and they don't have to learn about the new option.

A couple of things you might want to know:

1. Since 0.18.0, you can configure gutter color as well. e.g. fzf --color gutter:-1. If not set, it defaults to bg+.

2. If you use fzf in Vim, fzf#wrap function can generate --color code for the current color scheme if g:fzf_colors is properly defined (See README-VIM.md). fzf#wrap returns a VimScript dictionary, which you would normally pass directly to fzf#run, and we can just examine the return value.

   :echo fzf#wrap()
   " {'options': '--color=bg+:#3F3F3F,bg:#4B4B4B,border:#6B6B6B,spinner:#98BC99,hl:#719872,fg:#D9D9D9,header:#719872,info:#BDBB72,pointer:#E12672,marker:#E17899,fg+:#D9D9D9,prompt:#98BEDE,hl+:#98BC99  --expect=ctrl-v,ctrl-x,ctrl-t', 'sink*': function('52'), 'down': '~40%', '_action': {'ctrl-v': 'vsplit', 'ctrl-x': 'split', 'ctrl-t': 'tab split'}}

   So we can take advantage of it to generate color options for various color schemes you have in Vim like so:

   " Generate `--color' option for all color schemes
   tabnew
   let schemes = map(globpath(&runtimepath, 'colors/*.vim', 0, 1), { _, path -> fnamemodify(path, ':t:r') })
   for scheme in schemes
     execute 'colo' scheme
     let opts = filter(split(fzf#wrap()['options']), { _, s -> !stridx(s, '--color') })
     if len(opts)
       call append(line('$'), ['# '.scheme, 'export FZF_DEFAULT_OPTS="$FZF_DEFAULT_OPTS '.opts[0].'"'])
     endif
   endfor
   normal! gg"_dd

   And we get something like this:

   # seoul256-light
   export FZF_DEFAULT_OPTS="$FZF_DEFAULT_OPTS --color=bg+:#D9D9D9,bg:#E1E1E1,border:#C8C8C8,spinner:#719899,hl:#719872,fg:#616161,header:#719872,info:#727100,pointer:#E12672,marker:#E17899,fg+:#616161,prompt:#0099BD,hl+:#719899"
   # seoul256
   export FZF_DEFAULT_OPTS="$FZF_DEFAULT_OPTS --color=bg+:#3F3F3F,bg:#4B4B4B,border:#6B6B6B,spinner:#98BC99,hl:#719872,fg:#D9D9D9,header:#719872,info:#BDBB72,pointer:#E12672,marker:#E17899,fg+:#D9D9D9,prompt:#98BEDE,hl+:#98BC99"
   # molokai
   export FZF_DEFAULT_OPTS="$FZF_DEFAULT_OPTS --color=bg+:#293739,bg:#1B1D1E,border:#808080,spinner:#E6DB74,hl:#7E8E91,fg:#F8F8F2,header:#7E8E91,info:#A6E22E,pointer:#A6E22E,marker:#F92672,fg+:#F8F8F2,prompt:#F92672,hl+:#F92672"
   # Tomorrow-Night-Blue
   export FZF_DEFAULT_OPTS="$FZF_DEFAULT_OPTS --color=bg+:#00346e,bg:#002451,spinner:#ffffff,hl:#7285b7,fg:#ffffff,header:#7285b7,info:#ebbbff,pointer:#ffffff,marker:#ffffff,fg+:#ffffff,prompt:#ffffff,hl+:#ffffff"
   # Tomorrow-Night-Bright
   export FZF_DEFAULT_OPTS="$FZF_DEFAULT_OPTS --color=bg+:#2a2a2a,bg:#000000,spinner:#eaeaea,hl:#969896,fg:#eaeaea,header:#969896,info:#c397d8,pointer:#eaeaea,marker:#eaeaea,fg+:#eaeaea,prompt:#eaeaea,hl+:#eaeaea"
   # Tomorrow-Night-Eighties
   export FZF_DEFAULT_OPTS="$FZF_DEFAULT_OPTS --color=bg+:#393939,bg:#2d2d2d,spinner:#cccccc,hl:#999999,fg:#cccccc,header:#999999,info:#cc99cc,pointer:#cccccc,marker:#cccccc,fg+:#cccccc,prompt:#cccccc,hl+:#cccccc"
   # Tomorrow-Night
   export FZF_DEFAULT_OPTS="$FZF_DEFAULT_OPTS --color=bg+:#3a3a3a,bg:#303030,spinner:#c5c8c6,hl:#969896,fg:#c5c8c6,header:#969896,info:#b294bb,pointer:#c5c8c6,marker:#c5c8c6,fg+:#c5c8c6,prompt:#c5c8c6,hl+:#c5c8c6"
   # Tomorrow
   export FZF_DEFAULT_OPTS="$FZF_DEFAULT_OPTS --color=bg+:#efefef,bg:#fafafa,spinner:#4d4d4c,hl:#8e908c,fg:#4d4d4c,header:#8e908c,info:#8959a8,pointer:#4d4d4c,marker:#4d4d4c,fg+:#4d4d4c,prompt:#4d4d4c,hl+:#4d4d4c"
   # gruvbox
   export FZF_DEFAULT_OPTS="$FZF_DEFAULT_OPTS --color=bg+:#ebdbb2,bg:#fbf1c7,spinner:#9d0006,hl:#928374,fg:#3c3836,header:#928374,info:#427b58,pointer:#9d0006,marker:#9d0006,fg+:#3c3836,prompt:#9d0006,hl+:#9d0006"
   # hydrangea
   export FZF_DEFAULT_OPTS="$FZF_DEFAULT_OPTS --color=bg+:#2a303b,bg:#1e222c,spinner:#537dd5,hl:#586374,fg:#c3d5ec,header:#586374,info:#c398fe,pointer:#537dd5,marker:#537dd5,fg+:#c3d5ec,prompt:#537dd5,hl+:#537dd5"
   # deep-space
   export FZF_DEFAULT_OPTS="$FZF_DEFAULT_OPTS --color=bg+:#232936,bg:#1b202a,spinner:#608cc3,hl:#51617d,fg:#9aa7bd,header:#51617d,info:#56adb7,pointer:#608cc3,marker:#608cc3,fg+:#9aa7bd,prompt:#608cc3,hl+:#608cc3"
   # despacio
   export FZF_DEFAULT_OPTS="$FZF_DEFAULT_OPTS --color=bg+:#3a3a3a,bg:#303030,spinner:#af875f,hl:#626262,fg:#ffffdf,header:#626262,info:#d7875f,pointer:#af875f,marker:#af875f,fg+:#ffffdf,prompt:#875f5f,hl+:#af875f"
   # iceberg
   export FZF_DEFAULT_OPTS="$FZF_DEFAULT_OPTS --color=bg+:#1e2132,bg:#161821,spinner:#84a0c6,hl:#6b7089,fg:#c6c8d1,header:#6b7089,info:#b4be82,pointer:#84a0c6,marker:#84a0c6,fg+:#c6c8d1,prompt:#84a0c6,hl+:#84a0c6"
   # hybrid
   export FZF_DEFAULT_OPTS="$FZF_DEFAULT_OPTS --color=bg+:#282a2e,bg:#1d1f21,spinner:#81a2be,hl:#707880,fg:#c5c8c6,header:#707880,info:#8abeb7,pointer:#81a2be,marker:#81a2be,fg+:#c5c8c6,prompt:#81a2be,hl+:#81a2be"
   # snow
   export FZF_DEFAULT_OPTS="$FZF_DEFAULT_OPTS --color=bg+:#363a3e,bg:#2c2d30,spinner:#7f9d77,hl:#8c95a0,fg:#afb7c0,header:#8c95a0,info:#5da19f,pointer:#7f9d77,marker:#7f9d77,fg+:#afb7c0,prompt:#7f9d77,hl+:#7f9d77"
   # stellarized
   export FZF_DEFAULT_OPTS="$FZF_DEFAULT_OPTS --color=bg+:#2d3243,bg:#222532,spinner:#5c9a61,hl:#9d8875,fg:#bead9d,header:#9d8875,info:#b178b5,pointer:#5c9a61,marker:#5c9a61,fg+:#bead9d,prompt:#5c9a61,hl+:#5c9a61"
   # nord
   export FZF_DEFAULT_OPTS="$FZF_DEFAULT_OPTS --color=bg+:#3B4252,bg:#2E3440,spinner:#81A1C1,hl:#616E88,fg:#D8DEE9,header:#616E88,info:#81A1C1,pointer:#81A1C1,marker:#81A1C1,fg+:#D8DEE9,prompt:#81A1C1,hl+:#81A1C1"

   It's a bit hacky, but you get the idea.

Anyway, thanks again for your contribution!