Particles Update

src/lib/components/Background3D.svelte

@@ -3,10 +3,11 @@
 	import { T } from '@threlte/core';
 	import ParticleField from './ParticleField.svelte';
 	import { themeColors, mode } from '$lib/stores/theme';
-	import * as THREE from 'three';
 	import '$lib/assets/css/background-3d.css';
 
-	let bgColor = $derived($mode === 'dark' ? $themeColors.background : $themeColors.background);
+	// Reactive theme colors
+	const bgColor = $derived($themeColors.background);
+	const primaryColor = $derived($themeColors.primary);
 </script>
 
 <div class="scene-container">
@@ -26,7 +27,7 @@
 		<T.DirectionalLight
 			position={[5, 5, 5]}
 			intensity={0.5}
-			color={$themeColors.primary}
+			color={primaryColor}
 		/>
 
 		<!-- Particle system -->

src/lib/components/ParticleField.svelte

@@ -17,6 +17,14 @@
 	let velocities: Float32Array;
 	let time = 0;
 
+	// Reactive theme values - use accent or a darker color for light mode visibility
+	const currentMode = $derived($mode);
+	const particleColor = $derived(
+		currentMode === 'dark' 
+			? $themeColors.primary 
+			: $themeColors.accent || $themeColors.primary
+	);
+
 	// Create particles
 	function createParticles() {
 		positions = new Float32Array(particleCount * 3);
@@ -40,10 +48,11 @@
 
 		particlesMaterial = new THREE.PointsMaterial({
 			size: 0.05,
+			color: new THREE.Color(particleColor),
 			sizeAttenuation: true,
 			transparent: true,
-			opacity: 0.6,
-			blending: THREE.AdditiveBlending,
+			opacity: currentMode === 'dark' ? 0.6 : 0.8,
+			blending: currentMode === 'dark' ? THREE.AdditiveBlending : THREE.NormalBlending,
 			depthWrite: false
 		});
 
@@ -54,12 +63,13 @@
 		createParticles();
 	});
 
-	// Update particle color based on theme
+	// Update particle color and opacity based on theme
 	$effect(() => {
 		if (particlesMaterial) {
-			const color = new THREE.Color($themeColors.primary);
-			particlesMaterial.color = color;
-			particlesMaterial.opacity = $mode === 'dark' ? 0.6 : 0.4;
+			particlesMaterial.color.set(particleColor);
+			particlesMaterial.opacity = currentMode === 'dark' ? 0.6 : 0.8;
+			particlesMaterial.blending = currentMode === 'dark' ? THREE.AdditiveBlending : THREE.NormalBlending;
+			particlesMaterial.needsUpdate = true;
 		}
 	});
 

src/lib/components/tui/TuiBody.svelte

@@ -70,6 +70,7 @@
 					{@const line = displayed.parsed.line}
 					{@const idx = group.indices[j]}
 					{@const visibleSegments = getSegmentsUpToChar(displayed.parsed.segments, displayed.charIndex)}
+					{@const showImage = displayed.showImage}
 					{#if line.type === 'button'}
 						<TuiButton {line} index={idx} selected={selectedIndex === idx} onClick={onButtonClick} onHover={onHoverButton} inline={true} />
 					{:else if line.type === 'link'}
@@ -84,7 +85,14 @@
 						<TuiCheckbox {line} inline={true} />
 					{:else if line.type === 'toggle'}
 						<TuiToggle {line} inline={true} />
-					{:else}
+					{:else if line.type === 'image' && showImage}
+						<div class="tui-image inline-image">
+							<img src={line.image} alt={line.imageAlt || 'Image'} style="max-width: {line.imageWidth || 300}px" />
+							{#if line.content}
+								<span class="image-caption">{line.content}</span>
+							{/if}
+						</div>
+					{:else if line.type !== 'image'}
 						<span class="inline-content {line.type}">
 							{getLinePrefix(line.type)}{#each visibleSegments as segment}{#if segment.icon}<Icon icon={segment.icon} width="14" class="inline-icon" />{:else if getSegmentStyle(segment)}<span style={getSegmentStyle(segment)}>{segment.text}</span>{:else}{segment.text}{/if}{/each}
 						</span>