Go to the src/styles folder. Then look up for the Theme.js file. Inside, you'll see the following code:

const Theme = {
  colors: {
    primary: '#D97441',
    secondary: '#4FA8C2',
    tertiary: '#D29849',
    lightGray: '#BFBFBF',
    darkGray: '#595A5A',
    success: '#7D96F7',
    warning: '#ffc107',
    info: '#ffc107',
    danger: '#D81C23',
  },
  fonts: {
    fontsFamily: 'Comfortaa',
  },
};

export default Theme;

Those are the default values for the project. Furthermore, you are able to change those values whenever is considered necessarily.

In the component or page file you want, firstable import the following libraries:

import styled, { ThemeProvider } from 'styled-components';
import Theme from '../../styles/Theme';

The ThemeProvider is the wrapper component which contains all the properties. Also, the Theme object, which is an object with the properties we reference in our styled-components.

To edit the component, you need to referenced the properties of props.theme in our styled-components CSS:

const ComingSoonTitle = styled.h1`
  font-size: 75px;
  color: ${(props) => props.theme.colors.primary};
  text-align: center;
  padding: 100px;
`;

Look that the h1 is using the primary color property of the project Theme.

Finally, if you decided to wrap your components in a ThemeProvider wrapper component for the arrow function, do the following code:

const ComingSoonPage = () => {
  const { t } = useTranslation();
  return (
    <ThemeProvider theme={Theme}>
      <div className="py-20">
        <LogoImg src="/assets/images/SolutionsNeededLogo.png" alt="Logo" />
        <ComingSoonTitle>{t('COMING_SOON_TITLE')}</ComingSoonTitle>
      </div>
    </ThemeProvider>
  );
};

Look that the ThemeProvider wrapper component is referenced by the Theme object and all components use those styles.