Custom Styles

In this chapter, we will learn how to customize the resume styles.

Theme Configuration

Create a theme configuration file:

// src/theme.ts
export const theme = {
  colors: {
    primary: '#2563eb',
    secondary: '#64748b',
    text: '#1e293b',
    background: '#ffffff',
  },
  fonts: {
    heading: 'Inter, sans-serif',
    body: 'Inter, sans-serif',
  },
  spacing: {
    xs: '0.25rem',
    sm: '0.5rem',
    md: '1rem',
    lg: '1.5rem',
    xl: '2rem',
  },
};

Apply Styles

Use the theme in your components:

<template>
  <div class="resume">
    <h1 :style="{ color: theme.colors.primary }">{{ name }}</h1>
    <p :style="{ fontFamily: theme.fonts.body }">{{ description }}</p>
  </div>
</template>

<script setup lang="ts">

</script>

Print Styles

Add print-specific styles:

@media print {
  .resume {
    page-break-inside: avoid;
  }
  
  @page {
    margin: 1cm;
  }
}

Next Steps

Now that we have customized the styles, we can generate the PDF in the next chapter.