From 39a4cc22b10d1225e083e258ef3f14d778a6da98 Mon Sep 17 00:00:00 2001
From: Lorenzo Blasa <lblasa@meta.com>
Date: Tue, 7 Feb 2023 07:58:12 -0800
Subject: [PATCH] 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
---
 .../plugins/public/ui-debugger/components/Tree.tsx   |  2 +-
 .../ui-debugger/components/sidebar/Inspector.tsx     | 12 ++++++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/desktop/plugins/public/ui-debugger/components/Tree.tsx b/desktop/plugins/public/ui-debugger/components/Tree.tsx
index ddb4e2997..be083aff5 100644
--- a/desktop/plugins/public/ui-debugger/components/Tree.tsx
+++ b/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: {
diff --git a/desktop/plugins/public/ui-debugger/components/sidebar/Inspector.tsx b/desktop/plugins/public/ui-debugger/components/sidebar/Inspector.tsx
index f92aea5fa..1df3e280b 100644
--- a/desktop/plugins/public/ui-debugger/components/sidebar/Inspector.tsx
+++ b/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>
           }>