✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

External CSS Question

Hi, just started learning Dash/Plotly and have a question about linking external CSS. Before I write my question - yes, I have read the documentation at https://dash.plotly.com/external-resources, but I’m still having trouble.

I’m not new to Python at all, but I’m completely new to HTML/CSS and web dev in general. I went online to a CSS generator for a toggle switch to custom style one, and I saved the CSS file in an “assets” folder in the same directory as my app, and I put the CSS file in that folder.

In my code, I’ve saved “/assets/toggle_switch.css” to a variable “css_file” in my code, and added that to the constructor of the app.

Here is the CSS file:

Here is the code:

#!/usr/bin/env python3

import dash
import dash_core_components as dcc 
import dash_html_components as html 
import dash_bootstrap_components as dbc 
from dash.dependencies import Output, Input, State
import plotly
import plotly.graph_objs as go 

#css_files = {'href': '/assets/toggle_switch.css', 'rel': 'stylesheet'}
css_files = '/assets/toggle_switch.css'

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.DARKLY, css_files])

switches = dbc.Checklist(
            id="switches-input",
            className='onoffswitch-checkbox:checked + onoffswitch-label onoffswitch-switch'
        )

app.layout = dbc.Container(
	fluid=True,
	children=[
		switches
	]
)

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

So, being as I’m a CSS/HTML noob, what exactly am I supposed to change in the code to get the dbc.Checklist() component to take on the style of the toggle switch from the CSS file?

As it stands now, when I run the server it brings up the page like this:

Thanks in advance!