Skip to main content

Theming

SmarterAvatar supports comprehensive theming through CSS variables and Tailwind CSS.

CSS Variables​

Core theme variables are defined in styles/globals.css:

:root {
  /* Brand colors */
  --brand-primary: #2563eb;
  --brand-secondary: #1e40af;
  --brand-accent: #3b82f6;

  /* Text colors */
  --brand-text-primary: #111827;
  --brand-text-secondary: #6b7280;

  /* Background */
  --brand-background: #ffffff;
}

Dark Mode​

Dark mode variables are automatically applied:

.dark {
  --brand-text-primary: #f9fafb;
  --brand-text-secondary: #9ca3af;
  --brand-background: #111827;
}

Tailwind Integration​

Custom colors are available as Tailwind classes:

<div class="bg-brand-primary text-brand-text-primary">
  Styled content
</div>

Available Classes​

ClassUsage
bg-brand-primaryPrimary background
text-brand-primaryPrimary text/icon
border-brand-primaryPrimary border
bg-brand-secondarySecondary background
text-brand-text-primaryMain text
text-brand-text-secondaryMuted text

Theme Provider​

The BrandThemeProvider component applies theme at runtime:

import { BrandThemeProvider } from '@/components/BrandThemeProvider';

function App() {
  return (
    <BrandThemeProvider>
      <YourApp />
    </BrandThemeProvider>
  );
}

Dark Mode Toggle​

Users can switch themes:

import { ThemeToggle } from '@/components/ThemeToggle';

<ThemeToggle />

Or programmatically:

import { useTheme } from 'next-themes';

const { theme, setTheme } = useTheme();
setTheme('dark');

Typography​

Font Family​

Default fonts (customize in tailwind.config.js):

fontFamily: {
  sans: ['Gilroy', 'system-ui', 'sans-serif'],
  mono: ['Space Mono', 'monospace'],
}

Text Sizes​

Standard Tailwind sizing applies:

<h1 class="text-3xl font-bold">Heading</h1>
<p class="text-base">Body text</p>
<span class="text-sm text-brand-text-secondary">Caption</span>

Component Styling​

Buttons​

Primary button styling:

.btn-primary {
  @apply bg-brand-primary text-white hover:bg-brand-secondary;
  @apply px-4 py-2 rounded-lg font-medium;
  @apply transition-colors duration-200;
}

Cards​

Card styling:

.card {
  @apply bg-white dark:bg-gray-800;
  @apply border border-gray-200 dark:border-gray-700;
  @apply rounded-xl shadow-sm;
}

Customization Examples​

Change Primary Color to Green​

:root {
  --brand-primary: #10b981;
  --brand-secondary: #059669;
  --brand-accent: #34d399;
}

Add Custom Font​

  1. Import font in layout.tsx:
import { Poppins } from 'next/font/google';

const poppins = Poppins({
  subsets: ['latin'],
  weight: ['400', '500', '600', '700']
});
  1. Update Tailwind config:
fontFamily: {
  sans: ['Poppins', 'system-ui', 'sans-serif'],
}