Added: Functionality to change the theme by modifying the colours, fonts and other CSS properties in one place

[AishwaryShrivastav]

Related Issues

Closes #597

Short Description and Why It's Useful

Added theme.scss file which contains variables and CSS property for the elements, which can be modified here to see the change globally. Included this file in the main.scss to override the SFUI and component's SCSS

Screenshots of Visual Changes before/after (If There Are Any)

IMPORTANT NOTICE - Remember to update CHANGELOG.md with description of your change

Contribution and Currently Important Rules Acceptance

• [ ] I read and followed contribution rules

[dt2patel]

I think we can also add a variable here to manage surface colors globally, this would make it easier to change the background color of the entire website quickly if someone doesn't want to use plain white. Thoughts?

[dt2patel]

Additional things that are managed globally and may vary from brand to brand:

1. Global max width + padding
2. Overlay styling

[dt2patel]

Also what about z-index groups? making it easy to manage z-index consistency for elements through out the app.

[AishwaryShrivastav]

Yes, we can add variables and properties for :

1. Global surface colors
2. Global max width + padding
3. Overlay styling
4. Z-index

The current implementation can be consider as a phase 1 and after it get merge we can again work on giving the above functionalities.