Plainform

Learn how to customize your Plainform application's color scheme.

Goal

By the end of this recipe, you'll have customized your application's colors to match your brand.

Prerequisites

A working Plainform installation
Basic knowledge of CSS and HSL color format

Steps

Update CSS Variables

Edit the color variables in globals.css:

components/styles/globals.css

:root {
  --color-surface: #fafafa;
  --color-foreground: #171717;
  --color-darker-surface: #eee9e9;
  
  --color-neutral: #e7e6e6;
  --color-neutral-foreground: #6e6d6c;
  --color-neutral-border: #d1d0d0;
  
  --color-brand: #4153ff;
  --color-brand-highlight: #758cff;
  --color-brand-foreground: #fafafa;
  /* ... other colors */
}

.dark {
  --color-surface: #171717;
  --color-foreground: #fafafa;
  --color-darker-surface: #141414;
  
  --color-neutral: #262626;
  --color-neutral-foreground: #b0b0b0;
  --color-neutral-border: #4d4d4d;
  
  --color-brand: #4153ff;
  --color-brand-highlight: #758cff;
  /* ... other colors */
}

Use HSL format (hue, saturation, lightness) for easier color adjustments. Try uicolors.app to generate color palettes.

Test Your Changes

Start your dev server and check the colors:

npm run dev

Navigate through your app to verify colors look good in both light and dark modes.

Publish Your Changes

Commit and push:

git add components/styles/globals.css
git commit -m "style: update color scheme"
git push origin main

Common Issues

Colors Not Applying

Clear browser cache and hard refresh
Verify CSS variables are in the :root selector
Check that Tailwind is processing the CSS file

Dark Mode Colors Wrong

Ensure dark mode colors are defined in .dark selector
Test with theme switcher to verify both modes

Next Steps

Add Font - Customize typography
Customize Emails - Brand your emails

UI Theming - Complete theming guide
Tailwind CSS - Color customization

Change Colors