From 88c91e22b00753060c4200bbe10d7638f0dbd6b2 Mon Sep 17 00:00:00 2001
From: Till-JS <101404291+Till-JS@users.noreply.github.com>
Date: Sat, 13 Dec 2025 14:40:16 +0100
Subject: [PATCH] fix(ui): replace hardcoded colors with theme variables
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- InputBar: use --color-primary, --color-surface, --color-border for
  focus ring, backgrounds, and syntax highlighting
- PillToolbarButton: active state uses --color-primary
- PillViewSwitcher: sliding indicator and active text use theme colors
- PillTimeRangeSelector: all glass effects and active states themed
- CalendarToolbar: FAB active state uses theme colors
- CalendarToolbarContent: removed hardcoded primaryColor prop
- DateStrip: replaced all #3b82f6 with theme variables

All UI components now automatically adapt to the selected theme
(Ocean, Sunset, Forest, etc.)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../calendar/CalendarToolbar.svelte           |  38 ++----
 .../calendar/CalendarToolbarContent.svelte    |  16 +--
 .../lib/components/calendar/DateStrip.svelte  |  84 ++++++++----
 .../navigation/PillTimeRangeSelector.svelte   | 124 ++++--------------
 .../src/navigation/PillToolbarButton.svelte   |  16 +--
 .../src/navigation/PillViewSwitcher.svelte    |  45 ++-----
 .../shared-ui/src/quick-input/InputBar.svelte |  64 ++++-----
 7 files changed, 140 insertions(+), 247 deletions(-)

diff --git a/apps/calendar/apps/web/src/lib/components/calendar/CalendarToolbar.svelte b/apps/calendar/apps/web/src/lib/components/calendar/CalendarToolbar.svelte
index 5ff5d7412..4799fa658 100644
--- a/apps/calendar/apps/web/src/lib/components/calendar/CalendarToolbar.svelte
+++ b/apps/calendar/apps/web/src/lib/components/calendar/CalendarToolbar.svelte
@@ -146,11 +146,11 @@
 		align-items: center;
 		gap: 0.5rem;
 		padding: 0.5rem 1rem;
-		background: rgba(255, 255, 255, 0.92);
+		background: hsl(var(--color-surface) / 0.92);
 		backdrop-filter: blur(16px);
 		-webkit-backdrop-filter: blur(16px);
-		border: 1px solid rgba(0, 0, 0, 0.1);
-		box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.08);
+		border: 1px solid hsl(var(--color-border));
+		box-shadow: 0 -2px 16px hsl(var(--color-foreground) / 0.08);
 		border-radius: 1rem;
 		white-space: nowrap;
 		max-width: calc(100vw - 2rem);
@@ -164,26 +164,16 @@
 		display: none; /* Chrome/Safari */
 	}
 
-	:global(.dark) .toolbar-content {
-		background: rgba(30, 30, 30, 0.92);
-		border: 1px solid rgba(255, 255, 255, 0.15);
-	}
-
 	/* Glass styling */
 	.glass-pill {
-		background: rgba(255, 255, 255, 0.85);
+		background: hsl(var(--color-surface) / 0.85);
 		backdrop-filter: blur(12px);
 		-webkit-backdrop-filter: blur(12px);
-		border: 1px solid rgba(0, 0, 0, 0.1);
-		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+		border: 1px solid hsl(var(--color-border));
+		box-shadow: 0 2px 8px hsl(var(--color-foreground) / 0.08);
 		border-radius: 9999px;
 	}
 
-	:global(.dark) .glass-pill {
-		background: rgba(255, 255, 255, 0.12);
-		border: 1px solid rgba(255, 255, 255, 0.15);
-	}
-
 	.glass-panel {
 		background: transparent;
 	}
