Use user theme in Obsidian for Khoj plugin styling (#825)

Makes the Khoj chat in the Obsidian plugin adapt better to the user theme, making it feel more seamless, and helps with dark mode compatibility

src/interface/obsidian/src/chat_view.ts

@@ -578,8 +578,7 @@ export class KhojChatView extends KhojPaneView {
         let editConversationTitleButtonEl = this.contentEl.createEl('button');
         setIcon(editConversationTitleButtonEl, "edit");
         editConversationTitleButtonEl.title = "Rename";
-        editConversationTitleButtonEl.classList.add("edit-title-button");
+        editConversationTitleButtonEl.classList.add("edit-title-button", "three-dot-menu-button-item", "clickable-icon");
-        editConversationTitleButtonEl.classList.add("three-dot-menu-button-item");
         if (selectedConversation) editConversationTitleButtonEl.classList.add("selected-conversation");
         editConversationTitleButtonEl.addEventListener('click', (event) => {
             event.stopPropagation();
@@ -607,7 +606,7 @@ export class KhojChatView extends KhojPaneView {
             let editConversationTitleSaveButtonEl = this.contentEl.createEl('button');
             conversationSessionTitleEl.replaceWith(editConversationTitleInputEl);
             editConversationTitleSaveButtonEl.innerHTML = "Save";
-            editConversationTitleSaveButtonEl.classList.add("three-dot-menu-button-item");
+            editConversationTitleSaveButtonEl.classList.add("three-dot-menu-button-item", "clickable-icon");
             if (selectedConversation) editConversationTitleSaveButtonEl.classList.add("selected-conversation");
             editConversationTitleSaveButtonEl.addEventListener('click', (event) => {
                 event.stopPropagation();
@@ -654,8 +653,7 @@ export class KhojChatView extends KhojPaneView {
         let deleteConversationButtonEl = this.contentEl.createEl('button');
         setIcon(deleteConversationButtonEl, "trash");
         deleteConversationButtonEl.title = "Delete";
-        deleteConversationButtonEl.classList.add("delete-conversation-button");
+        deleteConversationButtonEl.classList.add("delete-conversation-button", "three-dot-menu-button-item", "clickable-icon");
-        deleteConversationButtonEl.classList.add("three-dot-menu-button-item");
         if (selectedConversation) deleteConversationButtonEl.classList.add("selected-conversation");
         deleteConversationButtonEl.addEventListener('click', () => {
             // Ask for confirmation before deleting chat session

src/interface/obsidian/styles.css

@@ -74,14 +74,14 @@ If your plugin does not need CSS, delete this file.
     padding: 10px;
     position: relative;
     display: inline-block;
-    max-width: 80%;
     text-align: left;
     user-select: text;
+    color: var(--text-normal);
+    background-color: var(--active-bg);
 }
 /* color chat bubble by khoj blue */
 .khoj-chat-message-text.khoj {
-    color: var(--khoj-storm-grey);
+    border: 1px solid var(--khoj-sun);
-    background: var(--khoj-winter-sun);
     margin-left: auto;
     white-space: pre-line;
 }
@@ -92,14 +92,12 @@ If your plugin does not need CSS, delete this file.
     bottom: -2px;
     left: -7px;
     border: 10px solid transparent;
-    border-top-color: var(--khoj-winter-sun);
     border-bottom: 0;
     transform: rotate(-60deg);
 }
 /* color chat bubble by you dark grey */
 .khoj-chat-message-text.you {
-    color: var(--text-on-accent);
+    border: 1px solid var(--color-accent);
-    background: var(--khoj-storm-grey);
     margin-right: auto;
 }
 /* add right protrusion to you chat bubble */
@@ -109,7 +107,6 @@ If your plugin does not need CSS, delete this file.
     top: 91%;
     right: -2px;
     border: 10px solid transparent;
-    border-left-color: var(--khoj-storm-grey);
     border-right: 0;
     margin-top: -10px;
     transform: rotate(-60deg)
@@ -160,9 +157,8 @@ div.expanded.reference-section {
     margin: 10px 0;
 }
 button.reference-button {
-    background: var(--khoj-winter-sun);
-    color: var(--khoj-storm-grey);
     border: 1px solid var(--khoj-storm-grey);
+    background-color: transparent;
     border-radius: 5px;
     padding: 4px;
     font-size: 14px;
@@ -202,8 +198,7 @@ button.reference-button[aria-expanded="true"]::before {
     transform: rotate(90deg);
 }
 button.reference-expand-button {
-    background: var(--khoj-winter-sun);
+    background-color: transparent;
-    color: var(--khoj-storm-grey);
     border: 1px solid var(--khoj-storm-grey);
     border-radius: 5px;
     padding: 8px;
@@ -216,8 +211,8 @@ button.reference-expand-button {
     text-align: left;
 }
 button.reference-expand-button:hover {
-    background: var(--khoj-sun);
+    background: var(--background-modifier-active-hover);
-    color: var(--khoj-storm-grey);
+    color: var(--text-normal);
 }
 a.inline-chat-link {
     color: #475569;
@@ -229,15 +224,6 @@ a.inline-chat-link {
     border-bottom: 1px dotted var(--khoj-storm-grey);
 }
 
-button.copy-button {
-    display: block;
-    border-radius: 4px;
-    background-color: var(--color-base-00);
-}
-button.copy-button:hover {
-    background: #f5f5f5;
-    cursor: pointer;
-}
 img {
     max-width: 60%;
 }
@@ -270,19 +256,8 @@ div.conversation-session {
     grid-template-columns: 1fr auto;
 }
 
-.three-dot-menu {
-    display: block;
-    /* background: var(--background-color); */
-    /* border: 1px solid var(--main-text-color); */
-    border-radius: 5px;
-    /* position: relative; */
-}
-
-button.selected-conversation {
-    background: var(--khoj-winter-sun);
-}
 button.three-dot-menu-button-item {
-    color: var(--color-base-90);
+    color: var(--text-accent);
     border: none;
     box-shadow: none;
     font-size: 14px;
@@ -296,26 +271,7 @@ button.three-dot-menu-button-item {
 }
 
 button.three-dot-menu-button-item:hover {
-    background: var(--khoj-storm-grey);
+    background: var(--background-modifier-active-hover);
-    color: var(--khoj-winter-sun);
-}
-
-.three-dot-menu-button {
-    background: var(--khoj-winter-sun);
-    border: none;
-    box-shadow: none;
-    font-size: 14px;
-    font-weight: 300;
-    line-height: 1.5em;
-    cursor: pointer;
-    transition: background 0.3s ease-in-out;
-    font-family: var(--font-family);
-    border-radius: 4px;
-    right: 0;
-}
-
-.conversation-button:hover .three-dot-menu {
-    display: block;
 }
 
 div.conversation-menu {
@@ -325,13 +281,15 @@ div.conversation-menu {
     text-align: right;
     border-radius: 5px;
     padding: 5px;
+    display: grid;
+    grid-gap: 4px;
+    grid-auto-flow: column;
 }
 div.conversation-session:hover {
     transform: scale(1.03);
 }
 div.selected-conversation {
-    background: var(--khoj-winter-sun) !important;
+    background: var(--background-modifier-active-hover) !important;
-    color: var(--khoj-storm-grey) !important;
 }
 
 #khoj-chat-footer {
@@ -373,9 +331,8 @@ div.selected-conversation {
     position: relative;
 }
 #khoj-chat-send .lucide-arrow-up-circle {
-    background: var(--khoj-sun);
+    background: var(--background-modifier-active-hover);
     border-radius: 50%;
-    color: #222;
 }
 #khoj-chat-send .lucide-stop-circle {
     transform: rotateY(-180deg) rotateZ(-90deg);
@@ -488,7 +445,7 @@ div.khoj-logo {
 }
 
 .khoj-nav a {
-    color: var(--main-text-color);
+    color: var(--text-normal);
     text-decoration: none;
     font-size: small;
     font-weight: normal;
@@ -498,11 +455,11 @@ div.khoj-logo {
     margin: 0;
 }
 .khoj-nav a:hover {
-    background-color: var(--khoj-sun);
+    background-color: var(--background-modifier-active-hover);
     color: var(--main-text-color);
 }
 a.khoj-nav-selected {
-    background-color: var(--khoj-winter-sun);
+    background-color: var(--background-modifier-active-hover);
 }
 #similar-nav-icon-svg,
 .khoj-nav-icon {
@@ -521,9 +478,11 @@ span.khoj-nav-item-text {
 
 /* Copy button */
 button.copy-button {
+    display: block;
     border-radius: 4px;
-    background-color: var(--background-color);
+    color: var(--text-muted);
-    border: 1px solid var(--main-text-color);
+    background-color: transparent;
+    border: 1px solid var(--khoj-storm-grey);
     text-align: center;
     font-size: 16px;
     transition: all 0.5s;
@@ -542,18 +501,10 @@ img.copy-icon {
     width: 16px;
     height: 16px;
 }
-.you button.copy-button {
+
-    color: var(--text-on-accent);
+button.copy-button:hover {
-}
+    background-color: var(--background-modifier-active-hover);
-.khoj button.copy-button {
+    color: var(--text-normal);
-    color: var(--khoj-storm-grey);
-}
-.you button.copy-button:hover {
-    color: var(--khoj-storm-grey);
-    background: var(--text-on-accent);
-}
-.khoj button.copy-button:hover {
-    background: var(--text-on-accent);
 }
 
 /* Loading Spinner */

src/interface/obsidian/yarn.lock

@@ -215,6 +215,21 @@ esbuild-darwin-64@0.14.47:
   resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.14.47.tgz#e0da6c244f497192f951807f003f6a423ed23188"
   integrity sha512-R6oaW0y5/u6Eccti/TS6c/2c1xYTb1izwK3gajJwi4vIfNs1s8B1dQzI1UiC9T61YovOQVuePDcfqHLT3mUZJA==
 
+esbuild-android-64@0.14.47:
+  version "0.14.47"
+  resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.14.47.tgz#ef95b42c67bcf4268c869153fa3ad1466c4cea6b"
+  integrity sha512-R13Bd9+tqLVFndncMHssZrPWe6/0Kpv2/dt4aA69soX4PRxlzsVpCvoJeFE8sOEoeVEiBkI0myjlkDodXlHa0g==
+
+esbuild-android-arm64@0.14.47:
+  version "0.14.47"
+  resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.14.47.tgz#4ebd7ce9fb250b4695faa3ee46fd3b0754ecd9e6"
+  integrity sha512-OkwOjj7ts4lBp/TL6hdd8HftIzOy/pdtbrNA4+0oVWgGG64HrdVzAF5gxtJufAPOsEjkyh1oIYvKAUinKKQRSQ==
+
+esbuild-darwin-64@0.14.47:
+  version "0.14.47"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.14.47.tgz#e0da6c244f497192f951807f003f6a423ed23188"
+  integrity sha512-R6oaW0y5/u6Eccti/TS6c/2c1xYTb1izwK3gajJwi4vIfNs1s8B1dQzI1UiC9T61YovOQVuePDcfqHLT3mUZJA==
+
 esbuild-darwin-arm64@0.14.47:
   version "0.14.47"
   resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.47.tgz#cd40fd49a672fca581ed202834239dfe540a9028"