Add theming to the project

[mariana-caldas]

What do we need to build or fix?

Now we're using styled-components implemented on issue #162 , we need to add a theme to the project and keep all the styling variables in a single location to enable future reuse of the project as a theme base.

Technical details

• Create a new branch named feature/add-theming and checkout to it.
• Create a theme file named themeConfig.js in the root directory.
• Add the createGlobalStyle object to export the globalStyles per theme.
• Create a lightTheme object that will be exported and add the current styling variables to it.
• Import the theme file on _app.js.
• Leverage the ThemeProvider wrapper component provided by the styled-components library to implement the theme.
• Ensure all components use the variables that are transferred to the new theme system.
• Test the feature in different screen sizes and browsers to ensure it looks and functions as expected.
• Commit the changes to the feature/add-theming branch and create a pull request to merge the changes into the main branch.
• Update the CHANGELOG.md file.

Approach suggestions

• https://styled-components.com/docs/advanced#theming
• https://blog.logrocket.com/theming-in-next-js-with-styled-components-and-usedarkmode/

Deadline Please remember that once you assign this task to yourself, you'll need to complete it in 3 weeks.

Acceptance criteria

• Test the section and components in many screen sizes, you can use the Inspect tool for that.
• Please test if the new changes added to the components do not affect the other instances.
• Test the feature in many browsers, such as Chrome, Firefox, Edge, and Safari (MAC).
• If there are any build problems when submitting your PR, run yarn build locally to solve the issues and commit the changes.
• Update the CHANGELOG.md file.