diff --git a/components/src/FormLabel/FormLabel.svelte b/components/src/FormLabel/FormLabel.svelte
index 4e1eb3b6..fb98e47b 100644
--- a/components/src/FormLabel/FormLabel.svelte
+++ b/components/src/FormLabel/FormLabel.svelte
@@ -26,6 +26,7 @@
 
 <style>
 	.container {
+		color: var(--color-textPrimary);
 		font-family: var(--swr-text);
 		font-size: var(--fs-small-1);
 		font-weight: 400;
diff --git a/components/src/Select/Select.svelte b/components/src/Select/Select.svelte
index b23fdb16..f2afbbd7 100644
--- a/components/src/Select/Select.svelte
+++ b/components/src/Select/Select.svelte
@@ -65,12 +65,17 @@
 </div>
 
 <style lang="scss">
-	.item {
+	.container {
 		font-family: var(--swr-sans);
-		color: var(--violet-dark-5);
-	}
-	.selection {
-		font-family: var(--swr-sans);
-		color: var(--violet-dark-5);
+		// See: https://github.com/rob-balfre/svelte-select/blob/master/docs/theming_variables.md
+		--background: var(--color-surfaceFill);
+		--list-background: var(--color-surfaceFill);
+		--selection-background: var(--color-surfaceFill);
+		--item-is-active-bg: var(--color-surfaceBorder);
+		--item-is-active-color: var(--color-textPrimary);
+		--item-hover-bg: var(--color-surfaceBorder);
+		--item-color: var(--color-textPrimary);
+		--item-hover-color: var(--color-textPrimary);
+		--selected-item-color: var(--color-textPrimary);
 	}
 </style>
diff --git a/components/src/Select/SelectStoriesTemplate.svelte b/components/src/Select/SelectStoriesTemplate.svelte
index 54954620..af2d667c 100644
--- a/components/src/Select/SelectStoriesTemplate.svelte
+++ b/components/src/Select/SelectStoriesTemplate.svelte
@@ -6,7 +6,7 @@
 	let { args = null, selectedItem = $bindable(), demoComponent = null } = $props();
 </script>
 
-<DesignTokens>
+<DesignTokens theme="light">
 	{#if demoComponent}
 		{@render demoComponent()}
 	{:else}