Colors & Styling

Complete guide to customizing the colors, fonts, and overall appearance of your portfolio website.

Color Scheme

Colors are defined in app/globals.css using CSS variables.

Primary Colors

The primary color is used for links, buttons, and highlights:

Background Colors

Customizing Colors

To change colors, edit app/globals.css:

1. Find the color variable you want to change
2. Update the HSL values (Hue, Saturation, Lightness)
3. Save and rebuild

Example: Change primary color to blue:

Typography

Fonts

Fonts are configured in app/layout.tsx:

To change fonts:

1. Import a different font from next/font/google
2. Update the font variable
3. Apply to the body element

Example: Use Roboto instead of Inter:

Font Sizes

Font sizes use Tailwind's default scale. To customize:

1. Edit tailwind.config.js
2. Extend the fontSize:

Tailwind Configuration

Customize Tailwind in tailwind.config.js:

Dark Mode

Dark mode is handled by next-themes. The theme automatically switches based on:

1. System preference (default)
2. User selection (via theme toggle)

To customize dark mode colors, edit the .dark class styles in app/globals.css.

Best Practices

1. Use CSS variables: Makes it easy to change colors globally
2. Test both themes: Ensure colors work in light and dark mode
3. Maintain contrast: Ensure text is readable on backgrounds
4. Be consistent: Use the same colors throughout the site

Next Steps

• Navigation - Update navigation
• Homepage - Customize homepage