From eeceda00e10815c10de9b2280e1b6975e3cad9a5 Mon Sep 17 00:00:00 2001 From: Andrew Beal Date: Fri, 17 Oct 2025 23:51:23 +0100 Subject: [PATCH] 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 | 2 +- Components/ChatWindow.svelte | 14 ++-- Components/StreamingIndicator.svelte | 2 +- Components/TopBar.svelte | 4 +- Modals/ConversationHistoryModalSvelte.svelte | 12 +-- Views/MainView.ts | 2 +- styles.css | 88 +++++--------------- 7 files changed, 38 insertions(+), 86 deletions(-) diff --git a/Components/ChatAreaThought.svelte b/Components/ChatAreaThought.svelte index 548525a..49a7af6 100644 --- a/Components/ChatAreaThought.svelte +++ b/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; diff --git a/Components/ChatWindow.svelte b/Components/ChatWindow.svelte index 0bca172..ed7e426 100644 --- a/Components/ChatWindow.svelte +++ b/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); } \ No newline at end of file diff --git a/Components/StreamingIndicator.svelte b/Components/StreamingIndicator.svelte index ede7ecf..f160ce9 100644 --- a/Components/StreamingIndicator.svelte +++ b/Components/StreamingIndicator.svelte @@ -31,7 +31,7 @@ } .container.edit-mode { - --streaming-color: var(--interactive-accent-blue); + --streaming-color: var(--interactive-accent); } .📦 { diff --git a/Components/TopBar.svelte b/Components/TopBar.svelte index 462bb2b..4e103fd 100644 --- a/Components/TopBar.svelte +++ b/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); } diff --git a/Modals/ConversationHistoryModalSvelte.svelte b/Modals/ConversationHistoryModalSvelte.svelte index 5c09819..723d18f 100644 --- a/Modals/ConversationHistoryModalSvelte.svelte +++ b/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); diff --git a/Views/MainView.ts b/Views/MainView.ts index 89fc6fe..0de4491 100644 --- a/Views/MainView.ts +++ b/Views/MainView.ts @@ -18,7 +18,7 @@ export class MainView extends ItemView { } getDisplayText() { - return 'Main View'; + return "AI Agent"; } async onOpen() { diff --git a/styles.css b/styles.css index 81e649b..272af8a 100644 --- a/styles.css +++ b/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; }