Customizing the UI

Portfolio CMS uses shadcn/ui components with TailwindCSS, making it easy to customize the look and feel of your portfolio. You can change colors, typography, spacing, and even completely redesign components.

Theme System Overview

The theme is controlled by CSS variables defined in src/app/(frontend)/global.css. This file contains:

• Color variables for light and dark modes
• Border radius settings
• Typography configuration

All components use these variables, so changing them updates the entire UI instantly.

Quick Theme Customization with tweakcn

The easiest way to customize your theme is using tweakcn.com — a visual theme editor for shadcn/ui.

Steps to Use tweakcn

1. Go to tweakcn.com
2. Use the visual editor to customize colors, radius, and other settings
3. Preview your changes in real-time
4. Click Export to get the CSS variables
5. Copy the generated CSS and paste it into your global.css file

Example: Applying a tweakcn Theme

After generating your theme on tweakcn, replace the :root and .dark sections in src/app/(frontend)/global.css:

:root {
  --radius: 0.5rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --primary: oklch(0.6 0.2 260);
  /* ... other variables from tweakcn */
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --primary: oklch(0.7 0.2 260);
  /* ... other variables from tweakcn */
}

Understanding CSS Variables

Here's what each variable controls:

Core Colors

Variable	Description
--background	Page background color
--foreground	Main text color
--primary	Primary brand color (buttons, links)
--primary-foreground	Text on primary colored elements
--secondary	Secondary color for less prominent elements
--muted	Muted backgrounds (cards, inputs)
--muted-foreground	Subtle text color
--accent	Accent color for highlights
--destructive	Error and danger states

UI Elements

Variable	Description
--card	Card background color
--card-foreground	Card text color
--popover	Popover/dropdown background
--border	Border color
--input	Input field border color
--ring	Focus ring color

Border Radius

Variable	Description
--radius	Base border radius (all others derive from this)

TIP

Change only --radius in :root to update all border radius values across the UI. The theme automatically calculates sm, md, lg, xl variants.

Manual Theme Customization

If you prefer to customize manually, edit src/app/(frontend)/global.css directly.

Changing the Primary Color

To change the primary color to blue:

:root {
  /* Change primary to a blue shade */
  --primary: oklch(0.5 0.2 250);
  --primary-foreground: oklch(0.98 0 0);
}

.dark {
  --primary: oklch(0.6 0.2 250);
  --primary-foreground: oklch(0.1 0 0);
}

Understanding OKLCH Colors

Portfolio CMS uses the OKLCH color format for better color consistency:

oklch(lightness chroma hue)

• Lightness: 0 (black) to 1 (white)
• Chroma: 0 (gray) to ~0.4 (vivid)
• Hue: 0-360 degrees (red=0, yellow=90, green=150, blue=250, purple=300)

INFO

You can use tools like oklch.com to pick colors in OKLCH format.

Customizing Components

All UI components are located in src/components/ui/. You can modify any component to fit your design needs.

Component Location

src/components/ui/
├── button.tsx
├── card.tsx
├── input.tsx
├── badge.tsx
└── ... more components

Example: Customizing the Button

To modify the button styles, edit src/components/ui/button.tsx:

const buttonVariants = cva(
  // Base styles
  'inline-flex items-center justify-center rounded-md text-sm font-medium',
  {
    variants: {
      variant: {
        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
        // Add your custom variant
        gradient: 'bg-gradient-to-r from-purple-500 to-pink-500 text-white',
      },
      size: {
        default: 'h-10 px-4 py-2',
        // Add a custom size
        xl: 'h-14 px-8 py-4 text-lg',
      },
    },
  }
)

Tips for Customization

Start Small

Begin by changing colors and see the effect. Gradually move to component modifications.

Keep Backups

Before major changes, commit your current code or make a backup of the files you're modifying.

Use Browser DevTools

Use your browser's developer tools to experiment with CSS changes before applying them to the code.

Test Both Themes

Always test your changes in both light and dark modes to ensure consistency.

Resources

• shadcn/ui Documentation
• tweakcn Theme Editor
• TailwindCSS Documentation
• OKLCH Color Picker