refactor: migrate to Obsidian theme variables for consistent theming

Replace hardcoded color values and custom CSS variables with Obsidian's
built-in theme variables for backgrounds, borders, and interactive elements.
Removes unused isStreaming state and simplifies gradient background. Updates
view display text to "AI Agent".

Components/ChatAreaThought.svelte

@@ -31,7 +31,7 @@
   .ai-thought-bubble span {
     position: relative;
     z-index: 1;
-    background: var(--color-base-05);
+    background: var(--background-primary-alt);
     border-radius: 10px;
     padding: 0.75rem 1rem;
     font-size: 0.875rem;

Components/ChatWindow.svelte

@@ -27,7 +27,6 @@
   let userRequest = "";
   let hasNoApiKey = false;
   let isSubmitting = false;
-  let isStreaming = false;
   let editModeActive = false;
   let currentStreamingMessageId: string | null = null;
 
@@ -112,7 +111,6 @@
       onStreamingUpdate: (updatedConversation, streamingId, streaming) => {
         conversation = updatedConversation;
         currentStreamingMessageId = streamingId;
-        isStreaming = streaming;
       },
       onThoughtUpdate: (thought) => {
         currentThought = thought;
@@ -251,11 +249,11 @@
     grid-template-rows: var(--size-4-3) 1fr var(--size-4-3);
     grid-template-columns: var(--size-4-3) 1fr var(--size-4-2) auto var(--size-4-2) auto var(--size-4-3);
     border-radius: var(--modal-radius);
-    background-color: var(--color-base-00);
+    background-color: var(--background-primary);
   }
 
   #input-container.edit-mode {
-    border-color: var(--interactive-accent-blue);
+    border-color: var(--interactive-accent);
     transition: border-color 0.5s ease-out;
   }
 
@@ -281,8 +279,8 @@
   }
   
   #input-field.edit-mode:focus {
-    border-color: var(--interactive-accent-blue);
-    box-shadow: 0px 0px 3px 1px var(--interactive-accent-blue);
+    border-color: var(--interactive-accent);
+    box-shadow: 0px 0px 3px 1px var(--interactive-accent);
     transition: border-color 0.5s ease-out;
   }
 
@@ -322,11 +320,11 @@
   }
 
   #submit-button.edit-mode {
-    background-color: var(--interactive-accent-blue);
+    background-color: var(--interactive-accent);
   }
 
   #submit-button.edit-mode:not(:disabled):hover {
     cursor: pointer;
-    background-color: var(--interactive-accent-blue-hover);
+    background-color: var(--interactive-accent-hover);
   }
 </style>

Components/StreamingIndicator.svelte

@@ -31,7 +31,7 @@
   }
 
   .container.edit-mode {
-    --streaming-color: var(--interactive-accent-blue);
+    --streaming-color: var(--interactive-accent);
   }
 
   .📦 {

Components/TopBar.svelte

@@ -139,14 +139,14 @@
     display: grid;
     grid-template-rows: auto;
     grid-template-columns: var(--size-4-2) auto auto auto auto auto auto 1fr 0.1fr auto var(--size-4-2);
-    background-color: var(--color-base-30);
+    background-color: var(--background-modifier-hover);
     border-radius: var(--radius-m);
   }
 
   .top-bar-divider {
     width: var(--divider-width);
     height: auto;
-    background: var(--color-base-35);
+    background: var(--background-modifier-border-hover);
     margin: var(--size-4-2) var(--size-4-3);
   }
 

Modals/ConversationHistoryModalSvelte.svelte

@@ -130,7 +130,7 @@
       display: grid;
       grid-template-rows: auto;
       grid-template-columns: var(--size-4-2) auto 1fr var(--size-4-2) auto var(--size-4-2);
-      background-color: var(--color-base-30);
+      background-color: var(--background-modifier-hover);
       border-radius: var(--radius-m);
     }
 
