HomePhabricator
Diffusion Comm 1250e84f80d3

[web] introduce AppThemeWrapper

Description

[web] introduce AppThemeWrapper

Summary:
This diff introduces a new component that wraps the contents of the App component, and the job of this component is to update the data attribute based on what the activeTheme of the app is. The subsequent diff will introduce the css variable list that will use this data attribute to show dark or light mode color values

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

Test Plan:
Please see the demo video below where the theme of the app changes based on the activeTheme redux state

Reviewers: atul, inka, rohan

Reviewed By: atul

Subscribers: ted, ashoat, tomek, wyilio

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

Details

Provenance
ginsuAuthored on Oct 23 2023, 1:53 PM
Reviewer
atul
Differential Revision
D9580: [web] introduce AppThemeWrapper
Parents
rCOMM437c6a11fb52: [lib] Introduce basic `permissionsToBitmask` and `hasPermission`
Branches
Unknown
Tags
Unknown