Borderless highlights

[kristijanhusak]

Is there a way to achieve the same "borderless" look like for Telescope (section in https://github.com/folke/tokyonight.nvim#-overriding-colors--highlight-groups).

This is how my Telescope looks:

And this is what I managed to set up with Snacks:

Since input prompt window is inside the box window, it cannot override its own borders all around, so the whole left side gets the prompt border background.

This is what I override:

      hl.SnacksPicker = {
        bg = c.bg_dark,
        fg = c.fg_dark,
      }
      hl.SnacksPickerBorder = {
        bg = c.bg_dark,
        fg = c.bg_dark,
      }
      hl.SnacksPickerInput = {
        bg = prompt,
      }
      hl.SnacksPickerInputTitle = {
        bg = prompt,
      }
      hl.SnacksPickerBoxTitle = {
        bg = prompt,
        fg = prompt
      }
      hl.SnacksPickerBoxBorder = {
        bg = prompt,
        fg = prompt
      }
      hl.SnacksPickerPreviewTitle = {
        bg = c.bg_dark,
        fg = c.bg_dark,
      }
      hl.SnacksPickerInputBorder = {
        bg = prompt,
      }

[kristijanhusak]

I settled on this, looks good enough.

      hl.SnacksPicker = {
        bg = c.bg_dark,
        fg = c.fg_dark,
      }
      hl.SnacksPickerBorder = {
        bg = c.bg_dark,
        fg = c.bg_dark,
      }
      hl.SnacksPickerInputBorder = {
        bg = c.bg_dark,
        fg = c.bg_dark,
      }

[tigion]

My config with picker.layout.preset = 'telescope' for this:

      -- darker bg_float variants
      local bg_float2 = '#14151f'
      local bg_float3 = '#0a0b10'

      -- Telescope
      hl.TelescopeNormal = { fg = c.fg, bg = bg_float2 }
      hl.TelescopeTitle = { fg = bg_float2, bg = c.blue }
      hl.TelescopeBorder = { fg = bg_float2, bg = bg_float2 }
      hl.TelescopePromptNormal = { fg = c.fg, bg = c.bg_float }
      hl.TelescopePromptTitle = { fg = c.bg_float, bg = c.orange }
      hl.TelescopePromptBorder = { fg = c.bg_float, bg = c.bg_float }
      hl.TelescopePreviewNormal = { fg = c.fg, bg = bg_float3 }
      hl.TelescopePreviewBorder = { fg = bg_float3, bg = bg_float3 }

      -- Snacks.picker
      hl.SnacksPicker = { fg = c.fg, bg = bg_float2 }
      hl.SnacksPickerTitle = { fg = bg_float2, bg = c.blue }
      hl.SnacksPickerBorder = { fg = bg_float2, bg = bg_float2 }
      hl.SnacksPickerInput = { fg = c.fg, bg = c.bg_float }
      hl.SnacksPickerInputTitle = { fg = c.bg_float, bg = c.orange }
      hl.SnacksPickerInputBorder = { fg = c.bg_float, bg = c.bg_float }
      hl.SnacksPickerPreview = { fg = c.fg, bg = bg_float3 }
      hl.SnacksPickerPreviewBorder = { fg = bg_float3, bg = bg_float3 }

Snacks.picker:

Telescope:

[tigion]

Or use a own modified telescope layout with border = 'none' in the root box:

  opts {
    picker {
      layout = 'my_telescope_top'
      layouts {
        my_telescope_top = {
          layout = {
            box = 'horizontal',
            backdrop = false,
            width = 0.8,
            height = 0.9,
            border = 'none',
            {
              box = 'vertical',
              { win = 'input', height = 1, border = 'rounded', title = '{title} {live} {flags}', title_pos = 'center' },
              { win = 'list', title = ' Results ', title_pos = 'center', border = 'rounded' },
            },
            {
              win = 'preview',
              title = '{preview:Preview}',
              width = 0.45,
              border = 'rounded',
              title_pos = 'center',
            },
          },
        },
      },
    },
  },

[kristijanhusak]

Nice! This allows setting up the same colors as for telescope. Thanks!