@@ -171,11 +171,11 @@
     }
 
     .history-list-modal-clickable:hover {
-      background-color: var(--color-base-20);
+      background-color: var(--background-secondary);
     }
 
     .history-list-modal-clickable:active {
-      background-color: var(--color-base-25);
+      background-color: var(--background-secondary-alt);
     }
 
     .history-list-modal-date {
@@ -187,7 +187,7 @@
     .history-list-modal-separator {
       grid-row: 1;
       grid-column: 2;
-      color: var(--color-base-35);
+      color: var(--text-faint);
       margin: 0px var(--size-4-3);
     }
 
@@ -237,8 +237,8 @@
 
     .conversation-search-input {
       max-width: 200px;
-      background-color: var(--color-base-20);
-      border: 1px solid var(--color-base-35);
+      background-color: var(--background-secondary);
+      border: 1px solid var(--background-modifier-border);
       border-radius: var(--radius-s);
       padding: var(--size-2-1) var(--size-2-3);
       color: var(--text-normal);

Views/MainView.ts

@@ -18,7 +18,7 @@ export class MainView extends ItemView {
   }
 
   getDisplayText() {
-    return 'Main View';
+    return "AI Agent";
   }
 
   async onOpen() {

styles.css

@@ -3,29 +3,7 @@
 /* ============================== */
 
 .workspace-leaf-content[data-type="main-view"] .view-content {
-  background: linear-gradient(
-    to bottom,
-    var(--color-base-25),
-    var(--color-base-20),
-    var(--color-base-20),
-    var(--color-base-20),
-    var(--color-base-20),
-    var(--color-base-20),
-    var(--color-base-20),
-    var(--color-base-20),
-    var(--color-base-20),
-    var(--color-base-20),
-    var(--color-base-20),
-    var(--color-base-20),
-    var(--color-base-20),
-    var(--color-base-20),
-    var(--color-base-20),
-    var(--color-base-20),
-    var(--color-base-20),
-    var(--color-base-20),
-    var(--color-base-20),
-    var(--color-base-20)
-  );
+  background-color: var(--background-secondary);
   padding-top: 0;
 }
 
@@ -107,7 +85,7 @@
 }
 
 .top-bar-button:hover {
-  background-color: var(--color-base-35);
+  background-color: var(--background-modifier-hover);
 }
 
 .api-request-aborted {
@@ -119,48 +97,24 @@
   padding: var(--size-2-3);
 }
 
+
 /* ============================== */
 /* CSS Variables for Theming */
 /* ============================== */
 
+/* Custom variables mapped to Obsidian theme variables */
 body {
-  --interactive-accent-blue: color-mix(in srgb, var(--interactive-accent) 50%, var(--color-blue) 50%);
-  --interactive-accent-blue-hover: color-mix(in srgb, var(--interactive-accent-hover) 50%, var(--color-blue) 50%);
-}
-
-:root {
-  --code-background: #24292e;
-  --code-background-inline: rgba(27, 31, 35, 0.05);
-  --text-color: #24292e;
-  --text-muted: #586069;
-  --link-color: #0969da;
-  --blockquote-border: #d0d7de;
-  --table-border: #d0d7de;
-  --table-header-background: #f6f8fa;
-  --hr-color: #d0d7de;
-  --checkbox-bg: #fff;
-  --checkbox-border: #d1d5da;
-  --checkbox-checked-bg: #0969da;
-  --footnote-border: #d0d7de;
-}
-
-/* Dark mode variables */
-@media (prefers-color-scheme: dark) {
-  :root {
-    --code-background: #161b22;
-    --code-background-inline: rgba(240, 246, 252, 0.15);
-    --text-color: #c9d1d9;
-    --text-muted: #8b949e;
-    --link-color: #58a6ff;
-    --blockquote-border: #3b434b;
-    --table-border: #3b434b;
-    --table-header-background: #161b22;
-    --hr-color: #3b434b;
-    --checkbox-bg: #161b22;
-    --checkbox-border: #3b434b;
-    --checkbox-checked-bg: #58a6ff;
-    --footnote-border: #3b434b;
-  }
+  --code-background-inline: var(--code-background);
+  --text-color: var(--text-normal);
+  --link-color: var(--link-color);
+  --blockquote-border: var(--blockquote-border-color);
+  --table-border: var(--table-border-color);
+  --table-header-background: var(--table-header-background);
+  --hr-color: var(--hr-color);
+  --checkbox-bg: var(--background-primary);
+  --checkbox-border: var(--background-modifier-border);
+  --checkbox-checked-bg: var(--interactive-accent);
+  --footnote-border: var(--background-modifier-border);
 }
 
 /* ============================== */
@@ -172,8 +126,8 @@ body {
   display: block;
   overflow-x: auto;
   padding: 0.5em;
-  color: #e1e4e8;
-  background: #24292e;
+  color: var(--code-normal);
+  background: var(--code-background);
 }
 
 /* Language indicator */
@@ -191,8 +145,8 @@ body {
   right: 0;
   padding: 0.25em 0.5em;
   font-size: 0.75em;
-  color: #8b949e;
-  background: rgba(0, 0, 0, 0.3);
+  color: var(--text-faint);
+  background: var(--background-modifier-cover);
   border-radius: 0 0 0 0.25em;
 }
 
@@ -1304,8 +1258,8 @@ body {
 
 /* Mark/highlight */
 .message-bubble.assistant mark {
-  background-color: #fff3cd;
-  color: #000;
+  background-color: var(--text-highlight-bg);
+  color: var(--text-normal);
   padding: 0.2em;
   border-radius: 2px;
 }