Vue 3

Project Structure

Your Vue 3 project uses the Composition API with color variables in src/assets/main.css.

Color Variables

All colors are defined as CSS custom properties:

:root {
  --primary: /* Your primary color */;
  --secondary: /* Your secondary color */;
  --accent: /* Your accent color */;
  --text-on-primary: /* Text color for primary bg */;
  --text-on-secondary: /* Text color for secondary bg */;
  --text-on-accent: /* Text color for accent bg */;
}

Using Colors in Single File Components

Apply colors in the <style> section:

<template>
  <div class="card">
    <h2>Card Title</h2>
  </div>
</template>

<style scoped>
.card {
  background-color: var(--secondary);
  color: var(--text-on-secondary);
}
</style>

Dynamic Styles

Use :style binding for dynamic colors:

<div :style="{ 
  backgroundColor: 'var(--primary)',
  color: 'var(--text-on-primary)'
}">
  Content
</div>