tansparent_background = true breaks the bg of slant tab separators in bufferline.nvim

[coryshaw1]

Description

I'm trying to use akinsho/bufferline.nvim along with Catppuccin, but using bufferline.nvim's separator style of "slant". When using this and setting transparent_background and term_colors = true, the background of the bufferline tabs is odd and not transparent.

Neovim version

NVIM v0.10.0
Build type: Release
LuaJIT 2.1.1713773202

Terminal and multiplexer

kitty 0.25.2 and tmux 3.4

Catppuccin version / branch / rev

"catppuccin": { "branch": "main", "commit": "d97387aea8264f484bb5d5e74f2182a06c83e0d8" }

Steps to reproduce

Catppuccin opts

{
    transparent_background = true,
    background = {
      light = "latte",
      dark = "macchiato",
    },
    term_colors = true,
    integrations = {
      bufferline = true,
    },
  }
}

Bufferline opts

require("bufferline").setup {
  options = {
    diagnostics = "nvim_lsp",
    middle_mouse_command = "bdelete! %d",
    right_mouse_command = nil,
    numbers = "ordinal",
    separator_style = "slant",
  },
  highlights = require("catppuccin.groups.integrations.bufferline").get(),
}

Expected behavior

The ideal behavior would be for the background of the bufferline's entirety to be transparent with a slightly darker opaque background like the "With transparent_background disabled" screenshot below.

Actual behavior

With transparent_background enabled

With transparent_background disabled

Repro

No response

[command-z-z]

the same problem, have any plans to fix it?

[swit33]

I can confirm that this happens for me too.

[coryshaw1]

For a workaround, I was able to get it somewhat better looking by setting up the dim_inactive in opts and disabling bufferline in integrations. This does require you to manually set the highlights in bufferline if you haven't already.

Catppuccin opts:

dim_inactive = {
  enabled = true,
  shade = "dark",
  percentage = 0.15,
},
integrations = {
  bufferline = false,
},

bufferline opts:

highlights = require("catppuccin.groups.integrations.bufferline").get {
  styles = { "italic", "bold" },
},

I still think it would look better with the separator_bg across the entire bar and opaque, but this may be a limitation of the highlights. I would need someone else with more experience to confirm this.

[ilias777]

I think @coryshaw1 he's right. The slant option is not suitable for transparent background.

This is not an issue, this belongs to the discussion section.

You can still change the separator background like this:

local mocha = require('catppuccin.palettes').get_palette('mocha')
require('bufferline').setup({
    -- Bufferline configuration
    highlights = require('catppuccin.groups.integrations.bufferline').get({
        custom = {
            all = {
                separator = { fg = mocha.crust },
                separator_visible = { fg = mocha.crust },
                separator_selected = { fg = mocha.crust },
            },
        },
    }
}

and it looks like this:

[command-z-z]

Hello, I'm a rookie for bufferline's highlight_config_group. I'm confused about the bufferline's background color inconsistently for my catppucin theme(frappe). So how can I config them, I have been try some parameters(e.g., fill, background and etc) but it seemly doesn't work. Looking for your help!

[ilias777]

Sorry for my late replay. You can use two different ways to change the bufferLine highlighting groups.

1. In the BufferLine setup:

local mocha = require("catppuccin.palettes").get_palette "frappe"
bufferline.setup {
    highlights = require("catppuccin.groups.integrations.bufferline").get {
        styles = { "italic", "bold" },
        custom = {
            all = {
                fill = { bg = "#000000" },
            },
            mocha = {
                background = { fg = frappe.text },
            },
            latte = {
                background = { fg = "frappe.base" },
            },
        },
    },
}

2. In Catppuccin setup:

catppuccin.setup({
    custom_highlights = function(colors)
            BufferLineInfo = { fg = colors.surface0 },
            BufferLineInfoDiagnostic = { fg = colors.surface2 },
            BufferLineHint = { fg = colors.surface2 },
            BufferLineHintDiagnostic = { fg = colors.surface2 },
            BufferLineWarning = { fg = colors.surface2 },
            BufferLineWarningDiagnostic = { fg = colors.surface2 },
            BufferLineError = { fg = colors.surface2 },
            BufferLineErrorDiagnostic = { fg = colors.surface2 },
            BufferLineSeparator = { fg = colors.base, bg = colors.base },
            BufferLineSeparatorVisible = { fg = colors.base, bg = colors.base },
            BufferLineSeparatorSelected = { fg = colors.base, bg = colors.base },
            BufferLineTab = { fg = colors.overlay0 },
            BufferLineTabSeparator = { fg = colors.base, bg = colors.base },
            BufferLineTabSeparatorSelected = { fg = colors.base, bg = colors.base },
            BufferLineIndicatorSelected = { fg = colors.pink },
            BufferLineIndicator = { fg = colors.base },
})

I personal use the second way and change all the highlights I need in the Catppuccin setup.

To see what highlighting groups are available for Bufferline, you can use the :Telescope highlights command and search for BufferLine. Then you can play around with the colors.

I hope this can help.