- Notifications
You must be signed in to change notification settings - Fork133
Open
Description
Hi@delsim, thank you for the very nice package, I am a big fan of it.
On my django project, I have a Dash webapp (Dashboard) that I am serving on myhomepage.html
template withplotly_direct
tag.
- The Dash app layout is inside a
Div
with darkmode on as you can see below with thebg-dark
className.dash_app.py
app = DjangoDash('Dashboard', add_bootstrap_links=True, external_stylesheets=["static/assets/buttons.css"] ) app.layout = html.Div(children=[some_components], className="bg-dark")
- The
homepage.html
template extends abase.html
template,with dark mode on as you can see on the second line in the html tag.
base.html
<!DOCTYPE html><html lang="en" data-bs-theme="dark"><head>{% load static %}{% load plotly_dash %}<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>{% plotly_header %} <title>PEA Manager</title></head><body><div>{% include 'navbar.html' %}{% block content %}{% endblock %}</div></body>{% plotly_footer %}</html>
- The beginning of my
homepage.html
template is as follows:
{% extends 'base.html' %}{% block content %}<h1 >Portfolio performance comparison</h1><hr><div> {% load plotly_dash %} {% plotly_direct name="Dashboard" %}</div>...{% endblock %}
Problem: My h1 tag, hr tag, and everything I write outside the dash app had light mode on, despite having set the base template to be in darkmode. When I remove theplotly_direct
tag, everything goes back to normal darkmode.
Is there a way to fix this without droppingplotly_direct
?