From ae48728dc6d2308ab29122f83daeefcfbb5325e9 Mon Sep 17 00:00:00 2001
From: Zhengyu Peng <rookiepeng@users.noreply.github.com>
Date: Mon, 15 Jul 2024 09:57:01 -0400
Subject: [PATCH] update darkmode switch design

---
 app_layout.py | 44 ++++++++++++++++++++++++++++++++------------
 1 file changed, 32 insertions(+), 12 deletions(-)

diff --git a/app_layout.py b/app_layout.py
index 669a658..98b7aa7 100644
--- 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",