Dark mode tweaks

Summary: Went over all plugins and did superficial fixes to make most plugins look decent or at least usable in dark mode, which before they weren't :)

Reviewed By: priteshrnandgaonkar

Differential Revision: D29456680

fbshipit-source-id: 3952e5da512c68b89434eea081faf121d1049908

desktop/plugins/public/navigation/components/BookmarksSidebar.tsx

@@ -11,7 +11,6 @@ import {
   DetailSidebar,
   FlexCenter,
   styled,
-  colors,
   FlexRow,
   FlexColumn,
   Text,
@@ -20,6 +19,7 @@ import {
 import {Bookmark, URI} from '../types';
 import {IconButton} from './';
 import React from 'react';
+import {theme} from 'flipper-plugin';
 
 type Props = {
   bookmarks: Map<string, Bookmark>;
@@ -29,14 +29,14 @@ type Props = {
 
 const NoData = styled(FlexCenter)({
   fontSize: 18,
-  color: colors.macOSTitleBarIcon,
+  color: theme.textColorSecondary,
 });
 
 const BookmarksList = styled.div({
   overflowY: 'scroll',
   overflowX: 'hidden',
   height: '100%',
-  backgroundColor: colors.white,
+  backgroundColor: theme.backgroundDefault,
 });
 
 const BookmarkContainer = styled(FlexRow)({
@@ -45,16 +45,12 @@ const BookmarkContainer = styled(FlexRow)({
   height: 55,
   alignItems: 'center',
   cursor: 'pointer',
-  borderBottom: `1px ${colors.greyTint} solid`,
+  borderBottom: `1px ${theme.dividerColor} solid`,
   ':last-child': {
     borderBottom: '0',
   },
   ':active': {
-    backgroundColor: colors.highlight,
-    color: colors.white,
-  },
-  ':active *': {
-    color: colors.white,
+    backgroundColor: theme.backgroundWash,
   },
 });
 
@@ -70,7 +66,7 @@ const BookmarkSubtitle = styled(Text)({
   overflowX: 'hidden',
   whiteSpace: 'nowrap',
   textOverflow: 'ellipsis',
-  color: colors.greyTint3,
+  color: theme.textColorSecondary,
   marginTop: 4,
 });
 
@@ -110,7 +106,7 @@ export default (props: Props) => {
                     )}
                   </TextContainer>
                   <IconButton
-                    color={colors.macOSTitleBarButtonBackgroundActive}
+                    color={theme.textColorSecondary}
                     outline={false}
                     icon="cross-circle"
                     size={16}

desktop/plugins/public/navigation/components/NavigationInfoBox.tsx

@@ -19,6 +19,7 @@ import {
 } from 'flipper';
 import {parseURIParameters, stripQueryParameters} from '../util/uri';
 import React from 'react';
+import {theme} from 'flipper-plugin';
 
 const BOX_HEIGHT = 240;
 
@@ -81,7 +82,7 @@ const NavigationInfoBoxContainer = styled.div({
   flexGrow: 1,
   position: 'relative',
   marginBottom: 10,
-  backgroundColor: colors.white,
+  backgroundColor: theme.backgroundDefault,
   boxShadow: '1px 1px 5px rgba(0,0,0,0.1)',
 });
 
@@ -117,7 +118,7 @@ const TimelineCircle = styled.div({
   height: 18,
   top: 11,
   left: -33,
-  backgroundColor: colors.light02,
+  backgroundColor: theme.backgroundWash,
   border: `4px solid ${colors.highlight}`,
   borderRadius: '50%',
   position: 'absolute',
@@ -129,7 +130,7 @@ const TimelineMiniCircle = styled.div({
   top: 1,
   left: -30,
   borderRadius: '50%',
-  backgroundColor: colors.highlight,
+  backgroundColor: theme.textColorActive,
   position: 'absolute',
 });
 

desktop/plugins/public/navigation/components/Timeline.tsx

@@ -7,10 +7,11 @@
  * @format
  */
 
-import {colors, FlexCenter, styled} from 'flipper';
+import {FlexCenter, styled} from 'flipper';
 import {NavigationInfoBox} from './';
 import {Bookmark, NavigationEvent, URI} from '../types';
 import React, {useRef} from 'react';
+import {theme} from 'flipper-plugin';
 
 type Props = {
   bookmarks: Map<string, Bookmark>;
@@ -21,7 +22,7 @@ type Props = {
 
 const TimelineLine = styled.div({
   width: 2,
-  backgroundColor: colors.highlight,
+  backgroundColor: theme.textColorActive,
   position: 'absolute',
   top: 38,
   bottom: 0,
@@ -32,7 +33,7 @@ const TimelineContainer = styled.div({
   paddingLeft: 25,
   overflowY: 'scroll',
   flexGrow: 1,
-  backgroundColor: colors.light02,
+  backgroundColor: theme.backgroundWash,
   scrollBehavior: 'smooth',
   '&>div': {
     position: 'relative',
@@ -53,8 +54,8 @@ const NavigationEventContainer = styled.div({
 const NoData = styled(FlexCenter)({
   height: '100%',
   fontSize: 18,
-  backgroundColor: colors.macOSTitleBarBackgroundBlur,
-  color: colors.macOSTitleBarIcon,
+  backgroundColor: theme.backgroundWash,
+  color: theme.textColorSecondary,
 });
 
 export default (props: Props) => {