[web] introduce light mode to the account settings screen
Summary:
This diff starts to introduce the themed CSS variables list from the new design system. As a starting point this diff also updates the account settings component to use this new color design system which impliclty introduces light mode to this screen.
For additional context about this new color design system and the new naming convention here is the notion doc, @ted and I wrote:
https://www.notion.so/commapp/New-Color-System-Proposal-ef80b4e4b9ec42949095056161223a42
Here is the WIP spreadsheet @ted and I have been using as our source of truth of what we should use as color variables and their associated values
https://docs.google.com/spreadsheets/d/1PwdxT8Ag_4AGzmGSj2wXsR5-go9rsgZvTZycpy3e49k/edit#gid=0
Sources I used to help me with this implementation:
https://css-tricks.com/easy-dark-mode-and-multiple-color-themes-in-react/
https://stackoverflow.com/questions/56300132/how-to-override-css-prefers-color-scheme-setting
Linear task: https://linear.app/comm/issue/ENG-4802/account-settings
Depends on D9580
Test Plan:
Please see the screenshots below
dark mode:
light mode:
Reviewers: atul, inka, rohan
Reviewed By: atul
Subscribers: ashoat, tomek, ted, wyilio
Differential Revision: https://phab.comm.dev/D9582