Making custom extension ToolBarButton's match "native" UI button color

JupyterLab
1

For some reason the custom ToolbarButton’s for the extension I am creating show up as a different color than the built in buttons. I’ve tried the following custom CSS, but the colors are not the same. How can I make them match?

.button-style {
    color: var(--jp-ui-font-color1) !important;
}

Screenshot 2024-07-11 at 01.11.31

2

How are you creating the custom button? Does it include an svg icon?

3 
 const button = new ToolbarButton({
          label: 'Button',
          onClick: () => {
             console.log("Test");
          }
        });
    
notebookPanel.toolbar.insertItem(1, 'button', button);