🏖️
Chisfis - Online Booking NextJs template
DemoBuy now
  • Getting Started
  • Folder structure and organization
  • Dependencies
  • Installation
  • Custom color, fonts
  • CSS
  • Component Structure
  • How to fetch data
  • How to deploy
  • How to add metadata
  • Resources and assets
  • Support
  • Change log
    • Change log
  • How to?
    • How to Get Google Maps API Key for Free (in 5 easy steps)
    • Converting a Next.js project from TypeScript to plain JavaScript
Powered by GitBook
On this page
  • 1- Custom colors
  • 2- Custom fonts

Was this helpful?

Custom color, fonts

Custom color, fonts

PreviousInstallationNextCSS

Last updated 3 days ago

Was this helpful?

1- Custom colors

The project uses Tailwind CSS 4 color scheme. So you can easily customize the colors

Please check this guide for a better view -

How to custom color?

Override any of the default colors by defining new theme variables with the same name:

// style.css
@import "tailwindcss";
@theme {
  --color-zinc-50: oklch(0.984 0.003 247.858);
  --color-zinc-100: oklch(0.968 0.007 247.896);
  --color-zinc-300: oklch(0.869 0.022 252.894);
  --color-zinc-400: oklch(0.704 0.04 256.788);
  --color-zinc-500: oklch(0.554 0.046 257.417);
  --color-zinc-600: oklch(0.446 0.043 257.281);
  --color-zinc-700: oklch(0.372 0.044 257.287);
  --color-zinc-800: oklch(0.279 0.041 260.031);
  --color-zinc-900: oklch(0.208 0.042 265.755);
  --color-zinc-950: oklch(0.129 0.042 264.695);
  //....
}

2- Custom fonts

// app/layout.tsx
import { Geist } from 'next/font/google'
 
const geist = Geist({
  subsets: ['latin'],
})
 
export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={geist.className}>
      <body>{children}</body>
    </html>
  )
}

The template uses Next.js Google fonts, so please read this tutorial, which will help you to customize the font -

https://tailwindcss.com/docs/colors
https://nextjs.org/docs/app/getting-started/images-and-fonts#optimizing-fonts