Dark theme.

materialsvirtuallab · Feb 10, 2025 · 7abb2e9 · 7abb2e9
1 parent f3cd76a
commit 7abb2e9
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 22 deletions.
diff --git a/app.py b/app.py
@@ -11,29 +11,56 @@
 app = Dash(
     "MatPES",
     use_pages=True,
-    external_stylesheets=[dbc.themes.ZEPHYR],
+    external_stylesheets=[dbc.themes.DARKLY],
     title="MatPES",
 )
 
 navbar = dbc.Navbar(
     dbc.Container(
         [
-            dbc.Row(
-                [
-                    dbc.Col(html.Img(src=dash.get_asset_url("logo.png"), alt="MatPES", id="header-logo")),
-                    dbc.Col(html.A(dbc.NavbarBrand("MatPES", className="ms-2"), href="/")),
-                ]
-                + [
-                    dbc.Col(dbc.NavLink(page["name"], className="ms-2 text-light", href=page["relative_path"]))
-                    for page in dash.page_registry.values()
-                    # ]
-                    # + [
-                    #     dbc.Col(dbc.Button("PBE", color="primary", className="me-1")),
-                    #     dbc.Col(dbc.Button("R2SCAN", color="secondary", className="me-1")),
-                ],
-                align="center",
-                className="g-0",
-                style={"textDecoration": "none"},
+            dbc.Nav(
+                dbc.Row(
+                    [
+                        dbc.Col(html.Img(src=dash.get_asset_url("logo.png"), alt="MatPES", id="header-logo")),
+                        dbc.Col(html.A(dbc.NavbarBrand("MatPES", className="ms-2"), href="/")),
+                    ]
+                    + [
+                        dbc.Col(
+                            dbc.NavLink(
+                                page["name"],
+                                className="ms-2 text-light navlink",
+                                href=page["relative_path"],
+                                active="exact",
+                            )
+                        )
+                        for page in dash.page_registry.values()
+                    ]
+                    + [
+                        dbc.Col(
+                            dbc.Button(
+                                "PBE",
+                                href="matpes_pbe.json.gz",
+                                external_link=True,
+                                color="success",
+                                className="ms-2",
+                                disabled=True,
+                            )
+                        ),
+                        dbc.Col(
+                            dbc.Button(
+                                "R2SCAN",
+                                href="matpes_r2scan.json.gz",
+                                external_link=True,
+                                color="warning",
+                                className="ms-2",
+                                disabled=True,
+                            )
+                        ),
+                    ],
+                    align="center",
+                    className="g-0",
+                    style={"textDecoration": "none"},
+                )
             )
         ]
     ),

diff --git a/assets/matpes.css b/assets/matpes.css
@@ -4,11 +4,14 @@
 
 .section-title {
     text-align: center;
-    color: #000;
 }
 
 #header-logo {
     height: 50px;
     display: block;
     float: right;
 }
+
+.navlink {
+    font-size: 1.2rem;
+}
diff --git a/pages/explorer.py b/pages/explorer.py
@@ -167,6 +167,7 @@ def display_data(
                             x="cohesive_energy_per_atom",
                             labels={"cohesive_energy_per_atom": "Cohesive Energy per Atom (eV/atom)"},
                             nbins=30,
+                            template="plotly_dark",
                         ),
                     ),
                     width=6,
@@ -179,12 +180,18 @@ def display_data(
                             x="formation_energy_per_atom",
                             labels={"formation_energy_per_atom": "Formation Energy per Atom (eV/atom)"},
                             nbins=30,
+                            template="plotly_dark",
                         ),
                     ),
                     width=6,
                 ),
-                dbc.Col(dcc.Graph(id="nsites_hist", figure=px.histogram(df, x="nsites")), width=6),
-                dbc.Col(dcc.Graph(id="nelements_hist", figure=px.histogram(df, x="nelements")), width=6),
+                dbc.Col(
+                    dcc.Graph(id="nsites_hist", figure=px.histogram(df, x="nsites", template="plotly_dark")), width=6
+                ),
+                dbc.Col(
+                    dcc.Graph(id="nelements_hist", figure=px.histogram(df, x="nelements", template="plotly_dark")),
+                    width=6,
+                ),
             ]
         )
     )

diff --git a/pages/utils.py b/pages/utils.py
@@ -193,9 +193,9 @@ def pt_heatmap(
         title=None,
         xaxis=dict(title=None),  # Maintain 1:1 aspect ratio
         yaxis=dict(title=None, scaleanchor="x", scaleratio=1.33, autorange="reversed"),
-        plot_bgcolor="white",
         width=1200,
         height=900,
+        template="plotly_dark",
     )
 
     if log:
@@ -207,7 +207,7 @@ def pt_heatmap(
                     tickmode="array",
                     tickvals=list(range(1, max_log + 1)),
                     ticktext=[f"1e{i}" for i in range(1, max_log + 1)],
-                    tickfont=dict(size=14, family="Arial", color="black"),
+                    tickfont=dict(size=14, family="Arial"),
                 )
             )
         )