Skip to content

Fix inactive Modal title bar contrast #16434

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
anuagragith wants to merge 2 commits into
base: main
Choose a base branch
from
+114 −0
Open

Fix inactive Modal title bar contrast #16434

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
11a97ff
Change files
Sep 8, 2026
046a5ba
Fix inactive Modal title bar contrast
Sep 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions change/react-native-windows-580ee5e2-c630-4ce8-a1a3-14ee5a18a571.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "prerelease",
"comment": "Fix Modal title bar contrast when the native window is inactive",
"packageName": "react-native-windows",
"email": "anuagra@microsoft.com",
"dependentChangeType": "patch"
}
107 changes: 107 additions & 0 deletions vnext/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,22 @@

namespace winrt::Microsoft::ReactNative::Composition::implementation {

static winrt::Windows::UI::Color CompositeOverOpaqueBackground(
const winrt::Windows::UI::Color &foreground,
const winrt::Windows::UI::Color &background) noexcept {
const uint32_t alpha = foreground.A;
const uint32_t inverseAlpha = 0xFF - alpha;
const auto compositeChannel = [alpha, inverseAlpha](uint8_t foregroundChannel, uint8_t backgroundChannel) {
return static_cast<uint8_t>((foregroundChannel * alpha + backgroundChannel * inverseAlpha + 0x7F) / 0xFF);
};

return {
0xFF,
compositeChannel(foreground.R, background.R),
compositeChannel(foreground.G, background.G),
compositeChannel(foreground.B, background.B)};
}

struct ModalHostState
: winrt::implements<ModalHostState, winrt::Microsoft::ReactNative::Composition::IPortalStateData> {
ModalHostState(winrt::Microsoft::ReactNative::LayoutConstraints layoutConstraints, float scaleFactor)
Expand All @@ -36,6 +52,8 @@ struct ModalHostState
struct ModalHostView : public winrt::implements<ModalHostView, winrt::Windows::Foundation::IInspectable>,
::Microsoft::ReactNativeSpecs::BaseModalHostView<ModalHostView> {
~ModalHostView() {
UnsubscribeFromThemeChanges();

if (m_popUp) {
// Unregister closing event handler
if (m_appWindowClosingToken) {
Expand Down Expand Up @@ -171,16 +189,55 @@ struct ModalHostView : public winrt::implements<ModalHostView, winrt::Windows::F

private:
void OnMounted(const winrt::Microsoft::ReactNative::ComponentView &view) noexcept {
SubscribeToThemeChanges(view);
m_mounted = true;
if (m_visible) {
QueueShow(view);
}
}

void OnUnmounted(const winrt::Microsoft::ReactNative::ComponentView & /*view*/) noexcept {
UnsubscribeFromThemeChanges();
m_mounted = false;
}

void SubscribeToThemeChanges(const winrt::Microsoft::ReactNative::ComponentView &view) noexcept {
UnsubscribeFromThemeChanges();

auto themeSource = view.Parent().as<winrt::Microsoft::ReactNative::Composition::ComponentView>();
m_themeSource = winrt::make_weak(themeSource);
m_theme = themeSource.Theme();
const auto themeSubscriptionGeneration = m_themeSubscriptionGeneration;
Comment on lines +208 to +210
m_themeChangedToken = themeSource.ThemeChanged([wkThis = get_weak(), themeSubscriptionGeneration](
const winrt::Windows::Foundation::IInspectable &sender,
const winrt::Windows::Foundation::IInspectable & /*args*/) {
auto theme = sender.as<winrt::Microsoft::ReactNative::Composition::ComponentView>().Theme();
if (auto strongThis = wkThis.get()) {
strongThis->m_reactContext.UIDispatcher().Post([wkThis, theme, themeSubscriptionGeneration]() {
if (auto strongThis = wkThis.get()) {
if (strongThis->m_themeSubscriptionGeneration != themeSubscriptionGeneration) {
return;
}
strongThis->m_theme = theme;
strongThis->UpdateTitleBarColors();
}
});
}
});
}

void UnsubscribeFromThemeChanges() noexcept {
if (m_themeChangedToken) {
if (auto themeSource = m_themeSource.get()) {
themeSource.ThemeChanged(m_themeChangedToken);
}
m_themeChangedToken = {};
}
m_themeSource = {};
m_theme = nullptr;
++m_themeSubscriptionGeneration;
}

void AdjustWindowSize(const winrt::Microsoft::ReactNative::LayoutMetrics &layoutMetrics) noexcept {
if (!m_rnWindow) {
return;
Expand Down Expand Up @@ -318,6 +375,52 @@ struct ModalHostView : public winrt::implements<ModalHostView, winrt::Windows::F

titleBar.IconShowOptions(winrt::Microsoft::UI::Windowing::IconShowOptions::HideIconAndSystemMenu);
}

UpdateTitleBarColors();
}

void UpdateTitleBarColors() noexcept {
if (!m_rnWindow || !m_theme || !m_localProps || m_localProps->hideTitleBar.value_or(false) ||
!winrt::Microsoft::UI::Windowing::AppWindowTitleBar::IsCustomizationSupported()) {
return;
}

winrt::Windows::UI::Color background;
winrt::Windows::UI::Color activeForeground;
winrt::Windows::UI::Color inactiveForeground;
winrt::Windows::UI::Color buttonHoverBackground;
winrt::Windows::UI::Color buttonPressedBackground;
winrt::Windows::UI::Color buttonPressedForeground;
if (!m_theme.TryGetPlatformColor(L"SolidBackgroundFillColorBase", background) ||
!m_theme.TryGetPlatformColor(L"TextFillColorPrimary", activeForeground) ||
!m_theme.TryGetPlatformColor(L"TextFillColorSecondary", inactiveForeground) ||
!m_theme.TryGetPlatformColor(L"ControlFillColorSecondary", buttonHoverBackground) ||
!m_theme.TryGetPlatformColor(L"ControlFillColorTertiary", buttonPressedBackground) ||
!m_theme.TryGetPlatformColor(L"ButtonForegroundPressed", buttonPressedForeground)) {
return;
}

// AppWindowTitleBar ignores alpha, so resolve RNW's translucent semantic text colors to opaque colors first.
background.A = 0xFF;
activeForeground = CompositeOverOpaqueBackground(activeForeground, background);
inactiveForeground = CompositeOverOpaqueBackground(inactiveForeground, background);
buttonHoverBackground = CompositeOverOpaqueBackground(buttonHoverBackground, background);
buttonPressedBackground = CompositeOverOpaqueBackground(buttonPressedBackground, background);
buttonPressedForeground = CompositeOverOpaqueBackground(buttonPressedForeground, buttonPressedBackground);

auto titleBar = m_rnWindow.AppWindow().TitleBar();
titleBar.ForegroundColor(activeForeground);
titleBar.BackgroundColor(background);
titleBar.InactiveForegroundColor(inactiveForeground);
titleBar.InactiveBackgroundColor(background);
titleBar.ButtonForegroundColor(activeForeground);
titleBar.ButtonBackgroundColor(background);
titleBar.ButtonHoverForegroundColor(activeForeground);
titleBar.ButtonHoverBackgroundColor(buttonHoverBackground);
titleBar.ButtonPressedForegroundColor(buttonPressedForeground);
titleBar.ButtonPressedBackgroundColor(buttonPressedBackground);
titleBar.ButtonInactiveForegroundColor(inactiveForeground);
titleBar.ButtonInactiveBackgroundColor(background);
}

// creates a new modal window
Expand Down Expand Up @@ -453,6 +556,10 @@ struct ModalHostView : public winrt::implements<ModalHostView, winrt::Windows::F
winrt::Microsoft::ReactNative::ReactNativeWindow m_rnWindow{nullptr};
winrt::Microsoft::UI::Content::DesktopPopupSiteBridge m_popUp{nullptr};
winrt::event_token m_appWindowClosingToken;
winrt::weak_ref<winrt::Microsoft::ReactNative::Composition::ComponentView> m_themeSource;
winrt::event_token m_themeChangedToken;
uint64_t m_themeSubscriptionGeneration{0};
winrt::Microsoft::ReactNative::Composition::Theme m_theme{nullptr};
winrt::com_ptr<::Microsoft::ReactNativeSpecs::ModalHostViewProps> m_localProps{nullptr};
};

Expand Down
Loading