Colors

This template centralizes brand colors in templates/saas-landing/colors.ts and reads them at runtime based on the current theme (light or dark). You can safely adjust the palette in one file and have it flow through the entire template.

Where colors live

// templates/saas-landing/colors.ts
const colors = {
  light: {
    brandPrimary: 'oklch(0.70 0.20 303)',
    brandSecondary: 'oklch(0.70 0.15 240)',
    premiumAccent: 'oklch(0.72 0.19 292)',
    premiumGlow: 'oklch(0.86 0.08 290)'
  },
  dark: {
    brandPrimary: 'oklch(0.63 0.22 303)',
    brandSecondary: 'oklch(0.63 0.18 240)',
    premiumAccent: 'oklch(0.69 0.22 292)',
    premiumGlow: 'oklch(0.50 0.08 290)'
  }
}

export default colors

The palette supports oklch, rgb, hsl, rgba or hex values. We recommend oklch for perceptual consistency.

How components read colors

Components use the useColors() hook which selects colors.light orcolors.dark depending on the active theme from next-themes.

// templates/saas-landing/hooks/use-colors.ts
'use client'
import { useTheme } from 'next-themes'
import colors from '../colors'

export function useColors() {
  const { theme, systemTheme } = useTheme()
  const current = theme === 'system' ? systemTheme : theme
  const palette = current === 'dark' ? colors.dark : colors.light
  return palette
}

The theme context is provided by ThemeProvider in app/layout.tsx. No extra setup is required—just import and use the hook.

Typical usage

// Inside any component
import { useColors } from '@/templates/saas-landing/hooks/use-colors'

export function CTAButton() {
  const c = useColors()
  return (
    <button
      className="px-4 py-2 rounded-md text-white"
      style={{ background: c.brandPrimary }}
    >
      Get Started
    </button>
  )
}

With transparency

If you need an alpha variant (e.g. hover states, glows), use the helperwithAlpha(color, alpha):

import { withAlpha } from '@/templates/saas-landing/lib/color-utils'
const bg = withAlpha(c.premiumAccent, 0.12) // 12% opacity

Changing the brand colors

• Open templates/saas-landing/colors.ts.
• Adjust values under light and dark. Keep key names the same.
• Save and refresh — components reading useColors() update automatically.

Adding a new token

You can add new keys (e.g. brandTertiary) under both light anddark, then consume it via useColors().

// colors.ts
light: { brandTertiary: 'oklch(0.78 0.08 120)', ... }
dark:  { brandTertiary: 'oklch(0.70 0.10 120)', ... }

// in a component
const { brandTertiary } = useColors()

Best practices

• Prefer OKLCH for smoother hue/lightness adjustments across light/dark modes.
• Mirror keys in both themes so switching is seamless.
• Use CSS-in-JS style for dynamic surfaces; Tailwind classes remain for layout/typography.
• Use withAlpha to generate overlays and subtle shadows from the same token.

Tip: Keep contrast in mind. Primary surfaces should maintain WCAG-friendly contrast with text in both themes.