Dark mode support

Summary:
This change addresses some obvious issues which made the ui-debugger unusable with dark mode on.

There may more things that need changing, but at the very least this should be a good place to start.

Reviewed By: fabiomassimo

Differential Revision: D43083218

fbshipit-source-id: 8e4338b79178d3a0f05f9bcaffa2fc6f35eb0e21

desktop/plugins/public/ui-debugger/components/Tree.tsx

@@ -348,7 +348,7 @@ const TreeItemRow = styled.li<{
     ? 'rgba(255,0,0,.3)'
     : isSelected
     ? theme.selectionBackgroundColor
-    : theme.white,
+    : theme.backgroundDefault,
 }));
 
 function ExpandedIconOrSpace(props: {

desktop/plugins/public/ui-debugger/components/sidebar/Inspector.tsx

@@ -10,7 +10,7 @@
 import React from 'react';
 // eslint-disable-next-line rulesdir/no-restricted-imports-clone
 import {Glyph} from 'flipper';
-import {Layout, Tab, Tabs} from 'flipper-plugin';
+import {Layout, Tab, Tabs, theme} from 'flipper-plugin';
 import {Metadata, MetadataId, UINode} from '../../types';
 import {IdentityInspector} from './inspector/IdentityInspector';
 import {AttributesInspector} from './inspector/AttributesInspector';
@@ -33,7 +33,7 @@ export const Inspector: React.FC<Props> = ({node, metadata}) => {
           tab={
             <Tooltip title="Identity">
               <Layout.Horizontal center>
-                <Glyph name="badge" size={16} />
+                <Glyph name="badge" size={16} color={theme.primaryColor} />
               </Layout.Horizontal>
             </Tooltip>
           }>
@@ -44,7 +44,7 @@ export const Inspector: React.FC<Props> = ({node, metadata}) => {
           tab={
             <Tooltip title="Attributes">
               <Layout.Horizontal center>
-                <Glyph name="data-table" size={16} />
+                <Glyph name="data-table" size={16} color={theme.primaryColor} />
               </Layout.Horizontal>
             </Tooltip>
           }>
@@ -58,7 +58,11 @@ export const Inspector: React.FC<Props> = ({node, metadata}) => {
           tab={
             <Tooltip title="Layout">
               <Layout.Horizontal center>
-                <Glyph name="square-ruler" size={16} />
+                <Glyph
+                  name="square-ruler"
+                  size={16}
+                  color={theme.primaryColor}
+                />
               </Layout.Horizontal>
             </Tooltip>
           }>