How to set the bg color for a custom component?

[simonmclean]

I have this function which I'd like to use as a custom component

local function lsp_statusline_errors()
  local count = #vim.diagnostic.get(0, { severity = vim.diagnostic.severity.ERROR })
  if (count > 0) then
    return count
  end
  return ''
end

And I'm setting it in sections.lualine_c like this

      {
        lsp_statusline_errors,
        { color = { bg = 'DiagnosticError' } }
      },

But no matter how I try to set the color, nothing seems to work. It always just shows the value returned by lsp_statusline_errors, without any coloring

[fitrh]

:help lualine-General-component-options

The color option accept the following values

• string as highlight group
• table in the form { fg = number|string, bg = number|string, gui = string }
• function that returns string or table as before

So if you want to define bg, you have to provide a hex string or a number

color = { bg = "#ff0000" }

If you want to use a specific highlight group, then the value must be a string

color = "DiagnosticError"

Each component have this structure

{
    function,
    color = {}, -- or string or number
    -- ...
}

[simonmclean]

I've tried a few different things, but none seem to work

      {
        lsp_statusline_errors,
        { color = 'DiagnosticError' }
      },

      {
        lsp_statusline_errors,
        { color = { bg = '#4287f5' } }
      },

      {
        lsp_statusline_errors,
        { color = { bg = '#4287f5', fg = '#4287f5', gui = '#4287f5' } }
      },

With all the above the result is the same - The value is displayed plainly with no color.

Here's my config if that helps

[fitrh]

color is a key in the component table, your component should look like this

{
    component_function,
    color = {},
    -- ...
}

[simonmclean]

That's working now. Thanks for the help!