GuidesCustomization
Customization
Customize BetterCone's appearance and branding
Customization Guide
Make BetterCone truly yours by customizing branding, themes, typography, and internationalization.
BetterCone uses Tailwind CSS for styling and supports full theming customization.
What You Can Customize
Branding
Logo, favicon, metadata, and brand assets
Theming
Colors, dark mode, and Tailwind configuration
Typography
Fonts, text styles, and readability
Components
Customize UI components and layouts
Internationalization
Multi-language support and localization
Quick Start
1. Update Brand Assets
Replace logos and favicons in /public:
public/
├── favicon.ico
├── logo.svg
├── og-image.png
└── apple-touch-icon.png2. Configure Colors
Edit tailwind.config.ts:
export default {
theme: {
extend: {
colors: {
primary: {
DEFAULT: '#3b82f6',
foreground: '#ffffff',
},
},
},
},
};3. Update Metadata
Edit app/layout.tsx:
export const metadata = {
title: 'Your SaaS Name',
description: 'Your description',
};Common Customizations
Change Primary Color
colors: {
primary: {
DEFAULT: '#8b5cf6', // Purple
foreground: '#ffffff',
},
}Add Custom Font
import { Inter, Poppins } from 'next/font/google';
const poppins = Poppins({
subsets: ['latin'],
weight: ['400', '600', '700'],
});
export default function RootLayout({ children }) {
return (
<html lang="en" className={poppins.className}>
<body>{children}</body>
</html>
);
}Custom Logo
import Image from 'next/image';
export function Navbar() {
return (
<nav>
<Image src="/logo.svg" alt="Logo" width={120} height={40} />
</nav>
);
}Resources
Next Steps
Explore detailed customization guides in the sections above.