Making fzf window more "prettier"

[RayZ0rr]

Sorry if this is a stupid question but I am trying to customize the way that fzf looks.

My goal is something similar to olimorris/onedarkpro.nvim#31 (which is for telescope but I want to see if I can achieve something similar to fzf.

My current one looks like this:

I have created a config file based on Conscious

local function hl(highlight, fg, bg, link)
  if fg == nil then fg = "none" end
  if bg == nil then bg = "none" end
  vim.api.nvim_set_hl(0, highlight, { fg = fg, bg = bg, link = link })
  if link ~= nil then
    vim.api.nvim_set_hl(0, highlight, { link = link })
  end
end

local colors = {
  fg = "#BBB6B6",
  bg = "#1F1F1F",
  black = "#151515",
  darkgrey = "#2E2E2E",
  grey = "#424242",
  darkwhite = "#E8E3E3",
  white = "#E8E3E3",
  red = "#B66467",
  yellow = "#D9BC8C",
  green = "#8C977D",
  teal = "#8AA6A2",
  blue = "#8DA3B9",
  purple = "#A988B0",
  ash = "#BBB6B6",
}

hl("FzfLuaNormal", colors.darkwhite, colors.bg)
hl("FzfLuaBorder", colors.red, colors.bg)
hl("FzfLuaCursorLine", colors.green, colors.bg)
hl("FzfLuaCursorLineNr", colors.yellow, colors.bg)
hl("FzfLuaSearch", colors.yellow, colors.green)
hl("FzfLuaTitle", colors.black, colors.red)
hl("FzfLuaScrollBorderEmpty", nil, colors.red)
hl("FzfLuaScrollBorderFull", nil, colors.red)
hl("FzfLuaScrollFloatEmpty", nil, colors.red)
hl("FzfLuaScrollFloatFull", nil, colors.red)
hl("FzfLuaHelpNormal", colors.darkgrey, colors.green)
hl("FzfLuaHelpBorder", colors.green, colors.red)

[ibhagwan]

@RayZ0rrm, the highlights you posted are the neovim part of the customization, while I'm not sure if you can get to the exact look and feel as the one you linked you can probably get close, read man fzf to understand the border and spacing options and set fzf's highlights via fzf_colors.

The only thing I think you cannot do rn is the zero spacing between the main fzf window and the preview window when using the default ("builtin") previwer, however, if you use bat previewer you can remove the preview border and set the bat colorscheme to something that would be close to what you wanted.

[RayZ0rr]

@ibhagwan thank you for the quick response as always. I'll look into fzf_colors. I see that you have set it up in your nvim config. But it seems to be dependent on your colorscheme. Let me look into it more.

[ibhagwan]

@ibhagwan thank you for the quick response as always. I'll look into fzf_colors. I see that you have set it up in your nvim config. But it seems to be dependent on your colorscheme. Let me look into it more.

You can always use fzf_cli_args to send flags directly to fzf without fzf-lua transforming any of them.

[ibhagwan]

@RayZ0rr, when you're done if you don't mind please share your customization, I'd love to see what you made of it :-)

[RayZ0rr]

@ibhagwan I don't think I was capable of reproducing telescope's design. I am currently using the one from my dots, specifically here

It looks like this in the terminal (wezterm)

And like this in nvim

The only problem is the help window with green background which seems not that clear

Except for that I really like the current look and it feels more refreshing to use fzf ❤️

[ibhagwan]

Looks great, ty @RayZ0rr :)

[0xcharly]

Here's the settings I use to achieve something similar to what's shown in the first comment. Hope this helps!

Relevant fzf-lua configuration

