diff --git a/src/lib/components/ColorPicker.svelte b/src/lib/components/ColorPicker.svelte
index dda8f9a..4cf171b 100644
--- a/src/lib/components/ColorPicker.svelte
+++ b/src/lib/components/ColorPicker.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { NOTE_COLORS, COLOR_OPTIONS } from '$lib/utils/colors.js';
+	import { COLOR_OPTIONS, getNoteColor } from '$lib/utils/colors.js';
+	import { getIsDarkMode } from '$lib/utils/theme.svelte.js';
 	import type { NoteColor } from '$lib/types/index.js';
 
 	interface Props {
@@ -12,11 +13,10 @@
 
 <div class="flex flex-wrap gap-1" data-testid="color-picker">
 	{#each COLOR_OPTIONS as option}
-		{@const colors = NOTE_COLORS[option.value]}
 		<button
 			onclick={() => onSelect(option.value)}
 			class="h-8 w-8 rounded-full border-2 transition-transform hover:scale-110 {selected === option.value ? 'border-[var(--text)]' : 'border-[var(--border-subtle)]'}"
-			style="background-color: {colors.bg}"
+			style="background-color: {getNoteColor(option.value, getIsDarkMode())}"
 			title={option.label}
 			data-testid="color-{option.value}"
 		></button>
diff --git a/src/lib/components/NoteCard.svelte b/src/lib/components/NoteCard.svelte
index 2bcc54a..8b17b2b 100644
--- a/src/lib/components/NoteCard.svelte
+++ b/src/lib/components/NoteCard.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { NOTE_COLORS } from '$lib/utils/colors.js';
+	import { getNoteColor } from '$lib/utils/colors.js';
+	import { getIsDarkMode } from '$lib/utils/theme.svelte.js';
 	import { renderMarkdown } from '$lib/utils/markdown.js';
 	import { togglePin, trashNote, archiveNote, unarchiveNote, restoreNote, deleteNote, leaveNote, currentFilter } from '$lib/stores/notes.js';
 	import ImageLightbox from './ImageLightbox.svelte';
@@ -27,8 +28,7 @@
 	let { note, onEdit, fullHeight = false }: Props = $props();
 
 	$effect(() => {
-		const colors = NOTE_COLORS[note.color];
-		cardStyle = `background-color: ${colors.bg}`;
+		cardStyle = `background-color: ${getNoteColor(note.color, getIsDarkMode())}`;
 	});
 
 	let cardStyle = $state('');
diff --git a/src/lib/components/NoteEditor.svelte b/src/lib/components/NoteEditor.svelte
index ea9cf9f..f900548 100644
--- a/src/lib/components/NoteEditor.svelte
+++ b/src/lib/components/NoteEditor.svelte
@@ -9,7 +9,8 @@
 	import NoteHistory from './NoteHistory.svelte';
 	import { updateNote, createNote } from '$lib/stores/notes.js';
 	import { notes } from '$lib/stores/notes.js';
-	import { NOTE_COLORS } from '$lib/utils/colors.js';
+	import { getNoteColor } from '$lib/utils/colors.js';
+	import { getIsDarkMode } from '$lib/utils/theme.svelte.js';
 	import { getPreferences } from '$lib/stores/preferences.svelte.js';
 	import type { Editor } from '@tiptap/core';
 	import type { Note, NoteColor, Attachment, Collaborator } from '$lib/types/index.js';
@@ -192,8 +193,7 @@
 
 	let bgStyle = $state('');
 	$effect(() => {
-		const colors = NOTE_COLORS[color];
-		bgStyle = `background-color: ${colors.bg}`;
+		bgStyle = `background-color: ${getNoteColor(color, getIsDarkMode())}`;
 	});
 
 	// Use pointer events to detect backdrop clicks. Unlike mouse events,
diff --git a/src/routes/(app)/settings/preferences/+page.svelte b/src/routes/(app)/settings/preferences/+page.svelte
index be5f992..5f24da6 100644
--- a/src/routes/(app)/settings/preferences/+page.svelte
+++ b/src/routes/(app)/settings/preferences/+page.svelte
@@ -15,7 +15,7 @@
 		<div class="flex gap-1" role="group" aria-label="Theme">
 			{#each [['system', 'System'], ['light', 'Light'], ['dark', 'Dark']] as [value, label]}
 				<button
-					onclick={() => updatePreference('theme', value)}
+					onclick={() => updatePreference('theme', value as 'system' | 'light' | 'dark')}
 					class="rounded-sm border px-4 py-2 text-sm transition-colors {prefs.theme === value ? 'border-[var(--primary)] bg-[var(--primary)]/15 text-[var(--primary)] font-medium' : 'border-[var(--border-subtle)] text-[var(--text)] hover:border-[var(--primary)]'}"
 					data-testid="pref-theme-{value}"
 				>