diff --git a/ui/src/assets/widgets/button.scss b/ui/src/assets/widgets/button.scss
index bd6d44b183..d72709d73c 100644
--- a/ui/src/assets/widgets/button.scss
+++ b/ui/src/assets/widgets/button.scss
@@ -24,6 +24,7 @@
   padding: 4px 8px;
   white-space: nowrap;
   min-width: max-content;
+  color: white;
 
   & > .pf-left-icon {
     float: left;
@@ -64,6 +65,7 @@
 
   // Remove default background in minimal mode, showing only the text
   &.pf-minimal {
+    color: inherit;
     background: $pf-minimal-background;
 
     &:hover {
diff --git a/ui/src/assets/widgets/menu.scss b/ui/src/assets/widgets/menu.scss
index 5bc6a9f558..929d699c04 100644
--- a/ui/src/assets/widgets/menu.scss
+++ b/ui/src/assets/widgets/menu.scss
@@ -31,7 +31,6 @@
     cursor: pointer;
 
     background: $pf-minimal-background;
-    color: $pf-minimal-foreground;
     transition: background $pf-anim-timing;
 
     & > .material-icons {
diff --git a/ui/src/assets/widgets/popup.scss b/ui/src/assets/widgets/popup.scss
index a95a44b269..30bfae0c27 100644
--- a/ui/src/assets/widgets/popup.scss
+++ b/ui/src/assets/widgets/popup.scss
@@ -21,6 +21,7 @@
 
 .pf-popup {
   background-color: var(--alt-background-color);
+  color: var(--main-foreground-color);
   border: solid 1px $pf-colour-thin-border;
   border-radius: $pf-border-radius;
   box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.2);
diff --git a/ui/src/assets/widgets/select.scss b/ui/src/assets/widgets/select.scss
index c054c34b70..451070a12b 100644
--- a/ui/src/assets/widgets/select.scss
+++ b/ui/src/assets/widgets/select.scss
@@ -21,13 +21,14 @@
   font-size: inherit;
   outline: none; // Disable the default outline
   border: none; // Disable the default border
-  border-bottom: solid 1px $pf-minimal-foreground; // Thin underline
+  border-bottom: solid 1px var(--main-foreground-color); // Thin underline
   background: none;
   transition: border $pf-anim-timing, box-shadow $pf-anim-timing,
     background $pf-anim-timing;
   // Round only the top corners to avoid rounding the edges of the underline
   border-radius: $pf-border-radius $pf-border-radius 0 0;
   cursor: pointer;
+  color: inherit;
 
   // Very opinionated min width for a select input
   // ... any smaller and it stops looking like a select input!
diff --git a/ui/src/assets/widgets/text_input.scss b/ui/src/assets/widgets/text_input.scss
index 40c4b6827d..307a974e1b 100644
--- a/ui/src/assets/widgets/text_input.scss
+++ b/ui/src/assets/widgets/text_input.scss
@@ -19,7 +19,7 @@
   font-size: inherit;
   outline: none; // Disable the default outline
   border: none; // Disable the default border
-  border-bottom: solid 1px $pf-minimal-foreground; // Thin underline
+  border-bottom: solid 1px var(--main-foreground-color); // Thin underline
   background: none;
   transition: border $pf-anim-timing, box-shadow $pf-anim-timing,
     background $pf-anim-timing;
diff --git a/ui/src/frontend/widgets/popup.ts b/ui/src/frontend/widgets/popup.ts
index b258a115a3..4fd51df9a0 100644
--- a/ui/src/frontend/widgets/popup.ts
+++ b/ui/src/frontend/widgets/popup.ts
@@ -140,7 +140,7 @@ export class Popup implements m.ClassComponent<PopupAttrs> {
     } = attrs;
 
     const portalAttrs: PortalAttrs = {
-      className: 'pf-popup-portal',
+      className: 'perfetto pf-popup-portal',
       onBeforeContentMount: (dom: Element): MountOptions => {
         // Check to see if dom is a descendant of a popup
         // If so, get the popup's "container" and put it in there instead