:zap: [Enhance] Switch dark mode with darkreader.js

components/buttons_binder.js

@@ -365,18 +365,14 @@ class DarkThemeToggleButtonBinder {
             }
             this.set_theme();
         });
+        DarkReader.setFetchMethod(window.fetch);
     }
     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">'
-            );
+            DarkReader.enable();
         } else {
-            // remove dark.css
-            $("#dark-theme").remove();
+            DarkReader.disable();
         }
         console.log("set theme:", theme);
     }

css/dark.css

@@ -1,53 +0,0 @@
-body {
-    background-color: #161616;
-    color: #cccccc;
-}
-
-#top-toolbar {
-    background-color: #161616;
-}
-
-#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: #242424;
-}
-
-.message-user {
-    /* background-image: linear-gradient(-45deg, #f6f8fe, #e9efff); */
-    background-color: #3a4946;
-}
-.message-user .role-displayer {
-    color: #5facfa;
-}
-
-.message-assistant {
-    /* background-image: linear-gradient(-45deg, #f4f6fe, #ecedff); */
-    background-color: #3d3d50;
-}
-.message-assistant .role-displayer {
-    color: #dc68ff;
-}
-
-.content-displayer {
-    color: #cccccc;
-}
-
-input,
-textarea,
-.form-select,
-.form-control {
-    background-color: #2e2e2e;
-    color: #cccccc;
-    border-color: #686868;
-}
-
-.fa {
-    color: #d2d2d2;
-}

index.html

@@ -20,6 +20,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment-with-locales.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/dexie/3.2.4/dexie.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/darkreader/4.9.75/darkreader.min.js"></script>
     <script src="./networks/live.js"></script>
     <link rel="stylesheet" href="./css/default.css" />
 </head>