:gem: [Feature] New dark theme toggle button

components/buttons_binder.js

@@ -40,6 +40,8 @@ export class ButtonsBinder {
         clear_chat_history_button_binder.bind();
         let available_models_select_binder = new AvailableModelsSelectBinder();
         available_models_select_binder.bind();
+        let dark_theme_toggle_button_binder = new DarkThemeToggleButtonBinder();
+        dark_theme_toggle_button_binder.bind();
     }
 }
 
@@ -318,3 +320,36 @@ class AvailableModelsSelectBinder {
         });
     }
 }
+
+class DarkThemeToggleButtonBinder {
+    constructor() {
+        this.storage_key = "theme";
+        this.set_theme();
+    }
+    bind() {
+        const toggle_button = $("#dark-theme-toggle-button");
+        toggle_button.click(() => {
+            let theme = localStorage.getItem(this.storage_key);
+            if (theme === "dark") {
+                localStorage.setItem(this.storage_key, "light");
+            } else {
+                localStorage.setItem(this.storage_key, "dark");
+            }
+            this.set_theme();
+        });
+    }
+    set_theme() {
+        let theme = localStorage.getItem(this.storage_key);
+        if (theme === "dark") {
+            // load dark.css
+            $("#dark-theme").remove();
+            $("head").append(
+                '<link id="dark-theme" rel="stylesheet" href="css/dark.css">'
+            );
+        } else {
+            // remove dark.css
+            $("#dark-theme").remove();
+        }
+        console.log("set theme:", theme);
+    }
+}

css/dark.css

@@ -0,0 +1,33 @@
+body {
+    background-color: #0f0f0f;
+    color: #cccccc;
+}
+
+#top-toolbar {
+    background-color: #373737;
+}
+
+#chat-agents-sidebar,
+#chat-history-sidebar {
+    box-shadow: 0px 0px 8px 0px rgba(122, 122, 122, 0.4);
+    background-color: rgba(42, 42, 42, 0.6);
+    color: #cccccc;
+}
+
+#user-interactions {
+    box-shadow: 0px 2px 8px 0px rgba(122, 122, 122, 0.4);
+    background-color: #373737;
+}
+
+input,
+textarea,
+.form-select,
+.form-control {
+    background-color: #373737;
+    color: #cccccc;
+    border-color: #686868;
+}
+
+.fa {
+    color: #d2d2d2;
+}

index.html

@@ -48,6 +48,11 @@
                     <i class="fa fa-camera"></i>
                 </button>
             </div>
+            <div class="col">
+                <button id="dark-theme-toggle-button" class="btn">
+                    <i class="fa fa-lightbulb"></i>
+                </button>
+            </div>
         </div>
     </div>
     <div class="offcanvas offcanvas-end" data-bs-scroll="true" data-bs-backdrop="false" id="chat-agents-sidebar"