feat: add toggle dark mode button on main Chat UI (#423)

* feat: add toggle dark mode button on main UI * docs: update docs
Cinnamon · Oct 22, 2024 · f2f192e · f2f192e
1 parent 764fe59
commit f2f192e
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 4 deletions.
diff --git a/docs/about.md b/docs/about.md
@@ -4,7 +4,7 @@ An open-source tool for chatting with your documents. Built with both end users
 developers in mind.
 
 [Source Code](https://github.com/Cinnamon/kotaemon) |
-[Live Demo](https://huggingface.co/spaces/lone17/kotaemon-app)
+[Live Demo](https://huggingface.co/spaces/cin-model/kotaemon-demo)
 
 [User Guide](https://cinnamon.github.io/kotaemon/) |
 [Developer Guide](https://cinnamon.github.io/kotaemon/development/) |

diff --git a/libs/ktem/ktem/assets/css/main.css b/libs/ktem/ktem/assets/css/main.css
@@ -102,7 +102,7 @@ button.selected {
 }
 
 mark {
-  background-color: #1496bb;
+  background-color: #10b981;
 }
 
 /* clpse */
@@ -157,6 +157,12 @@ mark {
   display: block !important;
 }
 
+#toggle-dark-button {
+  position: fixed;
+  top: 6px;
+  right: 40px;
+}
+
 .scrollable {
   overflow-y: auto;
 }

diff --git a/libs/ktem/ktem/assets/icons/dark_mode.svg b/libs/ktem/ktem/assets/icons/dark_mode.svg
diff --git a/libs/ktem/ktem/assets/md/about.md b/libs/ktem/ktem/assets/md/about.md
@@ -3,7 +3,7 @@
 An open-source tool for you to chat with your documents.
 
 [Source Code](https://github.com/Cinnamon/kotaemon) |
-[Demo](https://huggingface.co/spaces/lone17/kotaemon-app)
+[Demo](https://huggingface.co/spaces/cin-model/kotaemon-demo)
 
 [User Guide](https://cinnamon.github.io/kotaemon/) |
 [Developer Guide](https://cinnamon.github.io/kotaemon/development/) |

diff --git a/libs/ktem/ktem/pages/chat/control.py b/libs/ktem/ktem/pages/chat/control.py
@@ -38,7 +38,25 @@ def __init__(self, app):
         self.on_building_ui()
 
     def on_building_ui(self):
-        gr.Markdown("## Conversations")
+        with gr.Row():
+            gr.Markdown("## Conversations")
+            self.btn_toggle_dark_mode = gr.Button(
+                value="",
+                icon=f"{ASSETS_DIR}/dark_mode.svg",
+                scale=1,
+                size="sm",
+                elem_classes=["no-background", "body-text-color"],
+                elem_id="toggle-dark-button",
+            )
+            self.btn_toggle_dark_mode.click(
+                None,
+                js="""
+                () => {
+                    document.body.classList.toggle('dark');
+                }
+                """,
+            )
+
         self.conversation_id = gr.State(value="")
         self.conversation = gr.Dropdown(
             label="Chat sessions",