Add option for automatic dark theme (#2759)

Summary:
Add an setting option to allow automatic dark theme

A feature requested by swrobel https://github.com/facebook/flipper/issues/2708

## Changelog

### UI change
Replace the `Enable Dark Theme` Toggle button with a Radio group containing three Radio buttons.

The available options are `Dark`, `Light` and `Use System Default`, of which `Use System Default` is the default value

<img width="548" alt="Screenshot 2021-08-31 at 3 32 44 PM" src="https://user-images.githubusercontent.com/410850/131462798-4e74f757-41fc-4a3f-ba28-53d00fc1cf03.png">

### Data structure change

The `darkMode` property of [Settings](c0cd32564a/desktop/app/src/reducers/settings.tsx (L20)) is changed from `boolean` to `string`, the available values are `dark`, `light` and `auto`

Pull Request resolved: https://github.com/facebook/flipper/pull/2759

Test Plan:
### Test 1
- Step: Choose `Dark` in the Settings page and click on `Apply and Restart` button
- Expect: The application is displayed in Dark mode
### Test 2
- Step: Choose `Light` in the Settings page and click on `Apply and Restart` button
- Expect: The application is displayed in Light mode
### Test 3
- Step: Choose `Use System Default` in the Settings page and click on `Apply and Restart` button
- Expect: The application is displayed in System Default mode

Reviewed By: mweststrate

Differential Revision: D30666966

Pulled By: passy

fbshipit-source-id: a63e91f2d0dbff96890e267062cb75bffd0007f4
This commit is contained in:
ZHANG Qichuan
2021-09-08 03:27:36 -07:00
committed by Facebook GitHub Bot
parent cef1468db7
commit 9a4d94c971
6 changed files with 57 additions and 29 deletions

View File

@@ -24,7 +24,7 @@ export type Config = {
launcherMsg?: string | undefined;
updaterEnabled?: boolean;
launcherEnabled?: boolean;
darkMode?: boolean;
darkMode: 'system' | 'light' | 'dark';
};
export default function setup(argv: any) {
@@ -38,6 +38,7 @@ export default function setup(argv: any) {
let config: Config = {
pluginPaths: [],
disabledPlugins: [],
darkMode: 'light',
};
try {