Theming

: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;
}

:root {
  --color-brand: #10b981;
}

.dark {
  --color-brand: #10b981;
}

<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>

import { ThemeProvider } from '@/components/providers/ThemeProvider';

<ThemeProvider attribute="class" defaultTheme="system">
  {children}
</ThemeProvider>

<div className="bg-white dark:bg-neutral-900">
  <p className="text-gray-900 dark:text-gray-100">Adapts to theme</p>
</div>

import { Poppins, Roboto } from 'next/font/google';

const poppins = Poppins({
  subsets: ['latin'],
  weight: ['400', '500', '600', '700'],
  variable: '--font-poppins'
});

@layer base {
  h1 {
    @apply text-5xl font-bold max-md:text-[36px] font-poppins;
  }
  p {
    @apply text-base font-normal max-md:text-[15px];
  }
}

@theme {
  --radius: 0.625rem;
  --radius-lg: var(--radius);
  --spacing-fd-container: 1224px;
}

*::-webkit-scrollbar {
  background-color: var(--color-surface);
  width: 12px;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--color-neutral-foreground);
  border-radius: 16px;
}

<div className="overflow-auto no-scrollbar">Content</div>