diff --git a/browser/themes/linux/browser.css b/browser/themes/linux/browser.css index d584bd006698..47bbb782805c 100644 --- a/browser/themes/linux/browser.css +++ b/browser/themes/linux/browser.css @@ -8,11 +8,39 @@ @namespace html url("http://www.w3.org/1999/xhtml"); /** - * We intentionally do not include browser-custom-colors.css, - * instead choosing to fall back to system colours and transparencies - * in order to accomodate the wider variety of system themes on that - * platform. + * We intentionally do not include browser-custom-colors.css, instead choosing to + * fall back to system colors and transparencies in order to accommodate the + * wider variety of GTK system themes. + * + * We still want to do some of the tweaks that browser-custom-colors does, like + * disabling the toolbar field border and backgrounds. */ +@media not (prefers-contrast) { + :root:not(:-moz-lwtheme) { + --toolbar-field-border-color: transparent; + + /* These colors don't exactly match the default dark color that buttons and + * textfields have in Adwaita[1][2], which would end up computing to + * rgba(0, 0, 0, .8 * .1) and rgba(255, 255, 255, 1 * .1) for light and + * dark, respectively. + * + * Instead, for the light theme we use .05 alpha, to increase the contrast + * of the text. For the dark theme, we use a darker background, which works + * because the toolbar background applies some white unconditionally, and + * matches what our default themes do in other platforms too. + * + * [1]: https://gitlab.gnome.org/GNOME/libadwaita/-/blob/42c04e038f19b2123560da662692d65480a67931/src/stylesheet/widgets/_buttons.scss#L1 + * [2]: https://gitlab.gnome.org/GNOME/libadwaita/-/blob/42c04e038f19b2123560da662692d65480a67931/src/stylesheet/widgets/_entries.scss#L9 + */ + --toolbar-field-background-color: light-dark(rgba(0, 0, 0, .05), rgba(0, 0, 0, .3)); + --toolbar-field-color: inherit; + + @media (-moz-gtk-theme-family) and (prefers-color-scheme: light) { + /* Use a slightly lighter box bgcolor for known themes */ + --urlbar-box-bgcolor: #fafafa; + } + } +} #menubar-items { flex-direction: column; /* for flex hack */ @@ -76,9 +104,12 @@ } #nav-bar:not([tabs-hidden="true"]) { - box-shadow: 0 calc(-1 * var(--tabs-navbar-shadow-size)) 0 var(--lwt-tabs-border-color, rgba(0,0,0,.3)); /* This is needed for some toolbar button animations. Gross :( */ position: relative; + box-shadow: 0 calc(-1 * var(--tabs-navbar-shadow-size)) 0 light-dark(rgba(0,0,0,.1), rgba(0,0,0,.3)); + &:-moz-lwtheme { + box-shadow: 0 calc(-1 * var(--tabs-navbar-shadow-size)) 0 var(--lwt-tabs-border-color, rgba(0,0,0,.3)); + } } /* Bookmark menus */ diff --git a/modules/libpref/init/StaticPrefList.yaml b/modules/libpref/init/StaticPrefList.yaml index 3b4556cae57c..677a9330577e 100644 --- a/modules/libpref/init/StaticPrefList.yaml +++ b/modules/libpref/init/StaticPrefList.yaml @@ -15521,6 +15521,12 @@ value: true mirror: always +# Whether libadwaita colors are used rather than the default ones. +- name: widget.gtk.libadwaita-colors.enabled + type: bool + value: true + mirror: always + # Whether we enable rounded bottom corners on GTK by default. # # The implementation is a bit hacky (see details in bug 1850827) so behind a diff --git a/widget/gtk/nsLookAndFeel.cpp b/widget/gtk/nsLookAndFeel.cpp index fdfaf24bb6be..04213c38f0f5 100644 --- a/widget/gtk/nsLookAndFeel.cpp +++ b/widget/gtk/nsLookAndFeel.cpp @@ -530,14 +530,18 @@ nsresult nsLookAndFeel::PerThemeData::GetColor(ColorID aID, case ColorID::Background: // desktop background case ColorID::Window: case ColorID::Windowframe: - case ColorID::MozDialog: case ColorID::MozCombobox: aColor = mWindow.mBg; break; case ColorID::Windowtext: - case ColorID::MozDialogtext: aColor = mWindow.mFg; break; + case ColorID::MozDialog: + aColor = mDialog.mBg; + break; + case ColorID::MozDialogtext: + aColor = mDialog.mFg; + break; case ColorID::IMESelectedRawTextBackground: case ColorID::IMESelectedConvertedTextBackground: case ColorID::Highlight: // preference selected item, @@ -692,14 +696,14 @@ nsresult nsLookAndFeel::PerThemeData::GetColor(ColorID aID, // 3-D highlighted edge color case ColorID::Threedhighlight: // 3-D highlighted outer edge color - aColor = mFrameOuterLightBorder; + aColor = mThreeDHighlight; break; case ColorID::Buttonshadow: // 3-D shadow edge color case ColorID::Threedshadow: // 3-D shadow inner edge color - aColor = mFrameInnerDarkBorder; + aColor = mThreeDShadow; break; case ColorID::Buttonborder: aColor = mButtonBorder; @@ -1305,11 +1309,70 @@ bool nsLookAndFeel::ConfigureAltTheme() { return false; } +// We override some adwaita colors from GTK3 to LibAdwaita, see: +// https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/named-colors.html +void nsLookAndFeel::MaybeApplyAdwaitaOverrides() { + auto& dark = mSystemTheme.mIsDark ? mSystemTheme : mAltTheme; + auto& light = mSystemTheme.mIsDark ? mAltTheme : mSystemTheme; + + // Unconditional special case for Adwaita-dark: In GTK3 we don't have more + // proper accent colors, so we use the selected background colors. Those + // colors, however, don't have much contrast in dark mode (see bug 1741293). + if (dark.mFamily == ThemeFamily::Adwaita) { + dark.mAccent = {NS_RGB(0x35, 0x84, 0xe4), NS_RGB(0xff, 0xff, 0xff)}; + dark.mSelectedText = dark.mAccent; + } + + if (light.mFamily == ThemeFamily::Adwaita) { + light.mAccent = {NS_RGB(0x35, 0x84, 0xe4), NS_RGB(0xff, 0xff, 0xff)}; + light.mSelectedText = light.mAccent; + } + + if (!StaticPrefs::widget_gtk_libadwaita_colors_enabled()) { + return; + } + + if (light.mFamily == ThemeFamily::Adwaita || + light.mFamily == ThemeFamily::Yaru) { + // #323232 is rgba(0,0,0,.8) over #fafafa. + light.mWindow = + light.mDialog = {NS_RGB(0xfa, 0xfa, 0xfa), NS_RGB(0x32, 0x32, 0x32)}; + light.mField = {NS_RGB(0xff, 0xff, 0xff), NS_RGB(0x32, 0x32, 0x32)}; + + // We use the sidebar colors for the headerbar in light mode background + // because it creates much better contrast. GTK headerbar colors are white, + // and meant to "blend" with the contents otherwise. + // #2f2f2f is rgba(0,0,0,.8) over #ebebeb. + light.mSidebar = light.mHeaderBar = + light.mTitlebar = {NS_RGB(0xeb, 0xeb, 0xeb), NS_RGB(0x2f, 0x2f, 0x2f)}; + light.mHeaderBarInactive = light.mTitlebarInactive = { + NS_RGB(0xf2, 0xf2, 0xf2), NS_RGB(0x98, 0x98, 0x98)}; + light.mThreeDShadow = NS_RGB(0xe0, 0xe0, 0xe0); + light.mSidebarBorder = NS_RGBA(0, 0, 0, 18); + } + + if (dark.mFamily == ThemeFamily::Adwaita || + dark.mFamily == ThemeFamily::Yaru) { + dark.mWindow = {NS_RGB(0x24, 0x24, 0x24), NS_RGB(0xff, 0xff, 0xff)}; + dark.mDialog = {NS_RGB(0x38, 0x38, 0x38), NS_RGB(0xff, 0xff, 0xff)}; + dark.mField = {NS_RGB(0x3a, 0x3a, 0x3a), NS_RGB(0xff, 0xff, 0xff)}; + dark.mSidebar = dark.mHeaderBar = + dark.mTitlebar = {NS_RGB(0x30, 0x30, 0x30), NS_RGB(0xff, 0xff, 0xff)}; + dark.mHeaderBarInactive = dark.mTitlebarInactive = { + NS_RGB(0x24, 0x24, 0x24), NS_RGB(0x92, 0x92, 0x92)}; + // headerbar_shade_color + dark.mThreeDShadow = NS_RGB(0x1f, 0x1f, 0x1f); + dark.mSidebarBorder = NS_RGBA(0, 0, 0, 92); + } +} + void nsLookAndFeel::ConfigureAndInitializeAltTheme() { const bool fellBackToDefaultTheme = !ConfigureAltTheme(); mAltTheme.Init(); + MaybeApplyAdwaitaOverrides(); + // Some of the alt theme colors we can grab from the system theme, if we fell // back to the default light / dark themes. if (fellBackToDefaultTheme) { @@ -1329,20 +1392,6 @@ void nsLookAndFeel::ConfigureAndInitializeAltTheme() { } } - // Special case for Adwaita: In GTK3 we don't have more proper accent colors, - // so we use the selected background colors. Those colors, however, don't have - // much contrast in dark mode (see bug 1741293). We know, however, that GTK4 - // uses the light accent color for the dark theme, see: - // - // https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/named-colors.html#accent-colors - // - // So we manually do that. - if (mSystemTheme.mFamily == ThemeFamily::Adwaita) { - auto& dark = mSystemTheme.mIsDark ? mSystemTheme : mAltTheme; - auto& light = mSystemTheme.mIsDark ? mAltTheme : mSystemTheme; - dark.mAccent = light.mAccent; - } - // Right now we're using the opposite color-scheme theme, make sure to record // it. mSystemThemeOverridden = true; @@ -1843,9 +1892,7 @@ void nsLookAndFeel::PerThemeData::Init() { // Window colors style = GetStyleContext(MOZ_GTK_WINDOW); - - mWindow.mFg = GetTextColor(style); - mWindow.mBg = GetBackgroundColor(style, mWindow.mFg); + mWindow = mDialog = GetColorPair(style); gtk_style_context_get_border_color(style, GTK_STATE_FLAG_NORMAL, &color); mMozWindowActiveBorder = GDK_RGBA_TO_NS_RGBA(color); @@ -2106,12 +2153,12 @@ void nsLookAndFeel::PerThemeData::Init() { // node. style = GetStyleContext(MOZ_GTK_FRAME_BORDER); bool themeUsesColors = - GetBorderColors(style, &mFrameOuterLightBorder, &mFrameInnerDarkBorder); + GetBorderColors(style, &mThreeDHighlight, &mThreeDShadow); if (!themeUsesColors) { style = GetStyleContext(MOZ_GTK_FRAME); - GetBorderColors(style, &mFrameOuterLightBorder, &mFrameInnerDarkBorder); + GetBorderColors(style, &mThreeDHighlight, &mThreeDShadow); } - mSidebarBorder = mFrameInnerDarkBorder; + mSidebarBorder = mThreeDShadow; // Some themes have a unified menu bar, and support window dragging on it gboolean supports_menubar_drag = FALSE; diff --git a/widget/gtk/nsLookAndFeel.h b/widget/gtk/nsLookAndFeel.h index 3bc21c45ca02..f27ea8e4f822 100644 --- a/widget/gtk/nsLookAndFeel.h +++ b/widget/gtk/nsLookAndFeel.h @@ -93,8 +93,8 @@ class nsLookAndFeel final : public nsXPLookAndFeel { ColorPair mButtonHover; ColorPair mButtonActive; nscolor mButtonBorder = kBlack; - nscolor mFrameOuterLightBorder = kBlack; - nscolor mFrameInnerDarkBorder = kBlack; + nscolor mThreeDHighlight = kBlack; + nscolor mThreeDShadow = kBlack; nscolor mOddCellBackground = kWhite; nscolor mNativeHyperLinkText = kBlack; nscolor mNativeVisitedHyperLinkText = kBlack; @@ -104,6 +104,7 @@ class nsLookAndFeel final : public nsXPLookAndFeel { nscolor mComboBoxText = kBlack; ColorPair mField; ColorPair mWindow; + ColorPair mDialog; ColorPair mSidebar; nscolor mSidebarBorder = kBlack; @@ -195,6 +196,7 @@ class nsLookAndFeel final : public nsXPLookAndFeel { bool ConfigureAltTheme(); void ConfigureAndInitializeAltTheme(); void ConfigureFinalEffectiveTheme(); + void MaybeApplyAdwaitaOverrides(); }; #endif diff --git a/widget/nsXPLookAndFeel.cpp b/widget/nsXPLookAndFeel.cpp index 26e69928b699..5c99ea0e7634 100644 --- a/widget/nsXPLookAndFeel.cpp +++ b/widget/nsXPLookAndFeel.cpp @@ -500,6 +500,8 @@ static constexpr struct { // Affects zoom settings which includes text and full zoom. {"browser.display.os-zoom-behavior"_ns, widget::ThemeChangeKind::StyleAndLayout}, + // This affects system colors on Linux. + {"widget.gtk.libadwaita-colors.enabled"_ns, widget::ThemeChangeKind::Style}, // This affects not only the media query, but also the native theme, so we // need to re-layout. {"browser.theme.toolbar-theme"_ns, widget::ThemeChangeKind::AllBits},