Theming
Customize colors, fonts, and styles in your Plainform application
Learn how to customize the visual appearance of your application using CSS variables and Tailwind utilities.
Color System
Colors are defined using CSS variables in components/styles/globals.css:
:root {
--color-surface: #fafafa;
--color-foreground: #171717;
--color-neutral: #e7e6e6;
--color-brand: #4153ff;
--color-brand-foreground: #fafafa;
}
.dark {
--color-surface: #171717;
--color-foreground: #fafafa;
--color-neutral: #262626;
--color-brand: #4153ff;
--color-brand-foreground: #fafafa;
}Customizing Colors
Change your brand color by updating both light and dark mode:
:root {
--color-brand: #10b981;
}
.dark {
--color-brand: #10b981;
}Using Theme Colors
<div className="bg-brand text-brand-foreground">Brand element</div>
<div className="bg-surface text-foreground">Themed element</div>
<p className="text-neutral-foreground">Muted text</p>Dark Mode
Dark mode uses the next-themes package with CSS variables:
import { ThemeProvider } from '@/components/providers/ThemeProvider';
<ThemeProvider attribute="class" defaultTheme="system">
{children}
</ThemeProvider>Use Tailwind's dark mode variant:
<div className="bg-white dark:bg-neutral-900">
<p className="text-gray-900 dark:text-gray-100">Adapts to theme</p>
</div>Typography
Fonts are configured in the root layout using Next.js font optimization:
import { Poppins, Roboto } from 'next/font/google';
const poppins = Poppins({
subsets: ['latin'],
weight: ['400', '500', '600', '700'],
variable: '--font-poppins'
});Global typography styles in globals.css:
@layer base {
h1 {
@apply text-5xl font-bold max-md:text-[36px] font-poppins;
}
p {
@apply text-base font-normal max-md:text-[15px];
}
}Spacing and Layout
Customize border radius and spacing:
@theme {
--radius: 0.625rem;
--radius-lg: var(--radius);
--spacing-fd-container: 1224px;
}Custom Scrollbar
Scrollbar styling is defined in globals.css:
*::-webkit-scrollbar {
background-color: var(--color-surface);
width: 12px;
}
*::-webkit-scrollbar-thumb {
background-color: var(--color-neutral-foreground);
border-radius: 16px;
}Hide scrollbar with utility class:
<div className="overflow-auto no-scrollbar">Content</div>Next Steps
- Troubleshooting - Common theming issues
How is this guide ?
Last updated on