How to resize dmc.Switch with screen size?

Dash Python
1

I’m trying to resize the height of my switch when the user is resizing the page. For most elements, I can just set the height to vh (vertical height) and it works just fine. However, it doesn’t seem to work with the switches due to the fact that they have sizes. I’ve heard you can use font-size to determine the height but that doesn’t make it scalable (although I’m mostly likely missing something).

How can I get the height of the switch to shrink? Ideally i’d just like to set the height to 2vh etc but it doesn’t seem to work.

Here’s my code. As you can see I have my tabs at the top with the switch in line with them (essentially a dark mode/ light mode switch in the top right):

dbc.Row(id = "tabs_row", children = [
    dcc.Tabs(id="tabs_clicked", value='Home', children=self.create_tabs(),style={"width": "100%"}, parent_style = {"display":"inline-block", "width":"94%"}),
    dmc.MantineProvider(theme={"colors": {"myColor": ["#0D6EFD"]*10}},
        children=[
            dmc.Switch(id ="light_mode", offLabel=DashIconify(icon="radix-icons:sun", width=20),onLabel=DashIconify(icon="radix-icons:moon", width=20),size="xl", color = "myColor",checked=True,style = {"display":"inline-block","border":"none", "width":"5%", "padding-top": "0.5vh"}),]),
], style={"width": "100%", "background-color": self.card_color, "border-bottom": f"2vh solid background_color}"}),

Thanks! :slight_smile: