Changing your website's primary colour

The theme configuration is located in the theme.js file in the theme folder at the root of your project however sometimes might be located in the root folder.

project-root/
├── theme/
│   └── theme.js

Open the theme.js file and locate the colors section in the theme object. You'll find the primary colour definition here.

The colours are typically defined as an array of shades, with index 6 being the main shade used throughout the website. You can modify these values using either HEX codes or RGB values:

colors: {
     primary: colorsTuple('#fff712'),
    // other colour definitions...
  },
}

After modifying the colours, follow these steps:

• Save the theme.js file
• Restart your development server or production server
• The changes should be immediately visible in your website

• Ensure sufficient contrast between your primary colour and text colours for accessibility
• Keep your colour scheme consistent throughout the website
• Consider creating a backup of your theme file before making changes