Background of input elements in dark mode does not stand out

[zachies]

Thanks for making this library, it's incredibly helpful to have a consistent background when using Plotly figures! I'm currently noticing an issue where the background of input elements is the same as the container background when using dark backgrounds. If I remove the custom dash-bootstrap-templates CSS, the background of the input returns to white for contrast. In the image below, the input element is followed by a select element to show the difference.

from dash import Dash
import dash_bootstrap_components as dbc

dbc_css = ("https://cdn.jsdelivr.net/gh/AnnMarieW/[email protected]/dbc.min.css")
app = Dash(__name__, external_stylesheets=[dbc.themes.DARKLY, dbc_css])

app.layout = dbc.Container(
    [
        dbc.Input(placeholder="Test", class_name="mt-3"),
        dbc.Select(class_name="mt-3", options=[{
            "label": "Sample", "value": "sample"
        }]),
    ],
    fluid=True,
    class_name="dbc"
)

if __name__ == "__main__":
    app.run_server(debug=True)

It looks like line 64 of the stylesheet is causing this, is it intentional?

/* Use this classname for dcc.Input */
.dbc input:not([type=radio]):not([type=checkbox]) {
  color: var(--bs-body-color) !important;
  background-color: var(--bs-body-bg) !important;
}

[AnnMarieW]

Hi @zachies

Thanks for your kind words, and I'm glad you find this library useful. :slightly_smiling_face:

In some previous versions of the DARKLY theme, the inputs (including the dbc.Input and dbc.Select) were dark, so this was done to make the dcc.Input and dcc.Dropdown match the dbc input components. I think it has changed recently which complicates matters. The goal is to make this stylesheet work with all themes and all versions of Bootstrap 5 stylesheets.

I'll look into making additional releases that match various versions of the bootstrap stylesheets. In the meantime, I'd recommend copying the stylesheet and placing it in the assets folder rather than using it as an external stylesheet. Then you can customize it as you like.

If you are not using dcc components such as dcc.Input, dcc.Dropdown, or the DataTable, then you may not need to include this stylesheet at all. Alternately, it's possible to fine-tune where the class_name="dbc" is applied. Instead of using it on the outer container of the app layout, you could apply it only to certain dcc and DataTable components.

Note that the Bootstrap themed figure templates are independent - they will work even if you don't use the dbc.css stylesheet or any Bootstrap theme in your app.

[zachies]

Thanks! I tried using a local stylesheet and it seems to be working.