--- a/widget/cocoa/nsChildView.mm
+++ b/widget/cocoa/nsChildView.mm
@@ -2479,19 +2479,20 @@ nsChildView::MaybeDrawRoundedCorners(GLM
                                      LOCAL_GL_ONE, LOCAL_GL_ONE);
 }
 
 static int32_t
 FindTitlebarBottom(const nsTArray<nsIWidget::ThemeGeometry>& aThemeGeometries,
                    int32_t aWindowWidth)
 {
   int32_t titlebarBottom = 0;
-  for (uint32_t i = 0; i < aThemeGeometries.Length(); ++i) {
-    const nsIWidget::ThemeGeometry& g = aThemeGeometries[i];
-    if ((g.mType == nsNativeThemeCocoa::eThemeGeometryTypeTitlebar) &&
+  for (auto& g : aThemeGeometries) {
+    if ((g.mType == nsNativeThemeCocoa::eThemeGeometryTypeTitlebar ||
+         g.mType == nsNativeThemeCocoa::eThemeGeometryTypeVibrantTitlebarLight ||
+         g.mType == nsNativeThemeCocoa::eThemeGeometryTypeVibrantTitlebarDark) &&
         g.mRect.X() <= 0 &&
         g.mRect.XMost() >= aWindowWidth &&
         g.mRect.Y() <= 0) {
       titlebarBottom = std::max(titlebarBottom, g.mRect.YMost());
     }
   }
   return titlebarBottom;
 }
@@ -2560,18 +2561,20 @@ nsChildView::UpdateThemeGeometries(const
   [win placeFullScreenButton:[mView convertRect:DevPixelsToCocoaPoints(fullScreenButtonRect) toView:nil]];
 }
 
 static Maybe<VibrancyType>
 ThemeGeometryTypeToVibrancyType(nsITheme::ThemeGeometryType aThemeGeometryType)
 {
   switch (aThemeGeometryType) {
     case nsNativeThemeCocoa::eThemeGeometryTypeVibrancyLight:
+    case nsNativeThemeCocoa::eThemeGeometryTypeVibrantTitlebarLight:
       return Some(VibrancyType::LIGHT);
     case nsNativeThemeCocoa::eThemeGeometryTypeVibrancyDark:
+    case nsNativeThemeCocoa::eThemeGeometryTypeVibrantTitlebarDark:
       return Some(VibrancyType::DARK);
     case nsNativeThemeCocoa::eThemeGeometryTypeSheet:
       return Some(VibrancyType::SHEET);
     case nsNativeThemeCocoa::eThemeGeometryTypeTooltip:
       return Some(VibrancyType::TOOLTIP);
     case nsNativeThemeCocoa::eThemeGeometryTypeMenu:
       return Some(VibrancyType::MENU);
     case nsNativeThemeCocoa::eThemeGeometryTypeHighlightedMenuItem:

--- a/widget/cocoa/nsNativeThemeCocoa.h
+++ b/widget/cocoa/nsNativeThemeCocoa.h
@@ -33,16 +33,18 @@ public:
     eThemeGeometryTypeToolbar,
     eThemeGeometryTypeToolbox,
     eThemeGeometryTypeWindowButtons,
     eThemeGeometryTypeFullscreenButton,
     eThemeGeometryTypeMenu,
     eThemeGeometryTypeHighlightedMenuItem,
     eThemeGeometryTypeVibrancyLight,
     eThemeGeometryTypeVibrancyDark,
+    eThemeGeometryTypeVibrantTitlebarLight,
+    eThemeGeometryTypeVibrantTitlebarDark,
     eThemeGeometryTypeTooltip,
     eThemeGeometryTypeSheet,
     eThemeGeometryTypeSourceList,
     eThemeGeometryTypeSourceListSelection,
     eThemeGeometryTypeActiveSourceListSelection
   };
 
   nsNativeThemeCocoa();

--- a/widget/cocoa/nsNativeThemeCocoa.mm
+++ b/widget/cocoa/nsNativeThemeCocoa.mm
@@ -2964,17 +2964,19 @@ nsNativeThemeCocoa::DrawWidgetBackground
       DrawTabPanel(cgContext, macRect, aFrame);
       break;
 
     case NS_THEME_RESIZER:
       DrawResizer(cgContext, macRect, aFrame);
       break;
 
     case NS_THEME_MAC_VIBRANCY_LIGHT:
-    case NS_THEME_MAC_VIBRANCY_DARK: {
+    case NS_THEME_MAC_VIBRANCY_DARK:
+    case NS_THEME_MAC_VIBRANT_TITLEBAR_LIGHT:
+    case NS_THEME_MAC_VIBRANT_TITLEBAR_DARK: {
       ThemeGeometryType type = ThemeGeometryTypeForWidget(aFrame, aWidgetType);
       DrawVibrancyBackground(cgContext, macRect, aFrame, type);
       break;
     }
   }
 
   if (hidpi) {
     // Reset the base CTM.
@@ -3138,17 +3140,19 @@ nsNativeThemeCocoa::CreateWebRenderComma
         ThemeGeometryType type = ThemeGeometryTypeForWidget(aFrame, aWidgetType);
         aBuilder.PushRect(bounds, bounds, true,
                           wr::ToColorF(VibrancyFillColor(aFrame, type)));
         return true;
       }
       return false;
 
     case NS_THEME_MAC_VIBRANCY_LIGHT:
-    case NS_THEME_MAC_VIBRANCY_DARK: {
+    case NS_THEME_MAC_VIBRANCY_DARK:
+    case NS_THEME_MAC_VIBRANT_TITLEBAR_LIGHT:
+    case NS_THEME_MAC_VIBRANT_TITLEBAR_DARK: {
       ThemeGeometryType type = ThemeGeometryTypeForWidget(aFrame, aWidgetType);
       aBuilder.PushRect(bounds, bounds, true,
                         wr::ToColorF(VibrancyFillColor(aFrame, type)));
       return true;
     }
 
     case NS_THEME_TAB:
     case NS_THEME_TABPANELS:
@@ -3731,16 +3735,18 @@ nsNativeThemeCocoa::WidgetStateChanged(n
     case NS_THEME_PROGRESSCHUNK:
     case NS_THEME_PROGRESSCHUNK_VERTICAL:
     case NS_THEME_PROGRESSBAR:
     case NS_THEME_PROGRESSBAR_VERTICAL:
     case NS_THEME_METERBAR:
     case NS_THEME_METERCHUNK:
     case NS_THEME_MAC_VIBRANCY_LIGHT:
     case NS_THEME_MAC_VIBRANCY_DARK:
+    case NS_THEME_MAC_VIBRANT_TITLEBAR_LIGHT:
+    case NS_THEME_MAC_VIBRANT_TITLEBAR_DARK:
       *aShouldRepaint = false;
       return NS_OK;
   }
 
   // XXXdwh Not sure what can really be done here.  Can at least guess for
   // specific widgets that they're highly unlikely to have certain states.
   // For example, a toolbar doesn't care about any states.
   if (!aAttribute) {
@@ -3893,16 +3899,18 @@ nsNativeThemeCocoa::ThemeSupportsWidget(
               scrollFrame && scrollFrame->GetScrollbarVisibility());
     }
 
     case NS_THEME_FOCUS_OUTLINE:
       return true;
 
     case NS_THEME_MAC_VIBRANCY_LIGHT:
     case NS_THEME_MAC_VIBRANCY_DARK:
+    case NS_THEME_MAC_VIBRANT_TITLEBAR_LIGHT:
+    case NS_THEME_MAC_VIBRANT_TITLEBAR_DARK:
       return VibrancyManager::SystemSupportsVibrancy();
   }
 
   return false;
 }
 
 bool
 nsNativeThemeCocoa::WidgetIsContainer(uint8_t aWidgetType)
@@ -4000,16 +4008,18 @@ nsNativeThemeCocoa::NeedToClearBackgroun
     // If we're in a XUL tree, we don't want to clear the background behind the
     // selections below, since that would make our source list to not pick up
     // the right font smoothing background. But since we don't call this method
     // in nsTreeBodyFrame::BuildDisplayList, we never get here.
     case NS_THEME_MAC_SOURCE_LIST_SELECTION:
     case NS_THEME_MAC_ACTIVE_SOURCE_LIST_SELECTION:
     case NS_THEME_MAC_VIBRANCY_LIGHT:
     case NS_THEME_MAC_VIBRANCY_DARK:
+    case NS_THEME_MAC_VIBRANT_TITLEBAR_LIGHT:
+    case NS_THEME_MAC_VIBRANT_TITLEBAR_DARK:
     case NS_THEME_TOOLTIP:
     case NS_THEME_MENUPOPUP:
     case NS_THEME_MENUITEM:
     case NS_THEME_CHECKMENUITEM:
       return true;
     case NS_THEME_DIALOG:
       return IsWindowSheet(aFrame);
     default:
@@ -4030,16 +4040,20 @@ nsNativeThemeCocoa::ThemeGeometryTypeFor
     case NS_THEME_WINDOW_BUTTON_BOX:
       return eThemeGeometryTypeWindowButtons;
     case NS_THEME_MAC_FULLSCREEN_BUTTON:
       return eThemeGeometryTypeFullscreenButton;
     case NS_THEME_MAC_VIBRANCY_LIGHT:
       return eThemeGeometryTypeVibrancyLight;
     case NS_THEME_MAC_VIBRANCY_DARK:
       return eThemeGeometryTypeVibrancyDark;
+    case NS_THEME_MAC_VIBRANT_TITLEBAR_LIGHT:
+      return eThemeGeometryTypeVibrantTitlebarLight;
+    case NS_THEME_MAC_VIBRANT_TITLEBAR_DARK:
+      return eThemeGeometryTypeVibrantTitlebarDark;
     case NS_THEME_TOOLTIP:
       return eThemeGeometryTypeTooltip;
     case NS_THEME_MENUPOPUP:
       return eThemeGeometryTypeMenu;
     case NS_THEME_MENUITEM:
     case NS_THEME_CHECKMENUITEM: {
       EventStates eventState = GetContentState(aFrame, aWidgetType);
       bool isDisabled = IsDisabled(aFrame, eventState);