--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -9,18 +9,16 @@
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 @namespace html url("http://www.w3.org/1999/xhtml");
 @namespace svg url("http://www.w3.org/2000/svg");
 
 %include ../shared/browser.inc.css
 
 :root {
-  --tabs-toolbar-color: #333;
-
   --toolbarbutton-vertical-text-padding: calc(var(--toolbarbutton-inner-padding) + 1px);
 
 %ifdef MOZ_PHOTON_THEME
   --toolbarbutton-border-radius: 4px;
 %else
   --space-above-tabbar: 9px;
 
   --toolbarbutton-border-radius: 3px;
@@ -117,17 +115,21 @@ toolbar:-moz-lwtheme {
 
 .titlebar-placeholder[type="fullscreen-button"],
 #titlebar-secondary-buttonbox {
   margin-right: 7px;
   margin-left: 7px;
 }
 
 #main-window:not(:-moz-lwtheme) > #titlebar {
+%ifdef MOZ_PHOTON_THEME
+  background-color: #232323;
+%else
   -moz-appearance: -moz-window-titlebar;
+%endif
 }
 
 #main-window:not([tabsintitlebar]) > #titlebar {
   height: 22px; /* The native titlebar on OS X is 22px tall. */
 }
 
 /**
  * For tabs in titlebar on OS X, we stretch the titlebar down so that the
@@ -157,19 +159,21 @@ toolbar:-moz-lwtheme {
 %endif
 }
 
 #main-window:not([tabsintitlebar]) > #titlebar > #titlebar-content > #titlebar-buttonbox-container,
 #main-window:not([tabsintitlebar]) > #titlebar > #titlebar-content > #titlebar-secondary-buttonbox > #titlebar-fullscreen-button {
   margin-top: 3px;
 }
 
+%ifndef MOZ_PHOTON_THEME
 #main-window[customize-entered] > #titlebar {
   -moz-appearance: none;
 }
+%endif
 
 /** End titlebar **/
 
 #main-window[chromehidden~="toolbar"][chromehidden~="location"][chromehidden~="directories"] {
   border-top: 1px solid rgba(0,0,0,0.65);
 }
 
 #navigator-toolbox > toolbar:not(#TabsToolbar):not(#nav-bar):not(:-moz-lwtheme) {
@@ -1519,17 +1523,21 @@ toolbarbutton.chevron > .toolbarbutton-m
 .tabbrowser-tab,
 .tabs-newtab-button {
   font: message-box;
   border: none;
 }
 
 .tabbrowser-tab[visuallyselected=true]:not(:-moz-lwtheme) {
   /* overriding tabbox.css */
+%ifdef MOZ_PHOTON_THEME
+  color: hsl(240, 5%, 5%);
+%else
   color: inherit;
+%endif
 }
 
 .tabbrowser-tab[visuallyselected=true] {
   /* overriding tabbox.css */
   text-shadow: inherit;
 }
 
 .tabs-newtab-button > .toolbarbutton-icon {
@@ -1551,20 +1559,27 @@ toolbarbutton.chevron > .toolbarbutton-m
 }
 
 #main-window:not([customizing]) #navigator-toolbox[inFullscreen] > #TabsToolbar:not(:-moz-lwtheme),
 #main-window:not(:-moz-any([customizing],[tabsintitlebar])) #navigator-toolbox > #TabsToolbar:not(:-moz-lwtheme) {
   -moz-appearance: toolbar;
 }
 
 #TabsToolbar:not(:-moz-lwtheme) {
-  color: var(--tabs-toolbar-color);
+  color: #333;
   text-shadow: @loweredShadow@;
 }
 
+%ifdef MOZ_PHOTON_THEME
+:root[tabsintitlebar] #TabsToolbar:not(:-moz-lwtheme) {
+  color: hsl(240, 9%, 98%);
+  text-shadow: none;
+}
+%endif
+
 %ifndef MOZ_PHOTON_THEME
 #navigator-toolbox[inFullscreen] > #TabsToolbar {
   padding-top: var(--space-above-tabbar);
 }
 %endif
 #tabbrowser-tabs {
   -moz-box-align: stretch;
 }

--- a/browser/themes/shared/compacttheme.inc.css
+++ b/browser/themes/shared/compacttheme.inc.css
@@ -27,17 +27,16 @@
   --chrome-nav-bar-separator-color: rgba(0,0,0,.2);
   --chrome-nav-buttons-background: #252C33;
   --chrome-nav-buttons-hover-background: #1B2127;
   --chrome-nav-bar-controls-border-color: #1D2328;
   --chrome-selection-color: #fff;
   --chrome-selection-background-color: #5675B9;
 
   /* Tabs */
-  --tabs-toolbar-color: #F5F7FA;
   --tab-background-color: #272b35;
   --tab-hover-background-color: #07090a;
   --tab-selection-color: #f5f7fa;
   --tab-selection-background-color: #5675B9;
   --tab-selection-box-shadow: none;
   --pinned-tab-glow: radial-gradient(22px at center calc(100% - 2px), rgba(76,158,217,0.9) 13%, rgba(0,0,0,0.4) 16%, transparent 70%);
 
   /* Url and search bars */