update darkmode switch design

rookiepeng · Jul 15, 2024 · ae48728 · ae48728
1 parent ac23c06
commit ae48728
Showing 1 changed file with 32 additions and 12 deletions.
diff --git a/app_layout.py b/app_layout.py
@@ -153,6 +153,38 @@
                         dbc.Col(
                             dbc.Row(
                                 [
+                                    dbc.Col(
+                                        dbc.InputGroup(
+                                            [
+                                                dbc.Label(
+                                                    html.I(
+                                                        className="bi bi-brightness-high-fill"
+                                                    ),
+                                                    className="me-2",
+                                                ),
+                                                dbc.Checklist(
+                                                    options=[
+                                                        {
+                                                            "label": html.I(
+                                                                className="bi bi-moon-stars-fill"
+                                                            ),
+                                                            "value": True,
+                                                        }
+                                                    ],
+                                                    value=[True],
+                                                    id="darkmode-switch",
+                                                    switch=True,
+                                                ),
+                                                dbc.Tooltip(
+                                                    "Toggle between light and dark background",
+                                                    id="darkmode-switch-tooltip",
+                                                    target="darkmode-switch",
+                                                    placement="top",
+                                                ),
+                                            ],
+                                        ),
+                                        width="auto",
+                                    ),
                                     dbc.Col(
                                         dbc.InputGroup(
                                             [
@@ -190,18 +222,6 @@
                                         ),
                                         width=3,
                                     ),
-                                    dbc.Col(
-                                        dbc.Checklist(
-                                            options=[
-                                                {"label": "Dark mode", "value": True}
-                                            ],
-                                            value=[True],
-                                            id="darkmode-switch",
-                                            switch=True,
-                                            style={"float": "right"},
-                                        ),
-                                        width=6,
-                                    ),
                                     dbc.Col(
                                         dcc.Graph(
                                             id="scatter3d",