Theme

Customize the theme to match your branding

The color palette of your brand is defined by these variables:

src/theme.ts

export const colors = {
  brand: {
    50: theme.colors.teal["50"],
    100: theme.colors.teal["100"],
    200: theme.colors.teal["200"],
    300: theme.colors.teal["300"],
    400: theme.colors.teal["400"],
    500: theme.colors.teal["500"],
    600: theme.colors.teal["600"],
    700: theme.colors.teal["700"],
    800: theme.colors.teal["800"],
    900: theme.colors.teal["900"],
  },
};

By default, the brand color is defined with the teal color palette of ChakraUI.

To create the color palette of your brand color, you can use https://themera.vercel.app/ Set the gray color to your brand color (I used purple), and get all the shades of the color palette 👇

Generate a color palette

Now you can copy the colors into the brand colors.

TailwindCSS

If you want to use the same brand color via TailwindCSS class names, edit the tailwind.config.ts file and add the brand colors. Replace the HEX value with your brand color, as regenerated via Themera.

tailwind.config.ts

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
  extend: {
      colors: {
        'brand': {
          50: '#cffafe',
          100: '#cffafe',
          200: '#cffafe',
          300: '#cffafe',
          400: '#cffafe',
          500: '#cffafe',
          600: '#cffafe',
          700: '#cffafe',
          800: '#cffafe',
          900: '#cffafe',
        },
      },
    },
  }
}

You can now use the brand colors via class names, i.e. text-brand-500