# Color Gradient Picker

## Example

```svelte
<script lang="ts">
	import { ColorGradientPicker, ColorPicker, convert, listColorSpaces, sRGB } from '@foxui/all';
	import { ThemeWatcher } from '$lib/helper/ThemeWatcher.svelte';
	import { onMount } from 'svelte';
	import { deserialize } from '@foxui/all';
	import { Button, cn, Popover } from '@foxui/all';
	import { PopoverColorPicker } from '@foxui/all';

	let colors = $state([
		{ rgb: { r: 0, g: 0, b: 0 }, position: 0 },
		{ rgb: { r: 0, g: 0, b: 0 }, position: 0.5 },
		{ rgb: { r: 0, g: 0, b: 0 }, position: 1 }
	]);

	let colors2 = $state([
		{ rgb: { r: 0, g: 0, b: 0 }, position: 0 },
		{ rgb: { r: 0, g: 0, b: 0 }, position: 0.5 },
		{ rgb: { r: 0, g: 0, b: 0 }, position: 1 }
	]);

	onMount(() => {
		const theme = new ThemeWatcher();
		const accentColor = theme.getCSSVar('--color-accent-500');
		const color = deserialize(accentColor);
		updateColors(color);

		theme.subscribe(() => {
			const accentColor = theme.getCSSVar('--color-accent-500');
			let color = deserialize(accentColor);
			updateColors(color);
		});
	});

	function updateColors(theme: ReturnType<typeof deserialize>) {
		const { id, coords } = theme;

		const space = listColorSpaces().find((f) => id === f.id);
		if (!space) {
			throw new Error('Invalid color space');
		}

		colors = [
			{ rgb: { r: 0, g: 0, b: 0 }, position: 0 },
			{ rgb: { r: 0, g: 0, b: 0 }, position: 0.5 },
			{ rgb: { r: 0, g: 0, b: 0 }, position: 1 }
		];

		colors2 = [
			{ rgb: { r: 0, g: 0, b: 0 }, position: 0 },
			{ rgb: { r: 0, g: 0, b: 0 }, position: 0.5 },
			{ rgb: { r: 0, g: 0, b: 0 }, position: 1 }
		];

		for (let i = 0; i < 3; i++) {
			const rgb = convert([coords[0], coords[1], coords[2] + 30 * i], space, sRGB);

			colors[i].rgb = { r: rgb[0], g: rgb[1], b: rgb[2] };
			colors2[i].rgb = { r: rgb[0], g: rgb[1], b: rgb[2] };
		}
	}
</script>

<ColorGradientPicker class="not-prose mt-8" bind:colors />

<h3>Small</h3>

<ColorGradientPicker class="not-prose mt-8" bind:colors={colors2} size="sm" />
```

## Documentation

## Usage

```svelte
<ColorGradientPicker bind:colors />
```

## API Reference

### ColorGradientPicker
A gradient editor that lets users add, remove, and reposition color stops.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| colors | `{ rgb: { r: number; g: number; b: number }; position: number }[]` | `-` | The array of color stops defining the gradient. (bindable) |
| defaultNewColor | `{ r: number; g: number; b: number }` | `{ r: 0, g: 0, b: 0 }` | The default RGB color for newly added stops. |
| size | `'default' | 'sm'` | `'default'` | The size of the gradient picker. |
| onchange | `(colors: ColorStop[]) => void` | `-` | Callback invoked when the gradient colors change. |
| class | `string` | `-` | Additional CSS classes to apply. |