Change Colors
Learn how to customize your application's color scheme
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:
: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 devNavigate 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 mainCommon Issues
Colors Not Applying
- Clear browser cache and hard refresh
- Verify CSS variables are in the
:rootselector - Check that Tailwind is processing the CSS file
Dark Mode Colors Wrong
- Ensure dark mode colors are defined in
.darkselector - Test with theme switcher to verify both modes
Next Steps
- Add Font - Customize typography
- Customize Emails - Brand your emails
Related Documentation
- UI Theming - Complete theming guide
- Tailwind CSS - Color customization
How is this guide ?
Last updated on