Fix dark diff background colors (#3065)

Summary:
Bug fix. Currenty Flipper provides incorrect red and green diff colors in Dark theme, this PR fixes the issue. Light theme colors are the same.

Closes https://github.com/facebook/flipper/issues/3011

## Changelog

Color theme fix: make diff background colors be defined in theme LESS files

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

Test Plan:
I used [redux-debugger](https://github.com/jk-gan/flipper-plugin-redux-debugger) plugin to test this as this is what I actually use for debugging Redux in React Native projects with Flipper. Here's a [React Native app](https://github.com/3rdp/flipper-redux-debugger-app) that I put together for testing purposes.

Light theme:
![lime2 light](https://user-images.githubusercontent.com/8898635/141799686-8b94655f-2501-46f9-9b28-d9ba8aeee222.png)

Dark theme:
![lime2](https://user-images.githubusercontent.com/8898635/141799710-fbd008a5-28cc-46f3-abf7-6b90fd85facb.png)

Reviewed By: mweststrate

Differential Revision: D32529276

Pulled By: passy

fbshipit-source-id: 3d11edaf1112444bb106521b6b30db4a4c2b8202
This commit is contained in:
3rdp
2021-11-18 06:21:00 -08:00
committed by Facebook GitHub Bot
parent 58ad452183
commit c4577bfee2
4 changed files with 12 additions and 2 deletions

View File

@@ -55,5 +55,7 @@
--flipper-button-default-background: @button-default-background;
--flipper-background-transparent-hover: @background-transparent-hover;
--flipper-divider-color: @divider-color;
--flipper-diff-added-background: @diff-added-background;
--flipper-diff-removed-background: @diff-removed-background;
--flipper-border-radius: @border-radius-base;
}

View File

@@ -47,6 +47,10 @@
// Divider color
@divider-color: #181818; // white 10%
// Semantic colors: Diff
@diff-added-background: @lime-2;
@diff-removed-background: @volcano-2;
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track-piece { background-color: transparent; }
::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.5); border-radius: 3px;}

View File

@@ -46,3 +46,7 @@
// Divider color
@divider-color: #ececec; // black 10%
// Semantic colors: Diff
@diff-added-background: @lime-2;
@diff-removed-background: @volcano-2;