tcbegley
commented
2 years ago Thanks for raising this, it seems to be an issue with the Bootswatch stylesheet itself. You can work around this for now with some custom CSS. Put something like the following snippet in your assets folder (e.g. assets/style.css)
.btn-close {
background: transparent
url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e")
center/1em auto no-repeat;
}EDIT - apologies, have seen your note about the problem with switching between multiple themes. In that case I think it might be necessary for this to be fixed upstream, or for you to download the stylesheets you want and edit them accordingly.
kiwifoxtrot
When using certain dbc templates, the Offcanvas component close button "X" is rendered in white, while the Offcanvas background is also white. For example, Flatly and Sandstone both render the "X" in white. I'm using the simple example from the Offcanvas documentation. Passing a CSS style color argument only changes the color of the text in the Offcanvas, but not the close button. The only workaround I've found so far is to change the background of the Offcanvas manually, but that creates issues when switching between a light and dark theme.
Is there a way to format the close button for the Offcanvas component?
offcanvas = html.Div( [ dbc.Offcanvas( html.P( "This is the content of the Offcanvas. " "Close it by clicking on the close button, or " "the backdrop." ), id="offcanvas", title="Title", is_open=False, close_button = True, scrollable = True, style={'color': 'red'} ) ])