init.lua

      local opts = {
        winopts = {
          preview = {
            title_align = 'center',
            scrollbar = 'float',
          },
        },
        fzf_opts = {
          ['--ansi']         = '',
          ['--info']         = 'inline',
          ['--height']       = '100%',
          ['--layout']       = 'reverse',
          ['--border']       = 'none',
          ['--prompt']       = '❯',
          ['--pointer']      = '❯',
          ['--marker']       = '❯',
          ['--no-scrollbar'] = '',
        },
        fzf_colors = {
          ['fg'] = { 'fg', 'FzfLuaColorsFg' },
          ['fg+'] = { 'fg', 'FzfLuaColorsFgSel', 'reverse:-1' },
          ['bg'] = { 'fg', 'FzfLuaColorsBg' },
          ['bg+'] = { 'fg', 'FzfLuaColorsBgSel' },
          ['hl'] = { 'fg', 'FzfLuaColorsHl' },
          ['hl+'] = { 'fg', 'FzfLuaColorsHlSel', 'underline:reverse:-1' },
          ['info'] = { 'fg', 'FzfLuaColorsInfo' },
          ['prompt'] = { 'fg', 'FzfLuaColorsPrompt' },
          ['pointer'] = { 'fg', 'FzfLuaColorsPointer' },
          ['marker'] = { 'fg', 'FzfLuaColorsMarker' },
          ['spinner'] = { 'fg', 'FzfLuaColorsSpinner' },
          ['header'] = { 'fg', 'FzfLuaColorsHeader' },
        },
      }

      -- Disable icons, improve performances drastically.
      local noicon = {
        git_icons = false,
        file_icons = false,
        color_icons = false,
      }
      opts['btags'] = noicon
      opts['buffers'] = noicon
      opts['complete_file'] = noicon
      opts['diagnostics'] = noicon
      opts['files'] = noicon
      opts['finder'] = noicon
      opts['git'] = {
        files = noicon,
        status = noicon,
      }
      opts['grep'] = noicon
      opts['lsp'] = noicon
      opts['quickfix'] = noicon
      opts['tabs'] = noicon
      opts['tags'] = noicon

      require 'fzf-lua'.setup(opts)

Theme overrides (with Lush)

theme.lua

    FzfLuaNormal { Normal, bg = T.surface0 },
    FzfLuaBorder { fg = T.overlay0, bg = T.overlay0 },
    FzfLuaTitle { fg = T.surface0, bg = T.blue, gui = 'bold' },
    FzfLuaScrollFloatEmpty { bg = T.surface0 },
    -- fzf-lua is configured to only pass down the .fg attribute.
    FzfLuaColorsFg { fg = T.text0 },
    FzfLuaColorsFgSel { FzfLuaColorsFg },
    FzfLuaColorsBg { fg = T.overlay0 },
    FzfLuaColorsBgSel { FzfLuaColorsBg },
    FzfLuaColorsHl { fg = T.blue },
    FzfLuaColorsHlSel { FzfLuaColorsHl },
    FzfLuaColorsInfo { fg = T.subtext1 },
    FzfLuaColorsPrompt { fg = T.purple },
    FzfLuaColorsPointer { fg = T.blue },
    FzfLuaColorsMarker { fg = T.green },
    FzfLuaColorsSpinner { FzfLuaColorsInfo },
    FzfLuaColorsHeader { FzfLuaColorsInfo },

Screenshot

