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 my homepage.html template with plotly_direct tag.
- The Dash app layout is inside a
Divwith darkmode on as you can see below with thebg-darkclassName.
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.htmltemplate extends abase.htmltemplate, 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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
{% plotly_header %}
<title>PEA Manager</title>
</head>
<body>
<div class="container">
{% include 'navbar.html' %}
{% block content %}
{% endblock %}
</div>
</body>
{% plotly_footer %}
</html>
- The beginning of my
homepage.htmltemplate is as follows:
{% extends 'base.html' %}
{% block content %}
<h1 style="color:white" >Portfolio performance comparison</h1>
<hr>
<div class="plotly-app">
{% 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 the plotly_direct tag, everything goes back to normal darkmode.
Is there a way to fix this without dropping plotly_direct?