Colored

---

• Choose a recipe
• Make a list of the ingredients
• Take the ingredients
• Prepare the dish following the recipe's instructions
• Enjoy the dish!

• Choose a recipe
• Make a list of the ingredients
• Take the ingredients
• Prepare the dish following the recipe's instructions
• Enjoy the dish!

Code

<script setup>
import { useTimelineDemo } from './timeline-demo';

const { isDark, timelineItems } = useTimelineDemo()

</script>

<template>
	<Timeline
		:items="timelineItems"
		colored="#50FFA7"
		:mode="isDark ? 'dark' : 'light'"
	/>
	<Timeline
		:items="timelineItems"
		colored="lightcoral"
		:mode="isDark ? 'dark' : 'light'"
	/>
</template>

TIP

It's possible to use hex colors like #bada55 and CSS named color like green.