commit

src/lib/cards/social/BigSocialCard/BigSocialCard.svelte

···
 
 	const platform = $derived(item.cardData.platform as string);
 	const platformData = $derived(platformsData[platform]);
+
+	// Color logic:
+	// - base/transparent/undefined: background = brand color, icon = white
+	// - other: background = that color (from BaseCard), icon = white
+	const useBrandBackground = $derived(
+		!item.color || item.color === 'base' || item.color === 'transparent'
+	);
+	const brandColor = $derived(`#${item.cardData.color}`);
 </script>
 
 <div
 	class="flex h-full w-full items-center justify-center p-10"
-	style={`background-color: #${item.cardData.color}`}
+	style={useBrandBackground ? `background-color: ${brandColor}` : ''}
 >
 	<div
 		class="flex aspect-square max-h-full max-w-full items-center justify-center [&_svg]:size-full [&_svg]:max-w-60 [&_svg]:fill-white"

src/lib/cards/social/BigSocialCard/index.ts

···
 		return item;
 	},
 	name: 'Social Icon',
-	allowSetColor: false,
-	defaultColor: 'transparent',
+	allowSetColor: true,
+	defaultColor: 'base',
 	minW: 2,
 	minH: 2,
 	onUrlHandler: (url, item) => {

src/lib/cards/visual/FluidTextCard/FluidTextCard.svelte

···
 		const isDark = document.documentElement.classList.contains('dark');
 
 		// Draw shadow behind fluid (light mode only, transparent only)
-		if (shadowCanvas && item.color === 'transparent' && !isDark) {
+		if (shadowCanvas && item.color === 'transparent') {
 			shadowCanvas.width = width * dpr;
 			shadowCanvas.height = height * dpr;
 			const shadowCtx = shadowCanvas.getContext('2d')!;
···
 			}
 
 			// Draw darkened text shape behind fluid
-			shadowCtx.fillStyle = getHexCSSVar('--color-base-200');
+			shadowCtx.fillStyle = getHexCSSVar(isDark ? '--color-base-950' : '--color-base-200');
 			shadowCtx.fillText(text, width / 2, textY);
 		} else if (shadowCanvas) {
-			// Clear shadow canvas in dark mode
+			// Clear shadow canvas when not transparent
 			shadowCanvas.width = 1;
 			shadowCanvas.height = 1;
 		}
···
 		? 'bg-base-50 dark:bg-base-900'
 		: 'bg-black'}"
 >
-	<canvas bind:this={shadowCanvas} class="absolute h-full w-full dark:hidden"></canvas>
+	<canvas bind:this={shadowCanvas} class="absolute h-full w-full"></canvas>
 	<canvas bind:this={fluidCanvas} class="absolute h-full w-full"></canvas>
 	<canvas bind:this={maskCanvas} class="absolute h-full w-full"></canvas>
 </div>