Colors | apple-svelte

apple-svelte comes with the default color palette for iOS and iPadOS. Further down in this page is a list of supported color variables.

You can customize your project's accent color by editing the --colors-accent and --colors-accent-2 variables. For best results, --colors-accent-2 should be the same color as --colors-accent but with lower (15%) opacity.

+page.svelte

<style>
	:root {
		--colors-accent: var(--colors-indigo);
		--colors-accent-2: var(--colors-indigo-2);
	}
</style>

Red

Orange

Yellow

Green

Mint

Teal

Cyan

Blue

Indigo

Purple

Pink

Brown

Red 2

Orange 2

Yellow 2

Green 2

Mint 2

Teal 2

Cyan 2

Blue 2

Indigo 2

Purple 2

Pink 2

Brown 2

Black

Gray

Gray 2

Gray 3

Gray 4

Gray 5

Gray 6

White

Background primary

Background secondary

Background tertiary

Label primary

Label secondary

Label tertiary

Label quaternary

Separators opaque

Separators non-opaque

Grouped background primary

Grouped background secondary

Grouped background tertiary

Fill primary

Fill secondary

Fill tertiary

Fill quaternary