@@ -203,19 +193,15 @@
 
 	.toolbar-fab:hover {
 		transform: scale(1.05);
-		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+		box-shadow: 0 4px 12px hsl(var(--color-foreground) / 0.15);
 	}
 
 	.toolbar-fab.active {
-		background: rgba(0, 0, 0, 0.05);
-	}
-
-	:global(.dark) .toolbar-fab.active {
-		background: rgba(255, 255, 255, 0.15);
+		background: hsl(var(--color-muted));
 	}
 
 	.toolbar-fab.active .fab-icon {
-		color: hsl(var(--color-muted-foreground));
+		color: hsl(var(--color-primary));
 	}
 
 	.fab-icon {
@@ -232,14 +218,10 @@
 	.toolbar-divider {
 		width: 1px;
 		height: 1.5rem;
-		background: rgba(0, 0, 0, 0.1);
+		background: hsl(var(--color-border));
 		margin: 0 0.25rem;
 	}
 
-	:global(.dark) .toolbar-divider {
-		background: rgba(255, 255, 255, 0.15);
-	}
-
 	/* Layout toggle button */
 	.layout-btn {
 		display: flex;
diff --git a/apps/calendar/apps/web/src/lib/components/calendar/CalendarToolbarContent.svelte b/apps/calendar/apps/web/src/lib/components/calendar/CalendarToolbarContent.svelte
index d44f6fc0a..af591ef61 100644
--- a/apps/calendar/apps/web/src/lib/components/calendar/CalendarToolbarContent.svelte
+++ b/apps/calendar/apps/web/src/lib/components/calendar/CalendarToolbarContent.svelte
@@ -101,7 +101,6 @@
 		options={viewOptions}
 		value={viewStore.viewType}
 		onChange={handleViewChange}
-		primaryColor="#3b82f6"
 		embedded={true}
 	/>
 </div>
@@ -155,21 +154,12 @@
 	}
 
 	.toolbar-content.vertical :global(.pill-view-switcher .switcher-btn:hover) {
-		background: rgba(0, 0, 0, 0.05);
-	}
-
-	:global(.dark) .toolbar-content.vertical :global(.pill-view-switcher .switcher-btn:hover) {
-		background: rgba(255, 255, 255, 0.1);
+		background: hsl(var(--color-foreground) / 0.05);
 	}
 
 	.toolbar-content.vertical :global(.pill-view-switcher .switcher-btn.active) {
-		background: color-mix(in srgb, #3b82f6 15%, transparent 85%);
-		border-color: color-mix(in srgb, #3b82f6 25%, transparent 75%);
-	}
-
-	:global(.dark) .toolbar-content.vertical :global(.pill-view-switcher .switcher-btn.active) {
-		background: color-mix(in srgb, #3b82f6 25%, transparent 75%);
-		border-color: color-mix(in srgb, #3b82f6 35%, transparent 65%);
+		background: hsl(var(--color-primary) / 0.15);
+		border-color: hsl(var(--color-primary) / 0.25);
 	}
 
 	/* PillTimeRangeSelector in vertical mode */
diff --git a/apps/calendar/apps/web/src/lib/components/calendar/DateStrip.svelte b/apps/calendar/apps/web/src/lib/components/calendar/DateStrip.svelte
index eff4b2f47..d1052e793 100644
--- a/apps/calendar/apps/web/src/lib/components/calendar/DateStrip.svelte
+++ b/apps/calendar/apps/web/src/lib/components/calendar/DateStrip.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { viewStore } from '$lib/stores/view.svelte';
 	import { eventsStore } from '$lib/stores/events.svelte';
+	import { settingsStore } from '$lib/stores/settings.svelte';
+	import DateStripContextMenu from './DateStripContextMenu.svelte';
 	import {
 		format,
 		isToday,
@@ -14,6 +16,14 @@
 	import { onMount, tick } from 'svelte';
 	import SunCalc from 'suncalc';
 
+	// Context menu reference
+	let contextMenu: DateStripContextMenu;
+
+	function handleContextMenu(e: MouseEvent) {
+		e.preventDefault();
+		contextMenu?.show(e.clientX, e.clientY);
+	}
+
 	interface Props {
 		isSidebarMode?: boolean;
 		isToolbarExpanded?: boolean;
@@ -223,8 +233,10 @@
 	class="date-strip-wrapper"
 	class:sidebar-mode={isSidebarMode}
 	class:toolbar-expanded={isToolbarExpanded}
+	class:compact={settingsStore.dateStripCompact}
 >
-	<div class="date-strip-container">
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div class="date-strip-container" oncontextmenu={handleContextMenu}>
 		<!-- Month label -->
 		<div class="month-header">
 			<span class="month-label">
@@ -250,12 +262,12 @@
 				{@const isFirstOfMonth = day.getDate() === 1}
 				{@const moonPhase = isSignificantMoonPhase(day)}
 				{@const eventCount = getEventCount(day)}
-				{#if isFirstOfMonth}
+				{#if isFirstOfMonth && settingsStore.dateStripShowMonthDividers}
 					<div class="month-divider"></div>
 				{/if}
 				<button
 					class="day-item"
-					class:weekend={dayIsWeekend}
+					class:weekend={dayIsWeekend && settingsStore.dateStripHighlightWeekends}
 					class:selected={dayIsSelected && !dayIsToday}
 					class:in-range={dayInRange && !dayIsToday}
 					class:range-start={dayIsRangeStart && !dayIsToday}
@@ -263,23 +275,17 @@
 					data-date={format(day, 'yyyy-MM-dd')}
 					data-is-today={dayIsToday}
 					onclick={() => handleDayClick(day)}
-					style={dayIsToday
-						? 'background: #3b82f6; color: white; border-radius: 10px; font-weight: 700; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);'
-						: ''}
+					class:is-today={dayIsToday}
 				>
 					{#if moonPhase.significant}
 						<span class="moon-indicator">{moonPhase.emoji}</span>
 					{/if}
-					<span class="day-weekday" style={dayIsToday ? 'opacity: 1; color: white;' : ''}
-						>{format(day, 'EE', { locale: de })}</span
-					>
-					<span class="day-number" style={dayIsToday ? 'color: white;' : ''}
-						>{format(day, 'd')}</span
-					>
+					<span class="day-weekday">{format(day, 'EE', { locale: de })}</span>
+					<span class="day-number">{format(day, 'd')}</span>
 					{#if eventCount > 0}
-						<div class="event-dots" style={dayIsToday ? 'opacity: 0.9;' : ''}>
+						<div class="event-dots">
 							{#each Array(eventCount) as _, i}
-								<span class="event-dot" style={dayIsToday ? 'background: white;' : ''}></span>
+								<span class="event-dot"></span>
 							{/each}
 						</div>
 					{/if}
@@ -327,21 +333,21 @@
 		flex-direction: column;
 		align-items: center;
 		padding: 0.375rem 0.875rem;
-		background: rgba(59, 130, 246, 0.1);
-		border: 1px solid rgba(59, 130, 246, 0.3);
+		background: hsl(var(--color-primary) / 0.1);
+		border: 1px solid hsl(var(--color-primary) / 0.3);
 		border-radius: 9999px;
 		cursor: pointer;
-		color: #3b82f6;
+		color: hsl(var(--color-primary));
 		pointer-events: auto;
 		transition: all 0.2s ease;
 	}
 
 	.today-button:hover {
-		background: #3b82f6;
-		border-color: #3b82f6;
-		color: white;
+		background: hsl(var(--color-primary));
+		border-color: hsl(var(--color-primary));
+		color: hsl(var(--color-primary-foreground, 0 0% 100%));
 		transform: translateY(-50%) scale(1.02);
-		box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+		box-shadow: 0 4px 12px hsl(var(--color-primary) / 0.3);
 	}
 
 	.today-button:hover .today-date {
@@ -358,7 +364,7 @@
 	.today-date {
 		font-size: 0.75rem;
 		font-weight: 500;
-		color: #60a5fa;
+		color: hsl(var(--color-primary) / 0.8);
 	}
 
 	.date-strip-container {
@@ -464,7 +470,7 @@
 		width: 4px;
 		height: 4px;
 		border-radius: 50%;
-		background: #3b82f6;
+		background: hsl(var(--color-primary));
 		opacity: 0.7;
 	}
 
@@ -478,13 +484,13 @@
 
 	.day-item.selected {
 		background: var(--color-muted, #f3f4f6);
-		color: #3b82f6;
+		color: hsl(var(--color-primary));
 		font-weight: 600;
 	}
 
 	/* View range highlighting */
 	.day-item.in-range {
-		background: rgba(59, 130, 246, 0.15);
+		background: hsl(var(--color-primary) / 0.15);
 		border-radius: 0;
 	}
 
@@ -501,7 +507,33 @@
 	}
 
 	.day-item.in-range:hover {
-		background: rgba(59, 130, 246, 0.25);
+		background: hsl(var(--color-primary) / 0.25);
+	}
+
+	/* Today styling */
+	.day-item.is-today {
+		background: hsl(var(--color-primary));
+		color: hsl(var(--color-primary-foreground, 0 0% 100%));
+		border-radius: 10px;
+		font-weight: 700;
+		box-shadow: 0 2px 8px hsl(var(--color-primary) / 0.4);
+	}
+
+	.day-item.is-today .day-weekday {
+		opacity: 1;
+		color: hsl(var(--color-primary-foreground, 0 0% 100%));
+	}
+
+	.day-item.is-today .day-number {
+		color: hsl(var(--color-primary-foreground, 0 0% 100%));
+	}
+
+	.day-item.is-today .event-dots {
+		opacity: 0.9;
+	}
+
+	.day-item.is-today .event-dot {
+		background: hsl(var(--color-primary-foreground, 0 0% 100%));
 	}
 
 	.day-weekday {
diff --git a/packages/shared-ui/src/navigation/PillTimeRangeSelector.svelte b/packages/shared-ui/src/navigation/PillTimeRangeSelector.svelte
index 2ea43fbb6..1b9b925b0 100644
--- a/packages/shared-ui/src/navigation/PillTimeRangeSelector.svelte
+++ b/packages/shared-ui/src/navigation/PillTimeRangeSelector.svelte
@@ -268,34 +268,22 @@
 	}
 
 	.glass-pill {
-		background: rgba(255, 255, 255, 0.85);
+		background: hsl(var(--color-surface) / 0.85);
 		backdrop-filter: blur(12px);
 		-webkit-backdrop-filter: blur(12px);
-		border: 1px solid rgba(0, 0, 0, 0.1);
+		border: 1px solid hsl(var(--color-border));
 		box-shadow:
-			0 4px 6px -1px rgba(0, 0, 0, 0.1),
-			0 2px 4px -1px rgba(0, 0, 0, 0.06);
-		color: #374151;
-	}
-
-	:global(.dark) .glass-pill {
-		background: rgba(255, 255, 255, 0.12);
-		border: 1px solid rgba(255, 255, 255, 0.15);
-		color: #f3f4f6;
+			0 4px 6px -1px hsl(var(--color-foreground) / 0.1),
+			0 2px 4px -1px hsl(var(--color-foreground) / 0.06);
+		color: hsl(var(--color-foreground));
 	}
 
 	.glass-pill:hover {
-		background: rgba(255, 255, 255, 0.95);
-		border-color: rgba(0, 0, 0, 0.15);
+		background: hsl(var(--color-surface) / 0.95);
 		transform: translateY(-1px);
 		box-shadow:
-			0 10px 15px -3px rgba(0, 0, 0, 0.1),
-			0 4px 6px -2px rgba(0, 0, 0, 0.05);
-	}
-
-	:global(.dark) .glass-pill:hover {
-		background: rgba(255, 255, 255, 0.2);
-		border-color: rgba(255, 255, 255, 0.25);
+			0 10px 15px -3px hsl(var(--color-foreground) / 0.1),
+			0 4px 6px -2px hsl(var(--color-foreground) / 0.05);
 	}
 
 	.pill-icon {
@@ -322,42 +310,23 @@
 		cursor: pointer;
 		transition: all 0.15s ease;
 		background: transparent;
-		color: #374151;
-	}
-
-	:global(.dark) .embedded-btn {
-		color: #f3f4f6;
+		color: hsl(var(--color-foreground));
 	}
 
 	.embedded-btn:hover {
-		background: rgba(0, 0, 0, 0.05);
-	}
-
-	:global(.dark) .embedded-btn:hover {
-		background: rgba(255, 255, 255, 0.1);
+		background: hsl(var(--color-foreground) / 0.05);
 	}
 
 	/* Active state for toggle mode */
 	.embedded-btn.active {
-		background: color-mix(in srgb, var(--color-primary-500, #3b82f6) 15%, transparent 85%);
-		color: var(--color-primary-500, #3b82f6);
-	}
-
-	:global(.dark) .embedded-btn.active {
-		background: color-mix(in srgb, var(--color-primary-500, #3b82f6) 25%, transparent 75%);
-		color: var(--color-primary-400, #60a5fa);
+		background: hsl(var(--color-primary) / 0.15);
+		color: hsl(var(--color-primary));
 	}
 
 	.glass-pill.active {
-		background: color-mix(in srgb, var(--color-primary-500, #3b82f6) 15%, white 85%);
-		border-color: var(--color-primary-500, #3b82f6);
-		color: var(--color-primary-500, #3b82f6);
-	}
-
-	:global(.dark) .glass-pill.active {
-		background: color-mix(in srgb, var(--color-primary-500, #3b82f6) 30%, transparent 70%);
-		border-color: var(--color-primary-400, #60a5fa);
-		color: var(--color-primary-400, #60a5fa);
+		background: hsl(var(--color-primary) / 0.15);
+		border-color: hsl(var(--color-primary));
+		color: hsl(var(--color-primary));
 	}
 
 	.chevron-icon {
@@ -420,18 +389,13 @@
 	}
 
 	.glass-dropdown {
-		background: rgba(255, 255, 255, 0.95);
+		background: hsl(var(--color-surface) / 0.95);
 		backdrop-filter: blur(16px);
 		-webkit-backdrop-filter: blur(16px);
-		border: 1px solid rgba(0, 0, 0, 0.1);
+		border: 1px solid hsl(var(--color-border));
 		box-shadow:
-			0 20px 25px -5px rgba(0, 0, 0, 0.1),
-			0 10px 10px -5px rgba(0, 0, 0, 0.04);
-	}
-
-	:global(.dark) .glass-dropdown {
-		background: rgba(30, 30, 30, 0.95);
-		border: 1px solid rgba(255, 255, 255, 0.15);
+			0 20px 25px -5px hsl(var(--color-foreground) / 0.1),
+			0 10px 10px -5px hsl(var(--color-foreground) / 0.04);
 	}
 
 	.dropdown-header {
@@ -440,13 +404,8 @@
 		font-weight: 600;
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
-		color: #6b7280;
-		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-	}
-
-	:global(.dark) .dropdown-header {
-		color: #9ca3af;
-		border-bottom-color: rgba(255, 255, 255, 0.1);
+		color: hsl(var(--color-muted-foreground));
+		border-bottom: 1px solid hsl(var(--color-border));
 	}
 
 	.time-selectors {
@@ -467,14 +426,10 @@
 		font-weight: 600;
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
-		color: #6b7280;
+		color: hsl(var(--color-muted-foreground));
 		padding: 0 0.5rem;
 	}
 
-	:global(.dark) .column-label {
-		color: #9ca3af;
-	}
-
 	.hour-list {
 		display: flex;
 		flex-direction: column;
@@ -509,32 +464,19 @@
 		border-radius: 0.5rem;
 		font-size: 0.8125rem;
 		font-weight: 500;
-		color: #374151;
+		color: hsl(var(--color-foreground));
 		cursor: pointer;
 		transition: all 0.15s;
 		text-align: left;
 	}
 
-	:global(.dark) .hour-option {
-		color: #e5e7eb;
-	}
-
 	.hour-option:hover:not(.disabled) {
-		background: rgba(0, 0, 0, 0.05);
-	}
-
-	:global(.dark) .hour-option:hover:not(.disabled) {
-		background: rgba(255, 255, 255, 0.1);
+		background: hsl(var(--color-foreground) / 0.05);
 	}
 
 	.hour-option.active {
-		background: color-mix(in srgb, var(--color-primary-500, #3b82f6) 20%, white 80%);
-		color: var(--color-primary-500, #3b82f6);
-	}
-
-	:global(.dark) .hour-option.active {
-		background: color-mix(in srgb, var(--color-primary-500, #3b82f6) 30%, transparent 70%);
-		color: var(--color-primary-500, #3b82f6);
+		background: hsl(var(--color-primary) / 0.2);
+		color: hsl(var(--color-primary));
 	}
 
 	.hour-option.disabled {
@@ -544,27 +486,19 @@
 
 	.time-divider {
 		width: 1px;
-		background: rgba(0, 0, 0, 0.1);
+		background: hsl(var(--color-border));
 		margin: 0.5rem 0;
 	}
 
-	:global(.dark) .time-divider {
-		background: rgba(255, 255, 255, 0.1);
-	}
-
 	.dropdown-footer {
 		padding: 0.5rem 1rem;
-		border-top: 1px solid rgba(0, 0, 0, 0.1);
+		border-top: 1px solid hsl(var(--color-border));
 		text-align: center;
 	}
 
-	:global(.dark) .dropdown-footer {
-		border-top-color: rgba(255, 255, 255, 0.1);
-	}
-
 	.current-range {
 		font-size: 0.8125rem;
 		font-weight: 600;
-		color: var(--color-primary-500, #3b82f6);
+		color: hsl(var(--color-primary));
 	}
 </style>
diff --git a/packages/shared-ui/src/navigation/PillToolbarButton.svelte b/packages/shared-ui/src/navigation/PillToolbarButton.svelte
index 6af067a8f..1676a457b 100644
--- a/packages/shared-ui/src/navigation/PillToolbarButton.svelte
+++ b/packages/shared-ui/src/navigation/PillToolbarButton.svelte
@@ -49,28 +49,20 @@
 		border: none;
 		border-radius: 9999px;
 		cursor: pointer;
-		color: #374151;
+		color: hsl(var(--color-foreground));
 		font-size: 0.875rem;
 		font-weight: 500;
 		white-space: nowrap;
 		transition: all 0.15s ease;
 	}
 
-	:global(.dark) .toolbar-btn {
-		color: #f3f4f6;
-	}
-
 	.toolbar-btn:hover:not(:disabled) {
-		background: rgba(0, 0, 0, 0.05);
-	}
-
-	:global(.dark) .toolbar-btn:hover:not(:disabled) {
-		background: rgba(255, 255, 255, 0.1);
+		background: hsl(var(--color-foreground) / 0.05);
 	}
 
 	.toolbar-btn.active {
-		background: color-mix(in srgb, #3b82f6 15%, transparent 85%);
-		color: #3b82f6;
+		background: hsl(var(--color-primary) / 0.15);
+		color: hsl(var(--color-primary));
 	}
 
 	.toolbar-btn.icon-only {
diff --git a/packages/shared-ui/src/navigation/PillViewSwitcher.svelte b/packages/shared-ui/src/navigation/PillViewSwitcher.svelte
index d462852b2..321e0ffd6 100644
--- a/packages/shared-ui/src/navigation/PillViewSwitcher.svelte
+++ b/packages/shared-ui/src/navigation/PillViewSwitcher.svelte
@@ -21,13 +21,11 @@
 		value: string;
 		/** Called when view changes */
 		onChange: (id: string) => void;
-		/** Primary color for active state */
-		primaryColor?: string;
 		/** Embedded mode - no background/border, for use inside a parent bar */
 		embedded?: boolean;
 	}
 
-	let { options, value, onChange, primaryColor = '#3b82f6', embedded = false }: Props = $props();
+	let { options, value, onChange, embedded = false }: Props = $props();
 
 	let containerRef = $state<HTMLDivElement | null>(null);
 	let indicatorStyle = $state('');
@@ -84,7 +82,6 @@
 	class="pill-view-switcher"
 	class:glass-pill={!embedded}
 	class:embedded-switcher={embedded}
-	style="--switcher-primary-color: {primaryColor}"
 	bind:this={containerRef}
 >
 	<!-- Sliding indicator -->
@@ -127,18 +124,13 @@
 	}
 
 	.glass-pill {
-		background: rgba(255, 255, 255, 0.85);
+		background: hsl(var(--color-surface) / 0.85);
 		backdrop-filter: blur(12px);
 		-webkit-backdrop-filter: blur(12px);
-		border: 1px solid rgba(0, 0, 0, 0.1);
+		border: 1px solid hsl(var(--color-border));
 		box-shadow:
-			0 4px 6px -1px rgba(0, 0, 0, 0.1),
-			0 2px 4px -1px rgba(0, 0, 0, 0.06);
-	}
-
-	:global(.dark) .glass-pill {
-		background: rgba(255, 255, 255, 0.12);
-		border: 1px solid rgba(255, 255, 255, 0.15);
+			0 4px 6px -1px hsl(var(--color-foreground) / 0.1),
+			0 2px 4px -1px hsl(var(--color-foreground) / 0.06);
 	}
 
 	/* Embedded mode - no background/border */
@@ -156,17 +148,12 @@
 		top: 0;
 		bottom: 0;
 		border-radius: 9999px;
-		background: color-mix(in srgb, var(--switcher-primary-color) 15%, white 85%);
-		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+		background: hsl(var(--color-primary) / 0.15);
+		box-shadow: 0 1px 3px hsl(var(--color-foreground) / 0.1);
 		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 		z-index: 0;
 	}
 
-	:global(.dark) .sliding-indicator {
-		background: color-mix(in srgb, var(--switcher-primary-color) 25%, transparent 75%);
-		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-	}
-
 	.switcher-btn {
 		position: relative;
 		z-index: 1;
@@ -179,31 +166,19 @@
 		border: none;
 		border-radius: 9999px;
 		cursor: pointer;
-		color: #6b7280;
+		color: hsl(var(--color-muted-foreground));
 		font-size: 0.875rem;
 		font-weight: 500;
 		white-space: nowrap;
 		transition: color 0.15s ease;
 	}
 
-	:global(.dark) .switcher-btn {
-		color: #9ca3af;
-	}
-
 	.switcher-btn:hover:not(.disabled) {
-		color: #374151;
-	}
-
-	:global(.dark) .switcher-btn:hover:not(.disabled) {
-		color: #e5e7eb;
+		color: hsl(var(--color-foreground));
 	}
 
 	.switcher-btn.active {
-		color: var(--switcher-primary-color);
-	}
-
-	:global(.dark) .switcher-btn.active {
-		color: var(--switcher-primary-color);
+		color: hsl(var(--color-primary));
 	}
 
 	.switcher-btn.disabled {
diff --git a/packages/shared-ui/src/quick-input/InputBar.svelte b/packages/shared-ui/src/quick-input/InputBar.svelte
index 62cf5d7d1..0dbbc52a4 100644
--- a/packages/shared-ui/src/quick-input/InputBar.svelte
+++ b/packages/shared-ui/src/quick-input/InputBar.svelte
@@ -55,7 +55,6 @@
 		searchingText?: string;
 		createText?: string;
 		appIcon?: string;
-		primaryColor?: string;
 		autoFocus?: boolean;
 		/** Bottom offset from viewport bottom (default: '70px') */
 		bottomOffset?: string;
@@ -74,7 +73,6 @@
 		searchingText = 'Suche...',
 		createText = 'Erstellen',
 		appIcon = 'search',
-		primaryColor = '#8b5cf6',
 		autoFocus = true,
 		bottomOffset = '70px',
 		hasFabRight = false,
@@ -248,7 +246,7 @@
 <div
 	class="quick-input-bar"
 	class:has-fab-right={hasFabRight}
-	style="--primary-color: {primaryColor}; --bottom-offset: {bottomOffset}"
+	style="--bottom-offset: {bottomOffset}"
 >
 	<!-- Results Panel (above input) -->
 	{#if showPanel}
@@ -451,32 +449,27 @@
 		align-items: center;
 		gap: 0.75rem;
 		padding: 0.75rem 1.25rem;
-		background: rgba(255, 255, 255, 0.85);
+		background: hsl(var(--color-surface) / 0.85);
 		backdrop-filter: blur(12px);
 		-webkit-backdrop-filter: blur(12px);
-		border: 1px solid rgba(0, 0, 0, 0.1);
+		border: 1px solid hsl(var(--color-border));
 		border-radius: 9999px;
 		max-width: 700px;
 		margin: 0 auto;
 		box-shadow:
-			0 4px 6px -1px rgba(0, 0, 0, 0.1),
-			0 2px 4px -1px rgba(0, 0, 0, 0.06);
+			0 4px 6px -1px hsl(var(--color-foreground) / 0.1),
+			0 2px 4px -1px hsl(var(--color-foreground) / 0.06);
 		transition: all 0.2s ease;
 		/* Fixed height to prevent size changes */
 		height: 54px;
 	}
 
-	:global(.dark) .input-container {
-		background: rgba(255, 255, 255, 0.12);
-		border: 1px solid rgba(255, 255, 255, 0.15);
-	}
-
 	.input-container:focus-within {
-		border-color: var(--primary-color);
+		border-color: hsl(var(--color-primary));
 		box-shadow:
-			0 4px 6px -1px rgba(0, 0, 0, 0.1),
-			0 2px 4px -1px rgba(0, 0, 0, 0.06),
-			0 0 0 2px color-mix(in srgb, var(--primary-color) 25%, transparent);
+			0 4px 6px -1px hsl(var(--color-foreground) / 0.1),
+			0 2px 4px -1px hsl(var(--color-foreground) / 0.06),
+			0 0 0 2px hsl(var(--color-primary) / 0.25);
 	}
 
 	.app-icon {
@@ -530,29 +523,29 @@
 		color: hsl(var(--color-muted-foreground));
 	}
 
-	/* Syntax highlighting colors */
+	/* Syntax highlighting colors - using theme-aware semantic colors */
 	.input-highlight-backdrop :global(.hl-priority-urgent) {
-		color: #ef4444;
+		color: hsl(var(--color-error, 0 84% 60%));
 		font-weight: 600;
 	}
 
 	.input-highlight-backdrop :global(.hl-priority-high) {
-		color: #f97316;
+		color: hsl(var(--color-warning, 25 95% 53%));
 		font-weight: 600;
 	}
 
 	.input-highlight-backdrop :global(.hl-priority-medium) {
-		color: #eab308;
+		color: hsl(var(--color-warning, 48 96% 53%));
 		font-weight: 600;
 	}
 
 	.input-highlight-backdrop :global(.hl-priority-low) {
-		color: #22c55e;
+		color: hsl(var(--color-success, 142 71% 45%));
 		font-weight: 600;
 	}
 
 	.input-highlight-backdrop :global(.hl-tag) {
-		color: var(--primary-color);
+		color: hsl(var(--color-primary));
 		font-weight: 500;
 	}
 
@@ -562,12 +555,12 @@
 	}
 
 	.input-highlight-backdrop :global(.hl-date) {
-		color: hsl(262 83% 58%);
+		color: hsl(var(--color-accent, 262 83% 58%));
 		font-weight: 500;
 	}
 
 	.input-highlight-backdrop :global(.hl-time) {
-		color: hsl(262 83% 58%);
+		color: hsl(var(--color-accent, 262 83% 58%));
 		font-weight: 500;
 	}
 
@@ -575,8 +568,8 @@
 		width: 2rem;
 		height: 2rem;
 		border-radius: 9999px;
-		background: var(--primary-color);
-		color: white;
+		background: hsl(var(--color-primary));
+		color: hsl(var(--color-primary-foreground, 0 0% 100%));
 		border: none;
 		cursor: pointer;
 		display: flex;
@@ -612,19 +605,14 @@
 		margin: 0 auto 0.5rem;
 		max-height: 320px;
 		overflow-y: auto;
-		background: rgba(255, 255, 255, 0.95);
+		background: hsl(var(--color-surface) / 0.95);
 		backdrop-filter: blur(12px);
 		-webkit-backdrop-filter: blur(12px);
 		border-radius: 1rem;
-		border: 1px solid rgba(0, 0, 0, 0.1);
+		border: 1px solid hsl(var(--color-border));
 		box-shadow:
-			0 4px 6px -1px rgba(0, 0, 0, 0.1),
-			0 2px 4px -1px rgba(0, 0, 0, 0.06);
-	}
-
-	:global(.dark) .results-panel {
-		background: rgba(30, 30, 30, 0.95);
-		border: 1px solid rgba(255, 255, 255, 0.15);
+			0 4px 6px -1px hsl(var(--color-foreground) / 0.1),
+			0 2px 4px -1px hsl(var(--color-foreground) / 0.06);
 	}
 
 	/* Result Items */
@@ -661,8 +649,8 @@
 		height: 36px;
 		min-width: 36px;
 		border-radius: 9999px;
-		background: var(--primary-color);
-		color: white;
+		background: hsl(var(--color-primary));
+		color: hsl(var(--color-primary-foreground, 0 0% 100%));
 		display: flex;
 		align-items: center;
 		justify-content: center;
@@ -750,7 +738,7 @@
 		width: 1.25rem;
 		height: 1.25rem;
 		border: 2px solid hsl(var(--color-border));
-		border-top-color: var(--primary-color);
+		border-top-color: hsl(var(--color-primary));
 		border-radius: 50%;
 		animation: spin 0.8s linear infinite;
 	}