Merge pull request #26 from AnnMarieW/fix-paper_bgcolor

fixes figure background paper color

CHANGELOG.md

@@ -1,5 +1,9 @@
 
-## Oct 18, 20233
+## 1.1.2 Jan 14, 2024
+Fixed regression where figure background did not match theme's card color.  Closes issue #25
+
+
+## 1.1.1 Oct 18, 2023
 
 Fixed error in how colorways were created, resulting in a slight changed in the color of the green (Bootstrap Success) color.
 Thanks to @oliverb for PR #22

_create_templates.py

@@ -367,7 +367,11 @@ def build_plotly_template_from_bootstrap_css_text(css_text, color_mode):
 
     # Get background color
     plot_bgcolor = rule_props[":root"].get("--bs-body-bg", "#fff")
-    paper_bgcolor = rule_props[".card"].get("background-color", plot_bgcolor)
+    paper_bgcolor = rule_props[".card"].get("--bs-card-bg", plot_bgcolor)
+
+    # The morph theme's card background color does not look good as the paper_bgcolor in dark mode
+    if "Theme: morph" in css_text:
+        paper_bgcolor = plot_bgcolor
 
     blended = maybe_blend(plot_bgcolor, paper_bgcolor)
     if blended is None:

examples/demo_template_all.py

@@ -0,0 +1,89 @@
+"""
+A sample of 8 of the 26 Bootstrap themed Plotly figure templates available
+in the dash-bootstrap-template library
+
+"""
+import dash
+from dash import Dash, html, dcc, Input, Output, callback
+import dash_bootstrap_components as dbc
+from dash_bootstrap_templates import load_figure_template
+import plotly.express as px
+
+
+df = px.data.gapminder()
+
+themes = [
+    "bootstrap",
+    "cerulean",
+    "cosmo",
+    "flatly",
+    "journal",
+    "litera",
+    "lumen",
+    "lux",
+    "materia",
+    "minty",
+    "pulse",
+    "sandstone",
+    "simplex",
+    "sketchy",
+    "spacelab",
+    "united",
+    "yeti",
+    "cyborg",
+    "darkly",
+    "slate",
+    "solar",
+    "superhero",
+    "morph",
+    "quartz",
+    "vapor",
+    "zephyr",
+]
+
+dark_themes = [t+"_dark" for t in themes]
+all_templates = themes + dark_themes
+all_templates.sort()
+
+
+load_figure_template("all")
+
+figures = [
+    px.scatter(
+        df.query("year==2007"),
+        x="gdpPercap",
+        y="lifeExp",
+        size="pop",
+        color="continent",
+        log_x=True,
+        size_max=60,
+        template=template,
+        title="Gapminder 2007: '%s' theme" % template,
+    )
+    for template in all_templates
+]
+
+button = dbc.Button("Show all 52 Themes!", id="figure_templates_all-x-btn", n_clicks=0)
+
+app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
+
+app.layout = dbc.Container(
+        [button, dcc.Loading(html.Div(id="figure_templates_all-x-content", className="my-2"))]
+)
+
+
+
+@callback(
+    Output("figure_templates_all-x-content", "children"),
+    Input("figure_templates_all-x-btn", "n_clicks"),
+    prevent_initial_call=True,
+)
+def update(n):
+    if n > 0:
+        return [dcc.Graph(figure=fig, className="m-4") for fig in figures]
+    else:
+        return dash.no_update
+
+
+if __name__ == "__main__":
+    app.run_server(debug=True)