This achieves the following results (I'm still iterating on the theme, so colors are not final, but that should be irrelevant to configuration of fzf-lua):

[ibhagwan]

Looks amazing @0xcharly!

[ibhagwan]

@0xcharly, I’m thinking it might be worthwhile to add a new border style with the same “fat” characters so this would be made possible without having to use a custom colorscheme, something akin to the thicc style:

fzf-lua/lua/fzf-lua/defaults.lua

Lines 76 to 82 in 7aff4a3

	_borderchars = {
	["none"] = { " ", " ", " ", " ", " ", " ", " ", " " },
	["single"] = { "┌", "─", "┐", "│", "┘", "─", "└", "│" },
	["double"] = { "╔", "═", "╗", "║", "╝", "═", "╚", "║" },
	["rounded"] = { "╭", "─", "╮", "│", "╯", "─", "╰", "│" },
	["thicc"] = { "┏", "━", "┓", "┃", "┛", "━", "┗", "┃" },
	},

Would love to create a profile that demonstrates this style that can work with or without a custom colorscheme.

[ibhagwan]

ca37576

Update and try :FzfLua profiles and select borderless.

[0xcharly]

Thanks for this new profile! It's looking good out of the box. I only have 2 comments:

• I think PmenuThumb might be more appropriate for the scrollbar thumb. How about the following for default highlights (untested)?:

  vim.api.nvim_set_hl(0, 'ReverseDirectory', {
    link = 'Directory',
    reverse = true,
  })
  local hls = {
    scrollbar_e = 'PmenuSbar',
    scrollbar_f = 'PmenuThumb',
    title = 'ReverseDirectory',
    borders = 'FloatBorder',
  }

• There is an extra blank character at the beginning of the title box (see your screenshots and my attachment below)

  

This is, of course, only my personal opinion. Feel free to choose whatever works best for you.

[ibhagwan]

ty @0xcharly for the comments!

ReverseDirectory

Unlike the PmenuXXX highlights, IMHO Directory is not consistent between colorschemes and can vary greatly in color, while it looks great in your screenshot it will vary greatly for users.

I think PmenuThumb might be more appropriate for the scrollbar thumb

I tried it and it seems PmenuThumb is consitently brighter on all of my colorschemes which made it harder to determine which part is full vs empty, I somewhat like the cleaner look with equal background but not opposed to testing with a darker color or no color (see below) for empty.

Thankfully, it's very easy to set customization overrides, like this:

:lua require"fzf-lua".setup({"borderless",winopts={hl={scrollfloat_e="PmenuThumb"}}})

Try this for an empty background, also interesting:

:lua require"fzf-lua".setup({"borderless",winopts={hl={scrollfloat_e=""}}})

There is an extra blank character at the beginning of the title box (see your screenshots and my attachment below)

Fixed in 3115ed3.

One more thing, this part in your config:

     -- Disable icons, improve performances drastically.
      local noicon = {
        git_icons = false,
        file_icons = false,
        color_icons = false,
      }
      opts['btags'] = noicon
      opts['buffers'] = noicon
     ...

Can be reduced to:

  global_git_icons = false,
  global_file_icons = false,

[ibhagwan]

@0xcharly, I forgot to mention one more thing, the current profile defines the border as an array of empty strings which adds padding around the main terminal window, it's worth noting that if you set winopts.border = "none" you can drop the main window border completely, try it out and see which one you like more:

:lua require"fzf-lua".setup({"borderless",winopts={border="none"}})

Notice the zero-padding of the fzf terminal:

[ibhagwan]

@RayZ0rr, I was able to achieve something very similar to what you're after with the addition of the title to the main window, modified borderless theme below:

use the title function to add titles to other providers (git, etc)

local function title(str)
  return {
    winopts = {
      -- passthrough options to main window's `nvim_open_win`
      title = { { " " .. str .. " ", "IncSearch" } },
      title_pos = "center",
    }
  }
local hls = {
  bg  = "PmenuSbar",
  sel = "PmenuSel",
}
end
require("fzf-lua").setup {
  global_git_icons = false,
  global_file_icons = false,
  winopts = {
    border  = { " ", " ", " ", " ", " ", " ", " ", " " },
    preview = {
      scrollbar   = "float",
      scrolloff   = "-2",
      title_align = "center",
    },
    hl      = {
      title          = "IncSearch",
      border         = hls.bg,
      preview_border = hls.bg,
      scrollfloat_e  = "",
      scrollfloat_f  = hls.sel,
    },
  },
  fzf_colors = {
    ["gutter"] = { "bg", hls.bg },
    ["bg"]     = { "bg", hls.bg },
    ["bg+"]    = { "bg", hls.sel },
    ["fg+"]    = { "fg", hls.sel },
  },
  files = title("Find Files"),
  grep = title("Search"),
}

[0xcharly]

ty @0xcharly for the comments!

ReverseDirectory

Unlike the PmenuXXX highlights, IMHO Directory is not consistent between colorschemes and can vary greatly in color, while it looks great in your screenshot it will vary greatly for users.

Fair enough, I haven't tested with other themes, but was just looking for something that would make sense from a highlight naming convention point of view. I guess File would be even closer, but it also makes sense to take something that works with most themes out of the box.

I think PmenuThumb might be more appropriate for the scrollbar thumb

I tried it and it seems PmenuThumb is consitently brighter on all of my colorschemes which made it harder to determine which part is full vs empty, I somewhat like the cleaner look with equal background but not opposed to testing with a darker color or no color (see below) for empty.

Yeah, same comment as above, it makes sense to use something that looks good out of the box over something that is more semantically correct. Even though it's a bit of a shame, presets do need to work out of the box to be relevant.

Thankfully, it's very easy to set customization overrides, like this:

:lua require"fzf-lua".setup({"borderless",winopts={hl={scrollfloat_e="PmenuThumb"}}})

Try this for an empty background, also interesting:

:lua require"fzf-lua".setup({"borderless",winopts={hl={scrollfloat_e=""}}})

Yeah, thanks for the flexibility here. I'm going to keep my config as-is anyway, since I like where I landed. The only thing that I'll change is to use blanks for border characters.

Working great now:

There is an extra blank character at the beginning of the title box (see your screenshots and my attachment below)

Fixed in 3115ed3.

Thanks for the quick fix!

One more thing, this part in your config:

     -- Disable icons, improve performances drastically.
      local noicon = {
        git_icons = false,
        file_icons = false,
        color_icons = false,
      }
      opts['btags'] = noicon
      opts['buffers'] = noicon
     ...

Can be reduced to:

  global_git_icons = false,
  global_file_icons = false,

I had noticed that from the profile's configs and promptly updated mine to take advantage of that! Much cleaner.

[0xcharly]

@0xcharly, I forgot to mention one more thing, the current profile defines the border as an array of empty strings which adds padding around the main terminal window, it's worth noting that if you set winopts.border = "none" you can drop the main window border completely, try it out and see which one you like more:

I did try that to begin with, but I personally prefer the look of the window with the extra padding. Thanks for the pointer though, might be useful for someone else that lands on this issue.

[ibhagwan]

577f2a7

Ok final update to this (hopefully 😄), new "quickstart" profile borderless_full that hopefully answers the design question in the OP.

Left most of terminal fzf's colors as default, probably room for improvement via fzf_colors but I'll leave that for incoming PRs.

Tysm @0xcharly for opening my eyes to the new design, your final setup looks amazing!

[0xcharly]

My pleasure! And thank you for all the work on this issue, for all the commits you've sent since yesterday, and in general for bringing fzf-lua into the world: I'm a big fan of Telescope, but fzf-lua answers my need for performances.

[GreenSleeper]

I've noticed that in the leftside results window, if a result is too long, it eats the file icon. How can I make it always show up to get a more uniform look.

And can the preview title only shows filename not a long path?

[ibhagwan]

I've noticed that in the leftside results window, if a result is too long, it eats the file icon. How can I make it always show up to get a more uniform look.

That’s controlled by fzf (the binary, not Fzf-lua), I’m not aware of any option to keep the left side pinned, you can use :FzfLua files path_shorten=true will most likely help in this case.

And can the preview title only shows filename not a long path?

Currently no but it’s probably not a bad idea to shorten the path or use only the filename, I’ll add it to the feature list.

[ibhagwan]

30bb3a6

@GreenSleeper, def made more sense to have just the filename, this commit makes it the default (customizable).

[GreenSleeper]

30bb3a6

@GreenSleeper, def made more sense to have just the filename, this commit makes it the default (customizable).

I try to update, but why I'm I getting this error?

[ibhagwan]

I try to update, but why I'm I getting this error?

This error isn’t from Fzf-lua, looks like the lazy.nvim updater, I would try to uninstall and reinstall the plug-in, perhaps also open an issue with lazy if you’d like this solved for the future?

[0xcharly]

I can reproduce the issue on my end. It seems to be due to the vimdoc plugin generating another fzf-lua-table-of-contents vimdoc tag because of the recent addition of "Table of Contents" in the readme.

[0xcharly]

Oh, I see that our messages crossed: 6171eee

[ibhagwan]

Oh, I see that our messages crossed: 6171eee

Yap, should be ok now, I forgot the README to vimdoc plugin already generates a fzf-lua-table-of-contents tag.

@GreenSleeper update to b1ee200 and the message should disappear.

[0xcharly]

I can confirm that 6171eee fixed the issue. Thanks for the quick fix!

[ibhagwan]

I can confirm that 6171eee fixed the issue. Thanks for the quick fix!

Techincally you need b1ee200, post the vimdoc generator step :-)

[0xcharly]

Fair, I guess the CI was fast enough!