diff --git a/browser/components/newtab/content-src/styles/_variables.scss b/browser/components/newtab/content-src/styles/_variables.scss index 3438118fac6b..07c6de1d8135 100644 --- a/browser/components/newtab/content-src/styles/_variables.scss +++ b/browser/components/newtab/content-src/styles/_variables.scss @@ -102,11 +102,15 @@ $newtab-background-primary-text-color: #151515; $newtab-background-darktheme-primary-text-color: #CDCDD4; $newtab-wordmark-default-color: #20123A; -// Matching proton in-content colors $in-content-page-color: rgb(21, 20, 26); $in-content-page-color-dark: rgb(251, 251, 254); -$in-content-page-background: $white; -$in-content-page-background-dark: rgb(28, 27, 34); + +// These colors should match the colors in the default themes +// (toolkit/mozapps/extensions/...). Note that they could get replaced by other +// themes. The color set in --tabpanel-background-color (tabs.inc.css) should +// match these colors here to avoid flashing. +$in-content-page-background: #F9F9FB; +$in-content-page-background-dark: #2A2A2E; $newtab-card-primary-text-color: #20123A; $newtab-card-darktheme-primary-text-color: #E0E0E6; diff --git a/browser/components/newtab/css/activity-stream-linux.css b/browser/components/newtab/css/activity-stream-linux.css index ddde28506866..cd325e4a18cc 100644 --- a/browser/components/newtab/css/activity-stream-linux.css +++ b/browser/components/newtab/css/activity-stream-linux.css @@ -28,7 +28,7 @@ input { display: none !important; } body { - --newtab-background-color: #FFF; + --newtab-background-color: #F9F9FB; --newtab-border-primary-color: #B1B1B3; --newtab-border-secondary-color: #D7D7DB; --newtab-element-active-color: rgba(215, 215, 219, 0.6); @@ -110,7 +110,7 @@ body { --newtab-card-second-shadow: rgba(29, 17, 51, 0.12); --newtab-wordmark-color: #20123A; } body[lwt-newtab-brighttext] { - --newtab-background-color: #1c1b22; + --newtab-background-color: #2A2A2E; --newtab-border-primary-color: rgba(249, 249, 250, 0.8); --newtab-border-secondary-color: rgba(249, 249, 250, 0.1); --newtab-button-primary-color: #0060DF; diff --git a/browser/components/newtab/css/activity-stream-mac.css b/browser/components/newtab/css/activity-stream-mac.css index efa011d859de..8f0e7f232492 100644 --- a/browser/components/newtab/css/activity-stream-mac.css +++ b/browser/components/newtab/css/activity-stream-mac.css @@ -31,7 +31,7 @@ input { display: none !important; } body { - --newtab-background-color: #FFF; + --newtab-background-color: #F9F9FB; --newtab-border-primary-color: #B1B1B3; --newtab-border-secondary-color: #D7D7DB; --newtab-element-active-color: rgba(215, 215, 219, 0.6); @@ -113,7 +113,7 @@ body { --newtab-card-second-shadow: rgba(29, 17, 51, 0.12); --newtab-wordmark-color: #20123A; } body[lwt-newtab-brighttext] { - --newtab-background-color: #1c1b22; + --newtab-background-color: #2A2A2E; --newtab-border-primary-color: rgba(249, 249, 250, 0.8); --newtab-border-secondary-color: rgba(249, 249, 250, 0.1); --newtab-button-primary-color: #0060DF; diff --git a/browser/components/newtab/css/activity-stream-windows.css b/browser/components/newtab/css/activity-stream-windows.css index 42bc045d7cf6..53cd60bde86b 100644 --- a/browser/components/newtab/css/activity-stream-windows.css +++ b/browser/components/newtab/css/activity-stream-windows.css @@ -28,7 +28,7 @@ input { display: none !important; } body { - --newtab-background-color: #FFF; + --newtab-background-color: #F9F9FB; --newtab-border-primary-color: #B1B1B3; --newtab-border-secondary-color: #D7D7DB; --newtab-element-active-color: rgba(215, 215, 219, 0.6); @@ -110,7 +110,7 @@ body { --newtab-card-second-shadow: rgba(29, 17, 51, 0.12); --newtab-wordmark-color: #20123A; } body[lwt-newtab-brighttext] { - --newtab-background-color: #1c1b22; + --newtab-background-color: #2A2A2E; --newtab-border-primary-color: rgba(249, 249, 250, 0.8); --newtab-border-secondary-color: rgba(249, 249, 250, 0.1); --newtab-button-primary-color: #0060DF; diff --git a/browser/themes/addons/alpenglow/manifest.json b/browser/themes/addons/alpenglow/manifest.json index 814139810a30..e211ce223d83 100644 --- a/browser/themes/addons/alpenglow/manifest.json +++ b/browser/themes/addons/alpenglow/manifest.json @@ -53,7 +53,7 @@ "tab_background_separator": "hsla(261, 53%, 15%, 1)", "tab_line": "hsla(265, 100%, 72%, 1)", "tab_loading": "hsla(265, 100%, 72%, 1)", - "ntp_background": "hsla(0, 0%, 100%, 1)", + "ntp_background": "#F9F9FB", "ntp_text": "hsla(261, 53%, 15%, 1)", "popup": "hsla(254, 46%, 21%, 1)", "popup_text": "hsla(255, 100%, 94%, 1)", @@ -110,7 +110,7 @@ "tab_background_separator": "hsla(255, 100%, 94%, 1)", "tab_line": "hsla(265, 100%, 72%, 1)", "tab_loading": "hsla(265, 100%, 72%, 1)", - "ntp_background": "hsla(254, 46%, 21%, .96)", + "ntp_background": "#2A2A2E", "ntp_text": "hsla(255, 100%, 94%, 1)", "popup": "hsla(250, 43%, 25%, 1)", "popup_text": "hsla(255, 100%, 94%, 1)", diff --git a/browser/themes/addons/dark/manifest.json b/browser/themes/addons/dark/manifest.json index 6c99c0503c4e..3bfaccf8b3b1 100644 --- a/browser/themes/addons/dark/manifest.json +++ b/browser/themes/addons/dark/manifest.json @@ -34,7 +34,7 @@ "toolbar_field_text": "rgb(251,251,254)", "toolbar_field_focus": "rgb(66,65,77)", "toolbar_text": "rgb(251, 251, 254)", - "ntp_background": "rgb(28, 27, 34)", + "ntp_background": "#2A2A2E", "ntp_text": "rgb(251, 251, 254)", "sidebar": "#38383D", "sidebar_text": "rgb(249, 249, 250)", diff --git a/browser/themes/addons/light/manifest.json b/browser/themes/addons/light/manifest.json index 8e2ca4ca5e11..9d4ea95b1333 100644 --- a/browser/themes/addons/light/manifest.json +++ b/browser/themes/addons/light/manifest.json @@ -35,7 +35,7 @@ "toolbar_field_border": "transparent", "toolbar_field_focus": "white", "toolbar_text": "rgb(21,20,26)", - "ntp_background": "#fff", + "ntp_background": "#F9F9FB", "ntp_text": "rgb(21, 20, 26)", "popup_action_color": "rgb(91,91,102)", "button": "rgb(240,240,244)", diff --git a/browser/themes/shared/tabs.inc.css b/browser/themes/shared/tabs.inc.css index eef32c7d22ff..98a266550a14 100644 --- a/browser/themes/shared/tabs.inc.css +++ b/browser/themes/shared/tabs.inc.css @@ -33,13 +33,15 @@ --tab-shadow-max-size: 6px; --proton-tab-block-margin: 4px; --inline-tab-padding: 8px; - /* Value for --in-content-page-background in in-content/common.inc.css */ - --tabpanel-background-color: #fff; + /* --tabpanel-background-color matches $in-content-page-background in newtab + (browser/components/newtab/content-src/styles/_variables.scss) */ + --tabpanel-background-color: #F9F9FB; } @media (-moz-toolbar-prefers-color-scheme: dark) { :root { - /* Value for --in-content-page-background for dark mode in in-content/common.inc.css */ - --tabpanel-background-color: rgb(28,27,34); + /* --tabpanel-background-color matches $in-content-page-background in newtab + (browser/components/newtab/content-src/styles/_variables.scss) */ + --tabpanel-background-color: #2A2A2E; } } /*** END prefers-color-scheme: dark ***/ } /*** END proton ***/ diff --git a/toolkit/components/extensions/test/browser/browser_ext_themes_ntp_colors_perwindow.js b/toolkit/components/extensions/test/browser/browser_ext_themes_ntp_colors_perwindow.js index a5e8800402bb..ecb4fe6649f9 100644 --- a/toolkit/components/extensions/test/browser/browser_ext_themes_ntp_colors_perwindow.js +++ b/toolkit/components/extensions/test/browser/browser_ext_themes_ntp_colors_perwindow.js @@ -93,7 +93,7 @@ function test_ntp_default_theme(browser, url) { browser, [ { - background: hexToCSS("#FFFFFF"), + background: hexToCSS("#F9F9FB"), color: hexToCSS("#15141A"), }, ], diff --git a/toolkit/mozapps/extensions/default-theme/manifest.json b/toolkit/mozapps/extensions/default-theme/manifest.json index 83ff8a9b44dc..9fcbfb286736 100644 --- a/toolkit/mozapps/extensions/default-theme/manifest.json +++ b/toolkit/mozapps/extensions/default-theme/manifest.json @@ -37,7 +37,7 @@ "toolbar_field_text": "rgb(251,251,254)", "toolbar_field_focus": "rgb(66,65,77)", "toolbar_text": "rgb(251, 251, 254)", - "ntp_background": "rgb(28, 27, 34)", + "ntp_background": "#2A2A2E", "ntp_text": "rgb(251, 251, 254)", "sidebar": "#38383D", "sidebar_text": "rgb(249, 249, 250)",