Dash Mantine Components - Style API on DateRangePicker to change font color

Dash Python
1

Hi there!

I’m using Dash Mantine Styles API to make some customization to my DateRangePicker component.

Looking into the documentation at the Styles API section on the component page I have been able to change several elements of the component (see the ‘Customized DateRangePicker’ at the code below), but after a lot of trying and searching I haven’t be able to discover how to access the font color of the years, months and days.

As my dropdown background color is dark I need to change the font color to a brighter color.

Follows below a MWE and an image to clarify the issue.

Thanks in advance!

# Imports
from dash import Dash
import dash_mantine_components as dmc

# Creates the app.
app = Dash(__name__)

# Creates the layout.
app.layout = dmc.Container([

    # Standard DateRangePicker.
    dmc.DateRangePicker(
        placeholder="Standard DateRangePicker",
        style={'width': 250}
    ),
    
    # Add some space between the components.
    dmc.Space(h=30),

    # Customized DateRangePicker
    dmc.DateRangePicker(
        placeholder="Customized DateRangePicker",
        style={'width': 250},
        styles={
            'input': {
                'backgroundColor': '#002B36',
                'color': '#F7CE6F'
            },
            'dropdown': {
                'backgroundColor': '#002B36',
            },
            'calendarHeaderLevel': {
                'color': '#F0A904'
            }
        }
    )
])

# Runs from this script.
if __name__ == '__main__':
    
    # Runs the app locally.
    app.run_server(debug=True, port=8050)

Example
Example1256×742 43.5 KB