I am building a Dash app using dash-bootstrap-components with the SUPERHERO dark theme. I want to stay with it. I'm having trouble styling the dcc.RangeSlider marks (labels), specifically those on the edges/sides.

Currently, they appear to be hardcoded to white (due to the theme), making them invisible or poorly aligned. I want to either change their color to black or hide them entirely.

What I've tried:

1. External CSS: I added the following to assets/style.css, but it has no effect (the inline styles seem to take precedence):

assets\style.css ( won't work that way)

.custom-slider .rc-slider-mark-text {
    color: black !important;
}

Inline Style: I tried defining the color within the marks dictionary in Python, but the edge labels still don't cooperate:

 marks={i: {'label': str(i), 'style': {'color': 'black'}} for i in range(2010, 2026, 2)},

Minimal Reproducible Example:

import dash
import dash_bootstrap_components as dbc
from dash import dcc, html
from dash.dependencies import Input, Output

# Use the SUPERHERO theme for that dark mode aesthetic
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.SUPERHERO])

app.layout = dbc.Container(
    [
        dbc.Row(
            dbc.Col(
                [  
                    dbc.Card(
                        dbc.CardBody([
                            dbc.Label("Select a date range:", className="lead text-white"),
                            dcc.RangeSlider(
                                id="years-slider",
                                min=2010,
                                max=2025,
                                step=1,
                                value=[2015, 2022],
                               
                                marks={i: {'label': str(i), 'style': {'color': 'white'}} 
                                       for i in range(2010, 2026, 2)},
                                className="mt-4 mb-5",
                            ),
                            html.Div(id="slider-output", className="text-warning fw-bold")
                        ]),
                        color="secondary", # 
                        className="shadow-lg p-3"
                    )
                ],
                width=10,
                lg=8,
                className="mx-auto mt-5 text-center",
            )
        ),
    ],
    fluid=True,
)

@app.callback(
    Output("slider-output", "children"),
    Input("years-slider", "value")
)
def update_output(value):
    return f"Date range: {value[0]} – {value[1]}"

if __name__ == "__main__":
    app.run(debug=True, port=2078)