HomePhabricator
Diffusion Comm abeda0ea88cf

[web] introduce light mode to the account settings screen

Description

[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:

Screenshot 2023-10-24 at 3.41.31 PM.png (2×3 px, 786 KB)

light mode:

Screenshot 2023-10-24 at 3.41.36 PM.png (2×3 px, 791 KB)

Reviewers: atul, inka, rohan

Reviewed By: atul

Subscribers: ashoat, tomek, ted, wyilio

Differential Revision: https://phab.comm.dev/D9582

Details

Provenance
ginsuAuthored on Oct 19 2023, 11:55 PM
Reviewer
atul
Differential Revision
D9582: [web] introduce light mode to the account settings screen
Parents
rCOMM1250e84f80d3: [web] introduce AppThemeWrapper
Branches
Unknown
Tags
Unknown