diff --git a/browser/app/profile/firefox.js b/browser/app/profile/firefox.js
index b48a9d5050c9..81c7a9e79caa 100644
--- a/browser/app/profile/firefox.js
+++ b/browser/app/profile/firefox.js
@@ -1706,8 +1706,9 @@ pref("browser.newtabpage.activity-stream.discoverystream.region-weather-config",
// Preference to enable wallpaper selection in the Customize Menu of new tab page
pref("browser.newtabpage.activity-stream.newtabWallpapers.enabled", false);
+pref("browser.newtabpage.activity-stream.newtabWallpapers.v2.enabled", false);
-// Current new tab page background image.
+// Current new tab page background images.
pref("browser.newtabpage.activity-stream.newtabWallpapers.wallpaper-light", "");
pref("browser.newtabpage.activity-stream.newtabWallpapers.wallpaper-dark", "");
diff --git a/browser/components/asrouter/content/components/ASRouterAdmin/ASRouterAdmin.css b/browser/components/asrouter/content/components/ASRouterAdmin/ASRouterAdmin.css
index 2e16438917e2..451e8904a5a0 100644
--- a/browser/components/asrouter/content/components/ASRouterAdmin/ASRouterAdmin.css
+++ b/browser/components/asrouter/content/components/ASRouterAdmin/ASRouterAdmin.css
@@ -3,12 +3,16 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
/* stylelint-disable max-nesting-depth */
:root {
+ color-scheme: light;
--newtab-background-color: #F9F9FB;
--newtab-background-color-secondary: #FFF;
--newtab-text-primary-color: rgb(21, 20, 26);
- --newtab-primary-action-background: rgb(0, 97, 224);
+ --newtab-contextual-text-primary-color: light-dark(var(--newtab-text-primary-color), rgb(251, 251, 254));
+ --newtab-primary-action-background: light-dark(rgb(0, 97, 224), rgb(0, 221, 255));
--newtab-primary-action-background-pocket: rgb(0, 128, 120);
--newtab-text-secondary-color: color-mix(in srgb, var(--newtab-text-primary-color) 70%, transparent);
+ --newtab-contextual-text-secondary-color: color-mix(in srgb, var(--newtab-contextual-text-primary-color) 70%, transparent);
+ --newtab-weather-background-color: light-dark(rgba(255, 255, 255, 70%), rgba(35, 34, 43, 70%));
--newtab-element-hover-color: color-mix(in srgb, var(--newtab-background-color) 90%, #000);
--newtab-element-active-color: color-mix(in srgb, var(--newtab-background-color) 80%, #000);
--newtab-button-background: var(--button-background-color);
@@ -17,10 +21,10 @@
--newtab-button-hover-background: var(--button-background-color-hover);
--newtab-button-active-background: var(--button-background-color-active);
--newtab-button-text: var(--button-text-color);
- --newtab-button-static-background: #F0F0F4;
+ --newtab-button-static-background: light-dark(#F0F0F4, #2B2A33);
--newtab-button-static-focus-background: var(--newtab-button-static-background);
- --newtab-button-static-hover-background: #E0E0E6;
- --newtab-button-static-active-background: #CFCFD8;
+ --newtab-button-static-hover-background: light-dark(#E0E0E6, #52525E);
+ --newtab-button-static-active-background: light-dark(#CFCFD8, #5B5B66);
--newtab-element-secondary-color: color-mix(in srgb, currentColor 5%, transparent);
--newtab-element-secondary-hover-color: color-mix(in srgb, currentColor 12%, transparent);
--newtab-element-secondary-active-color: color-mix(in srgb, currentColor 25%, transparent);
@@ -31,7 +35,7 @@
--newtab-primary-action-background-dimmed: color-mix(in srgb, var(--newtab-primary-action-background) 25%, transparent);
--newtab-primary-action-background-pocket-dimmed: color-mix(in srgb, var(--newtab-primary-action-background-pocket) 25%, transparent);
--newtab-border-color: color-mix(in srgb, var(--newtab-background-color) 75%, #000);
- --newtab-wordmark-color: #20123A;
+ --newtab-wordmark-color: light-dark(#20123A, rgb(251, 251, 254));
--newtab-status-success: #058B00;
--newtab-status-error: #D70022;
--newtab-inner-box-shadow-color: rgba(0, 0, 0, 0.1);
@@ -41,10 +45,10 @@
--newtab-button-secondary-color: inherit;
}
:root[lwt-newtab-brighttext] {
+ color-scheme: dark;
--newtab-background-color: #2B2A33;
--newtab-background-color-secondary: rgb(66, 65, 77);
- --newtab-text-primary-color: rgb(251, 251, 254);
- --newtab-primary-action-background: rgb(0, 221, 255);
+ --newtab-contextual-text-primary-color: light-dark(rgb(21, 20, 26), var(--newtab-text-primary-color));
--newtab-primary-action-background-pocket: rgb(0, 221, 255);
--newtab-primary-action-background-pocket-dimmed: color-mix(in srgb, var(--newtab-primary-action-background) 25%, transparent);
--newtab-primary-element-hover-color: color-mix(in srgb, var(--newtab-primary-action-background) 55%, #FFF);
@@ -56,11 +60,7 @@
--newtab-element-secondary-active-color: color-mix(in srgb, currentColor 30%, transparent);
--newtab-border-color: color-mix(in srgb, var(--newtab-background-color) 75%, #FFF);
--newtab-primary-element-text-color: rgb(43, 42, 51);
- --newtab-wordmark-color: rgb(251, 251, 254);
--newtab-status-success: #7C6;
- --newtab-button-static-background: #2B2A33;
- --newtab-button-static-hover-background: #52525E;
- --newtab-button-static-active-background: #5B5B66;
}
@media (prefers-contrast) {
diff --git a/browser/components/newtab/content-src/components/Base/Base.jsx b/browser/components/newtab/content-src/components/Base/Base.jsx
index 61722fd418fa..d5779e0832d8 100644
--- a/browser/components/newtab/content-src/components/Base/Base.jsx
+++ b/browser/components/newtab/content-src/components/Base/Base.jsx
@@ -280,13 +280,19 @@ export class BaseContent extends React.PureComponent {
`url(${darkWallpaper?.wallpaperUrl || ""})`
);
+ // Grab the contrast of the currently displayed wallpaper.
+ const { theme } =
+ this.state.colorMode === "light" ? lightWallpaper : darkWallpaper;
+
// Add helper class to body if user has a wallpaper selected
- if (lightWallpaper) {
- global.document?.body.classList.add("hasWallpaperLight");
+ if (theme === "light") {
+ global.document?.body.classList.add("lightWallpaper");
+ global.document?.body.classList.remove("darkWallpaper");
}
- if (darkWallpaper) {
- global.document?.body.classList.add("hasWallpaperDark");
+ if (theme === "dark") {
+ global.document?.body.classList.add("darkWallpaper");
+ global.document?.body.classList.remove("lightWallpaper");
}
}
}
diff --git a/browser/components/newtab/content-src/components/Base/_Base.scss b/browser/components/newtab/content-src/components/Base/_Base.scss
index a9141e0923ad..0f038c693c56 100644
--- a/browser/components/newtab/content-src/components/Base/_Base.scss
+++ b/browser/components/newtab/content-src/components/Base/_Base.scss
@@ -135,6 +135,10 @@ main {
.wallpaper-attribution {
padding: 0 $section-horizontal-padding;
font-size: 14px;
+ color: var(--newtab-contextual-text-primary-color);
+
+ // Contrast fix for users who have wallpapers set
+ @include wallpaper-contrast-fix;
&.theme-light {
display: inline-block;
@@ -153,7 +157,7 @@ main {
}
a {
- color: var(--newtab-element-color);
+ color: inherit;
&:hover {
text-decoration: none;
diff --git a/browser/components/newtab/content-src/components/CustomizeMenu/_CustomizeMenu.scss b/browser/components/newtab/content-src/components/CustomizeMenu/_CustomizeMenu.scss
index 403a62a50f68..27c88bd9cce6 100644
--- a/browser/components/newtab/content-src/components/CustomizeMenu/_CustomizeMenu.scss
+++ b/browser/components/newtab/content-src/components/CustomizeMenu/_CustomizeMenu.scss
@@ -21,6 +21,11 @@
background-color: transparent;
padding: 15px;
+ // Contrast fix for users who have wallpapers set
+ &:not(:hover, :active) {
+ @include wallpaper-contrast-fix;
+ }
+
&:hover {
background-color: var(--newtab-element-hover-color);
}
diff --git a/browser/components/newtab/content-src/components/DiscoveryStreamBase/_DiscoveryStreamBase.scss b/browser/components/newtab/content-src/components/DiscoveryStreamBase/_DiscoveryStreamBase.scss
index 015cb57a8b57..9ff4df9904da 100644
--- a/browser/components/newtab/content-src/components/DiscoveryStreamBase/_DiscoveryStreamBase.scss
+++ b/browser/components/newtab/content-src/components/DiscoveryStreamBase/_DiscoveryStreamBase.scss
@@ -41,11 +41,14 @@ $ds-width: 936px;
.ds-header,
.ds-layout .section-title span {
- color: var(--newtab-text-primary-color);
+ color: var(--newtab-contextual-text-primary-color);
font-size: $section-title-font-size;
font-weight: 600;
line-height: 20px;
+ // Contrast fix for users who have wallpapers set
+ @include wallpaper-contrast-fix;
+
.icon {
fill: var(--newtab-text-secondary-color);
}
@@ -59,6 +62,9 @@ $ds-width: 936px;
color: var(--newtab-primary-action-background);
font-weight: 500;
+ // Contrast fix for users who have wallpapers set
+ @include wallpaper-contrast-fix;
+
&:is(:focus, :hover) {
text-decoration: none;
}
diff --git a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/FeatureHighlight/_SponsoredContentHighlight.scss b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/FeatureHighlight/_SponsoredContentHighlight.scss
index 1dc024b7c07b..40eb08342e44 100644
--- a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/FeatureHighlight/_SponsoredContentHighlight.scss
+++ b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/FeatureHighlight/_SponsoredContentHighlight.scss
@@ -15,6 +15,9 @@
background-size: 20px;
color: var(--icon-color);
vertical-align: text-bottom;
+
+ // Contrast fix for users who have wallpapers set
+ @include wallpaper-contrast-fix;
}
.feature-highlight-modal {
diff --git a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/Navigation/_Navigation.scss b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/Navigation/_Navigation.scss
index 0c7a158efbf1..687bbbb35868 100644
--- a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/Navigation/_Navigation.scss
+++ b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/Navigation/_Navigation.scss
@@ -1,7 +1,7 @@
/* stylelint-disable max-nesting-depth */
.ds-navigation {
- color: var(--newtab-text-primary-color);
+ color: var(--newtab-contextual-text-primary-color);
font-size: 11.5px;
font-weight: 500;
line-height: 22px;
@@ -20,6 +20,9 @@
text-align: end;
}
+ // Contrast fix for users who have wallpapers set
+ @include wallpaper-contrast-fix;
+
ul {
display: inline;
margin: 0;
diff --git a/browser/components/newtab/content-src/components/Search/_Search.scss b/browser/components/newtab/content-src/components/Search/_Search.scss
index a9af0ab1e07c..8ee4f7f13276 100644
--- a/browser/components/newtab/content-src/components/Search/_Search.scss
+++ b/browser/components/newtab/content-src/components/Search/_Search.scss
@@ -39,6 +39,9 @@ $glyph-forward: url('chrome://browser/skin/forward.svg');
height: $logo-size;
margin-inline-start: 16px;
width: $wordmark-size;
+
+ // Contrast fix for users who have wallpapers set
+ @include wallpaper-contrast-fix;
}
@media (max-width: $break-point-medium - 1) {
diff --git a/browser/components/newtab/content-src/components/TopSites/_TopSites.scss b/browser/components/newtab/content-src/components/TopSites/_TopSites.scss
index 09a20c235d69..a80c061ede34 100644
--- a/browser/components/newtab/content-src/components/TopSites/_TopSites.scss
+++ b/browser/components/newtab/content-src/components/TopSites/_TopSites.scss
@@ -126,6 +126,11 @@ $letter-fallback-color: $white;
}
}
+ // Contrast fix for users who have wallpapers set
+ &:not(:hover, :active, .active) {
+ @include wallpaper-contrast-fix;
+ }
+
// Necessary for when navigating by a keyboard, having the context
// menu open should display the "…" button. This style is a clone
// of the `:active` state for `.context-menu-button`
@@ -152,6 +157,9 @@ $letter-fallback-color: $white;
top: -20px;
transition: opacity 200ms;
+ // Contrast fix for users who have wallpapers set
+ @include wallpaper-contrast-fix;
+
&:hover {
background-color: var(--newtab-button-hover-background);
@@ -180,7 +188,7 @@ $letter-fallback-color: $white;
// For letter fallback
align-items: center;
- color: var(--newtab-text-secondary-color);
+ color: var(--newtab-contextual-text-secondary-color);
display: flex;
font-size: 32px;
font-weight: 200;
@@ -286,7 +294,7 @@ $letter-fallback-color: $white;
}
.title {
- color: var(--newtab-text-primary-color);
+ color: var(--newtab-contextual-text-primary-color);
padding-top: 8px;
font: caption;
text-align: center;
@@ -305,7 +313,7 @@ $letter-fallback-color: $white;
}
.sponsored-label {
- color: var(--newtab-text-secondary-color);
+ color: var(--newtab-contextual-text-secondary-color);
font-size: 0.9em;
}
diff --git a/browser/components/newtab/content-src/components/WallpapersSection/WallpapersSection.jsx b/browser/components/newtab/content-src/components/WallpapersSection/WallpapersSection.jsx
index 6fcd4b3a15b7..be8d4f26794b 100644
--- a/browser/components/newtab/content-src/components/WallpapersSection/WallpapersSection.jsx
+++ b/browser/components/newtab/content-src/components/WallpapersSection/WallpapersSection.jsx
@@ -25,36 +25,48 @@ export class _WallpapersSection extends React.PureComponent {
const { id } = event.target;
const prefs = this.props.Prefs.values;
const colorMode = this.prefersDarkQuery?.matches ? "dark" : "light";
- this.props.setPref(`newtabWallpapers.wallpaper-${colorMode}`, id);
+ if (prefs["newtabWallpapers.v2.enabled"]) {
+ // If we don't care about color mode, set both to the same wallpaper.
+ this.props.setPref(`newtabWallpapers.wallpaper-dark`, id);
+ this.props.setPref(`newtabWallpapers.wallpaper-light`, id);
+ } else {
+ this.props.setPref(`newtabWallpapers.wallpaper-${colorMode}`, id);
+ // bug 1892095
+ if (
+ prefs["newtabWallpapers.wallpaper-dark"] === "" &&
+ colorMode === "light"
+ ) {
+ this.props.setPref(
+ "newtabWallpapers.wallpaper-dark",
+ id.replace("light", "dark")
+ );
+ }
+
+ if (
+ prefs["newtabWallpapers.wallpaper-light"] === "" &&
+ colorMode === "dark"
+ ) {
+ this.props.setPref(
+ `newtabWallpapers.wallpaper-light`,
+ id.replace("dark", "light")
+ );
+ }
+ }
this.handleUserEvent({
selected_wallpaper: id,
hadPreviousWallpaper: !!this.props.activeWallpaper,
});
- // bug 1892095
- if (
- prefs["newtabWallpapers.wallpaper-dark"] === "" &&
- colorMode === "light"
- ) {
- this.props.setPref(
- "newtabWallpapers.wallpaper-dark",
- id.replace("light", "dark")
- );
- }
-
- if (
- prefs["newtabWallpapers.wallpaper-light"] === "" &&
- colorMode === "dark"
- ) {
- this.props.setPref(
- `newtabWallpapers.wallpaper-light`,
- id.replace("dark", "light")
- );
- }
}
handleReset() {
+ const prefs = this.props.Prefs.values;
const colorMode = this.prefersDarkQuery?.matches ? "dark" : "light";
- this.props.setPref(`newtabWallpapers.wallpaper-${colorMode}`, "");
+ if (prefs["newtabWallpapers.v2.enabled"]) {
+ this.props.setPref("newtabWallpapers.wallpaper-light", "");
+ this.props.setPref("newtabWallpapers.wallpaper-dark", "");
+ } else {
+ this.props.setPref(`newtabWallpapers.wallpaper-${colorMode}`, "");
+ }
this.handleUserEvent({
selected_wallpaper: "none",
hadPreviousWallpaper: !!this.props.activeWallpaper,
@@ -74,9 +86,14 @@ export class _WallpapersSection extends React.PureComponent {
render() {
const { wallpaperList } = this.props.Wallpapers;
const { activeWallpaper } = this.props;
+ const prefs = this.props.Prefs.values;
+ let fieldsetClassname = `wallpaper-list`;
+ if (prefs["newtabWallpapers.v2.enabled"]) {
+ fieldsetClassname += " ignore-color-mode";
+ }
return (
-
-
+
+
+
);
}
diff --git a/browser/components/newtab/content-src/components/Weather/_Weather.scss b/browser/components/newtab/content-src/components/Weather/_Weather.scss
index 0616530f98a4..f2409a9a7c49 100644
--- a/browser/components/newtab/content-src/components/Weather/_Weather.scss
+++ b/browser/components/newtab/content-src/components/Weather/_Weather.scss
@@ -57,7 +57,14 @@
.weatherSponsorText {
visibility: hidden;
font-size: var(--newtab-weather-sponsor-font-size);
- color: var(--text-color-deemphasized);
+ color: var(--newtab-contextual-text-primary-color);
+
+ // Contrast fix for users who have wallpapers set
+ @include wallpaper-contrast-fix;
+
+ span {
+ color: var(--text-color-deemphasized);
+ }
}
.weatherInfoLink, .weatherButtonContextMenuWrapper {
@@ -86,44 +93,22 @@
}
// Contrast fix for users who have wallpapers set
- .hasWallpaperDark & {
- @media (prefers-color-scheme: dark) {
- // TODO: Replace with token
- background-color: rgba(35, 34, 43, 70%);
+ .lightWallpaper &,
+ .darkWallpaper & {
+ background-color: var(--newtab-weather-background-color);
- &:hover {
- background-color: var(--newtab-button-static-hover-background);
- }
-
- &:hover:active {
- background-color: var(--newtab-button-static-active-background);
- }
+ &:hover {
+ background-color: var(--newtab-button-static-hover-background);
}
- @media (prefers-contrast) and (prefers-color-scheme: dark) {
+ &:hover:active {
+ background-color: var(--newtab-button-static-active-background);
+ }
+
+ @media (prefers-contrast) {
background-color: var(--background-color-box);
}
}
-
- .hasWallpaperLight & {
- @media (prefers-color-scheme: light) {
- // TODO: Replace with token
- background-color: rgba(255, 255, 255, 70%);
-
- &:hover {
- background-color: var(--newtab-button-static-hover-background);
- }
-
- &:hover:active {
- background-color: var(--newtab-button-static-active-background);
- }
- }
-
- @media (prefers-contrast) and (prefers-color-scheme: light) {
- background-color: var(--background-color-box);
- }
- }
-
}
.weatherInfoLink {
@@ -179,12 +164,6 @@
z-index: 0;
}
- @media (prefers-color-scheme: dark) {
- &::after {
- background-color: var(--color-gray-70);
- }
- }
-
&:hover {
&::after {
background-color: transparent
diff --git a/browser/components/newtab/content-src/styles/_mixins.scss b/browser/components/newtab/content-src/styles/_mixins.scss
index d2b2748a609b..4b9891aad693 100644
--- a/browser/components/newtab/content-src/styles/_mixins.scss
+++ b/browser/components/newtab/content-src/styles/_mixins.scss
@@ -48,3 +48,15 @@
border-radius: 4px;
outline: none;
}
+
+// Some wallpapers are light/dark, and may not match the user set contrast,
+// so some text, icons, etc that are displayed over the wallpaper need a contrast fix.
+@mixin wallpaper-contrast-fix {
+ .lightWallpaper & {
+ color-scheme: light;
+ }
+
+ .darkWallpaper & {
+ color-scheme: dark;
+ }
+}
diff --git a/browser/components/newtab/content-src/styles/_theme.scss b/browser/components/newtab/content-src/styles/_theme.scss
index 78b54f4f8eee..7143ebb6b6e2 100644
--- a/browser/components/newtab/content-src/styles/_theme.scss
+++ b/browser/components/newtab/content-src/styles/_theme.scss
@@ -24,14 +24,24 @@ $shadow-image-inset: inset 0 0 0 0.5px $black-15;
// Default theme
:root {
+ color-scheme: light;
// General styles
--newtab-background-color: #{$in-content-page-background};
--newtab-background-color-secondary: #{$newtab-background-secondary};
--newtab-text-primary-color: #{$in-content-page-color};
- --newtab-primary-action-background: #{$primary-blue};
+ // We need to be careful about the contrast of text over newtab wallpapers, which might not match the theme.
+ // --newtab-text-primary-color is set in contextTheme.js and reacts to possible installed addon themes.
+ // If we use that variable here, with light-dark, we can retain that addon theme text color,
+ // and also have a fallback in case the wallpaper contrast doesn't match.
+ --newtab-contextual-text-primary-color: light-dark(var(--newtab-text-primary-color), #{$in-content-page-color-dark});
+ --newtab-primary-action-background: light-dark(#{$primary-blue}, #{$primary-blue-dark});
// A button colour closer to the Pocket brand for usage in the Pocket section.
--newtab-primary-action-background-pocket: #{$primary-green};
--newtab-text-secondary-color: color-mix(in srgb, var(--newtab-text-primary-color) 70%, transparent);
+ --newtab-contextual-text-secondary-color: color-mix(in srgb, var(--newtab-contextual-text-primary-color) 70%, transparent);
+
+ // A background color for weather widget to help with wallpaper contrast.
+ --newtab-weather-background-color: light-dark(rgba(255, 255, 255, 70%), rgba(35, 34, 43, 70%));
// --newtab-element-*-color is used when an element needs to be set off from
// the primary background color.
@@ -48,10 +58,10 @@ $shadow-image-inset: inset 0 0 0 0.5px $black-15;
// --newtab-button-static*-color is used on pocket cards and require a
// static color unit due to transparency issues with `color-mix`
- --newtab-button-static-background: #F0F0F4;
+ --newtab-button-static-background: light-dark(#F0F0F4, #2B2A33);
--newtab-button-static-focus-background: var(--newtab-button-static-background);
- --newtab-button-static-hover-background: #E0E0E6;
- --newtab-button-static-active-background: #CFCFD8;
+ --newtab-button-static-hover-background: light-dark(#E0E0E6, #52525E);
+ --newtab-button-static-active-background: light-dark(#CFCFD8, #5B5B66);
// --newtab-element-secondary*-color is used when an element needs to be set
// off from the secondary background color.
@@ -67,7 +77,7 @@ $shadow-image-inset: inset 0 0 0 0.5px $black-15;
--newtab-primary-action-background-dimmed: color-mix(in srgb, var(--newtab-primary-action-background) 25%, transparent);
--newtab-primary-action-background-pocket-dimmed: color-mix(in srgb, var(--newtab-primary-action-background-pocket) 25%, transparent);
--newtab-border-color: color-mix(in srgb, var(--newtab-background-color) 75%, #{$black});
- --newtab-wordmark-color: #{$newtab-wordmark-default-color};
+ --newtab-wordmark-color: light-dark(#{$newtab-wordmark-default-color}, #{$newtab-wordmark-darktheme-color});
--newtab-status-success: #{$status-green};
--newtab-status-error: #{$red-60};
--newtab-inner-box-shadow-color: #{$black-10};
@@ -79,12 +89,13 @@ $shadow-image-inset: inset 0 0 0 0.5px $black-15;
--newtab-button-secondary-color: inherit;
&[lwt-newtab-brighttext] {
+ // We export color-scheme because some addon themes might not work with light-dark and prefers-color-scheme.
+ // If we add color-scheme here, we can still use light-dark
+ color-scheme: dark;
// General styles
--newtab-background-color: #{$in-content-page-background-dark};
--newtab-background-color-secondary: #{$newtab-background-secondary-dark};
- --newtab-text-primary-color: #{$in-content-page-color-dark};
-
- --newtab-primary-action-background: #{$primary-blue-dark};
+ --newtab-contextual-text-primary-color: light-dark(#{$in-content-page-color}, var(--newtab-text-primary-color));
--newtab-primary-action-background-pocket: #{$primary-blue-dark};
--newtab-primary-action-background-pocket-dimmed: color-mix(in srgb, var(--newtab-primary-action-background) 25%, transparent);
@@ -100,14 +111,7 @@ $shadow-image-inset: inset 0 0 0 0.5px $black-15;
--newtab-border-color: color-mix(in srgb, var(--newtab-background-color) 75%, #{$white});
--newtab-primary-element-text-color: #{$primary-text-color-dark};
- --newtab-wordmark-color: #{$newtab-wordmark-darktheme-color};
--newtab-status-success: #{$status-dark-green};
-
- // --newtab-button-static*-color is used on pocket cards and require a
- // static color unit due to transparency issues with `color-mix`
- --newtab-button-static-background: #2B2A33;
- --newtab-button-static-hover-background: #52525E;
- --newtab-button-static-active-background: #5B5B66;
}
}
diff --git a/browser/components/newtab/css/activity-stream-linux.css b/browser/components/newtab/css/activity-stream-linux.css
index 248de6cf214e..24338d188222 100644
--- a/browser/components/newtab/css/activity-stream-linux.css
+++ b/browser/components/newtab/css/activity-stream-linux.css
@@ -34,12 +34,16 @@ input {
}
:root {
+ color-scheme: light;
--newtab-background-color: #F9F9FB;
--newtab-background-color-secondary: #FFF;
--newtab-text-primary-color: #15141a;
- --newtab-primary-action-background: #0061e0;
+ --newtab-contextual-text-primary-color: light-dark(var(--newtab-text-primary-color), #fbfbfe);
+ --newtab-primary-action-background: light-dark(#0061e0, #00ddff);
--newtab-primary-action-background-pocket: #008078;
--newtab-text-secondary-color: color-mix(in srgb, var(--newtab-text-primary-color) 70%, transparent);
+ --newtab-contextual-text-secondary-color: color-mix(in srgb, var(--newtab-contextual-text-primary-color) 70%, transparent);
+ --newtab-weather-background-color: light-dark(rgba(255, 255, 255, 70%), rgba(35, 34, 43, 70%));
--newtab-element-hover-color: color-mix(in srgb, var(--newtab-background-color) 90%, #000);
--newtab-element-active-color: color-mix(in srgb, var(--newtab-background-color) 80%, #000);
--newtab-button-background: var(--button-background-color);
@@ -48,10 +52,10 @@ input {
--newtab-button-hover-background: var(--button-background-color-hover);
--newtab-button-active-background: var(--button-background-color-active);
--newtab-button-text: var(--button-text-color);
- --newtab-button-static-background: #F0F0F4;
+ --newtab-button-static-background: light-dark(#F0F0F4, #2B2A33);
--newtab-button-static-focus-background: var(--newtab-button-static-background);
- --newtab-button-static-hover-background: #E0E0E6;
- --newtab-button-static-active-background: #CFCFD8;
+ --newtab-button-static-hover-background: light-dark(#E0E0E6, #52525E);
+ --newtab-button-static-active-background: light-dark(#CFCFD8, #5B5B66);
--newtab-element-secondary-color: color-mix(in srgb, currentColor 5%, transparent);
--newtab-element-secondary-hover-color: color-mix(in srgb, currentColor 12%, transparent);
--newtab-element-secondary-active-color: color-mix(in srgb, currentColor 25%, transparent);
@@ -62,7 +66,7 @@ input {
--newtab-primary-action-background-dimmed: color-mix(in srgb, var(--newtab-primary-action-background) 25%, transparent);
--newtab-primary-action-background-pocket-dimmed: color-mix(in srgb, var(--newtab-primary-action-background-pocket) 25%, transparent);
--newtab-border-color: color-mix(in srgb, var(--newtab-background-color) 75%, #000);
- --newtab-wordmark-color: #20123A;
+ --newtab-wordmark-color: light-dark(#20123A, #fbfbfe);
--newtab-status-success: #058B00;
--newtab-status-error: #D70022;
--newtab-inner-box-shadow-color: rgba(0, 0, 0, 0.1);
@@ -72,10 +76,10 @@ input {
--newtab-button-secondary-color: inherit;
}
:root[lwt-newtab-brighttext] {
+ color-scheme: dark;
--newtab-background-color: #2B2A33;
--newtab-background-color-secondary: #42414d;
- --newtab-text-primary-color: #fbfbfe;
- --newtab-primary-action-background: #00ddff;
+ --newtab-contextual-text-primary-color: light-dark(#15141a, var(--newtab-text-primary-color));
--newtab-primary-action-background-pocket: #00ddff;
--newtab-primary-action-background-pocket-dimmed: color-mix(in srgb, var(--newtab-primary-action-background) 25%, transparent);
--newtab-primary-element-hover-color: color-mix(in srgb, var(--newtab-primary-action-background) 55%, #FFF);
@@ -87,11 +91,7 @@ input {
--newtab-element-secondary-active-color: color-mix(in srgb, currentColor 30%, transparent);
--newtab-border-color: color-mix(in srgb, var(--newtab-background-color) 75%, #FFF);
--newtab-primary-element-text-color: #2b2a33;
- --newtab-wordmark-color: #fbfbfe;
--newtab-status-success: #7C6;
- --newtab-button-static-background: #2B2A33;
- --newtab-button-static-hover-background: #52525E;
- --newtab-button-static-active-background: #5B5B66;
}
@media (prefers-contrast) {
@@ -527,6 +527,13 @@ main section {
.wallpaper-attribution {
padding: 0 25px;
font-size: 14px;
+ color: var(--newtab-contextual-text-primary-color);
+}
+.lightWallpaper .wallpaper-attribution {
+ color-scheme: light;
+}
+.darkWallpaper .wallpaper-attribution {
+ color-scheme: dark;
}
.wallpaper-attribution.theme-light {
display: inline-block;
@@ -541,7 +548,7 @@ main section {
display: inline-block;
}
.wallpaper-attribution a {
- color: var(--newtab-element-color);
+ color: inherit;
}
.wallpaper-attribution a:hover {
text-decoration: none;
@@ -678,6 +685,12 @@ main section {
.top-site-outer:is(:hover) .context-menu-button {
opacity: 1;
}
+.lightWallpaper .top-site-outer:not(:hover, :active, .active) {
+ color-scheme: light;
+}
+.darkWallpaper .top-site-outer:not(:hover, :active, .active) {
+ color-scheme: dark;
+}
.top-site-outer.active .context-menu-button {
opacity: 1;
background-color: var(--newtab-button-active-background);
@@ -698,6 +711,12 @@ main section {
top: -20px;
transition: opacity 200ms;
}
+.lightWallpaper .top-site-outer .context-menu-button {
+ color-scheme: light;
+}
+.darkWallpaper .top-site-outer .context-menu-button {
+ color-scheme: dark;
+}
.top-site-outer .context-menu-button:hover {
background-color: var(--newtab-button-hover-background);
}
@@ -720,7 +739,7 @@ main section {
cursor: pointer;
position: relative;
align-items: center;
- color: var(--newtab-text-secondary-color);
+ color: var(--newtab-contextual-text-secondary-color);
display: flex;
font-size: 32px;
font-weight: 200;
@@ -809,7 +828,7 @@ main section {
-moz-context-properties: fill;
}
.top-site-outer .title {
- color: var(--newtab-text-primary-color);
+ color: var(--newtab-contextual-text-primary-color);
padding-top: 8px;
font: caption;
text-align: center;
@@ -826,7 +845,7 @@ main section {
white-space: nowrap;
}
.top-site-outer .title .sponsored-label {
- color: var(--newtab-text-secondary-color);
+ color: var(--newtab-contextual-text-secondary-color);
font-size: 0.9em;
}
.top-site-outer .title:not(.sponsored) .sponsored-label {
@@ -1269,6 +1288,12 @@ main section {
margin-inline-start: 16px;
width: 134px;
}
+.lightWallpaper .search-wrapper .logo-and-wordmark .wordmark {
+ color-scheme: light;
+}
+.darkWallpaper .search-wrapper .logo-and-wordmark .wordmark {
+ color-scheme: dark;
+}
@media (max-width: 609px) {
.search-wrapper .logo-and-wordmark .logo {
background-size: 64px;
@@ -1680,6 +1705,12 @@ main section {
background-color: transparent;
padding: 15px;
}
+.lightWallpaper .personalize-button:not(:hover, :active) {
+ color-scheme: light;
+}
+.darkWallpaper .personalize-button:not(:hover, :active) {
+ color-scheme: dark;
+}
.personalize-button:hover {
background-color: var(--newtab-element-hover-color);
}
@@ -1918,20 +1949,16 @@ main section {
padding: 0;
border: none;
}
-.wallpaper-list .wallpaper-input.theme-light,
-.wallpaper-list .sr-only.theme-light {
+.wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-light, .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-light {
display: inline-block;
}
-[lwt-newtab-brighttext] .wallpaper-list .wallpaper-input.theme-light,
-[lwt-newtab-brighttext] .wallpaper-list .sr-only.theme-light {
+[lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-light, [lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-light {
display: none;
}
-.wallpaper-list .wallpaper-input.theme-dark,
-.wallpaper-list .sr-only.theme-dark {
+.wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-dark, .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-dark {
display: none;
}
-[lwt-newtab-brighttext] .wallpaper-list .wallpaper-input.theme-dark,
-[lwt-newtab-brighttext] .wallpaper-list .sr-only.theme-dark {
+[lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-dark, [lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-dark {
display: inline-block;
}
.wallpaper-list .wallpaper-input {
@@ -2064,6 +2091,15 @@ main section {
.weatherSponsorText {
visibility: hidden;
font-size: var(--newtab-weather-sponsor-font-size);
+ color: var(--newtab-contextual-text-primary-color);
+}
+.lightWallpaper .weatherSponsorText {
+ color-scheme: light;
+}
+.darkWallpaper .weatherSponsorText {
+ color-scheme: dark;
+}
+.weatherSponsorText span {
color: var(--text-color-deemphasized);
}
@@ -2086,35 +2122,17 @@ main section {
.weatherInfoLink:focus-visible, .weatherButtonContextMenuWrapper:focus-visible {
outline: var(--focus-outline);
}
-@media (prefers-color-scheme: dark) {
- .hasWallpaperDark .weatherInfoLink, .hasWallpaperDark .weatherButtonContextMenuWrapper {
- background-color: rgba(35, 34, 43, 0.7);
- }
- .hasWallpaperDark .weatherInfoLink:hover, .hasWallpaperDark .weatherButtonContextMenuWrapper:hover {
- background-color: var(--newtab-button-static-hover-background);
- }
- .hasWallpaperDark .weatherInfoLink:hover:active, .hasWallpaperDark .weatherButtonContextMenuWrapper:hover:active {
- background-color: var(--newtab-button-static-active-background);
- }
+.lightWallpaper .weatherInfoLink, .darkWallpaper .weatherInfoLink, .lightWallpaper .weatherButtonContextMenuWrapper, .darkWallpaper .weatherButtonContextMenuWrapper {
+ background-color: var(--newtab-weather-background-color);
}
-@media (prefers-contrast) and (prefers-color-scheme: dark) {
- .hasWallpaperDark .weatherInfoLink, .hasWallpaperDark .weatherButtonContextMenuWrapper {
- background-color: var(--background-color-box);
- }
+.lightWallpaper .weatherInfoLink:hover, .darkWallpaper .weatherInfoLink:hover, .lightWallpaper .weatherButtonContextMenuWrapper:hover, .darkWallpaper .weatherButtonContextMenuWrapper:hover {
+ background-color: var(--newtab-button-static-hover-background);
}
-@media (prefers-color-scheme: light) {
- .hasWallpaperLight .weatherInfoLink, .hasWallpaperLight .weatherButtonContextMenuWrapper {
- background-color: rgba(255, 255, 255, 0.7);
- }
- .hasWallpaperLight .weatherInfoLink:hover, .hasWallpaperLight .weatherButtonContextMenuWrapper:hover {
- background-color: var(--newtab-button-static-hover-background);
- }
- .hasWallpaperLight .weatherInfoLink:hover:active, .hasWallpaperLight .weatherButtonContextMenuWrapper:hover:active {
- background-color: var(--newtab-button-static-active-background);
- }
+.lightWallpaper .weatherInfoLink:hover:active, .darkWallpaper .weatherInfoLink:hover:active, .lightWallpaper .weatherButtonContextMenuWrapper:hover:active, .darkWallpaper .weatherButtonContextMenuWrapper:hover:active {
+ background-color: var(--newtab-button-static-active-background);
}
-@media (prefers-contrast) and (prefers-color-scheme: light) {
- .hasWallpaperLight .weatherInfoLink, .hasWallpaperLight .weatherButtonContextMenuWrapper {
+@media (prefers-contrast) {
+ .lightWallpaper .weatherInfoLink, .darkWallpaper .weatherInfoLink, .lightWallpaper .weatherButtonContextMenuWrapper, .darkWallpaper .weatherButtonContextMenuWrapper {
background-color: var(--background-color-box);
}
}
@@ -2165,11 +2183,6 @@ main section {
position: absolute;
z-index: 0;
}
-@media (prefers-color-scheme: dark) {
- .weatherButtonContextMenuWrapper::after {
- background-color: var(--color-gray-70);
- }
-}
.weatherButtonContextMenuWrapper:hover::after {
background-color: transparent;
}
@@ -3133,11 +3146,19 @@ main section {
.ds-header,
.ds-layout .section-title span {
- color: var(--newtab-text-primary-color);
+ color: var(--newtab-contextual-text-primary-color);
font-size: 17px;
font-weight: 600;
line-height: 20px;
}
+.lightWallpaper .ds-header,
+.lightWallpaper .ds-layout .section-title span {
+ color-scheme: light;
+}
+.darkWallpaper .ds-header,
+.darkWallpaper .ds-layout .section-title span {
+ color-scheme: dark;
+}
.ds-header .icon,
.ds-layout .section-title span .icon {
fill: var(--newtab-text-secondary-color);
@@ -3150,6 +3171,12 @@ main section {
color: var(--newtab-primary-action-background);
font-weight: 500;
}
+.lightWallpaper .collapsible-section.ds-layout .section-top-bar .learn-more-link a {
+ color-scheme: light;
+}
+.darkWallpaper .collapsible-section.ds-layout .section-top-bar .learn-more-link a {
+ color-scheme: dark;
+}
.collapsible-section.ds-layout .section-top-bar .learn-more-link a:is(:focus, :hover) {
text-decoration: none;
}
@@ -3719,7 +3746,7 @@ main section {
/* stylelint-disable max-nesting-depth */
.ds-navigation {
- color: var(--newtab-text-primary-color);
+ color: var(--newtab-contextual-text-primary-color);
font-size: 11.5px;
font-weight: 500;
line-height: 22px;
@@ -3737,6 +3764,12 @@ main section {
.ds-navigation.ds-navigation-right-aligned {
text-align: end;
}
+.lightWallpaper .ds-navigation {
+ color-scheme: light;
+}
+.darkWallpaper .ds-navigation {
+ color-scheme: dark;
+}
.ds-navigation ul {
display: inline;
margin: 0;
@@ -4924,6 +4957,12 @@ main section {
color: var(--icon-color);
vertical-align: text-bottom;
}
+.lightWallpaper .sponsored-content-highlight .icon-help {
+ color-scheme: light;
+}
+.darkWallpaper .sponsored-content-highlight .icon-help {
+ color-scheme: dark;
+}
.sponsored-content-highlight .feature-highlight-modal.inset-inline-start::after {
margin-inline-end: 11px;
}
diff --git a/browser/components/newtab/css/activity-stream-mac.css b/browser/components/newtab/css/activity-stream-mac.css
index 7b5ef57cb530..a2591bff9490 100644
--- a/browser/components/newtab/css/activity-stream-mac.css
+++ b/browser/components/newtab/css/activity-stream-mac.css
@@ -38,12 +38,16 @@ input {
}
:root {
+ color-scheme: light;
--newtab-background-color: #F9F9FB;
--newtab-background-color-secondary: #FFF;
--newtab-text-primary-color: #15141a;
- --newtab-primary-action-background: #0061e0;
+ --newtab-contextual-text-primary-color: light-dark(var(--newtab-text-primary-color), #fbfbfe);
+ --newtab-primary-action-background: light-dark(#0061e0, #00ddff);
--newtab-primary-action-background-pocket: #008078;
--newtab-text-secondary-color: color-mix(in srgb, var(--newtab-text-primary-color) 70%, transparent);
+ --newtab-contextual-text-secondary-color: color-mix(in srgb, var(--newtab-contextual-text-primary-color) 70%, transparent);
+ --newtab-weather-background-color: light-dark(rgba(255, 255, 255, 70%), rgba(35, 34, 43, 70%));
--newtab-element-hover-color: color-mix(in srgb, var(--newtab-background-color) 90%, #000);
--newtab-element-active-color: color-mix(in srgb, var(--newtab-background-color) 80%, #000);
--newtab-button-background: var(--button-background-color);
@@ -52,10 +56,10 @@ input {
--newtab-button-hover-background: var(--button-background-color-hover);
--newtab-button-active-background: var(--button-background-color-active);
--newtab-button-text: var(--button-text-color);
- --newtab-button-static-background: #F0F0F4;
+ --newtab-button-static-background: light-dark(#F0F0F4, #2B2A33);
--newtab-button-static-focus-background: var(--newtab-button-static-background);
- --newtab-button-static-hover-background: #E0E0E6;
- --newtab-button-static-active-background: #CFCFD8;
+ --newtab-button-static-hover-background: light-dark(#E0E0E6, #52525E);
+ --newtab-button-static-active-background: light-dark(#CFCFD8, #5B5B66);
--newtab-element-secondary-color: color-mix(in srgb, currentColor 5%, transparent);
--newtab-element-secondary-hover-color: color-mix(in srgb, currentColor 12%, transparent);
--newtab-element-secondary-active-color: color-mix(in srgb, currentColor 25%, transparent);
@@ -66,7 +70,7 @@ input {
--newtab-primary-action-background-dimmed: color-mix(in srgb, var(--newtab-primary-action-background) 25%, transparent);
--newtab-primary-action-background-pocket-dimmed: color-mix(in srgb, var(--newtab-primary-action-background-pocket) 25%, transparent);
--newtab-border-color: color-mix(in srgb, var(--newtab-background-color) 75%, #000);
- --newtab-wordmark-color: #20123A;
+ --newtab-wordmark-color: light-dark(#20123A, #fbfbfe);
--newtab-status-success: #058B00;
--newtab-status-error: #D70022;
--newtab-inner-box-shadow-color: rgba(0, 0, 0, 0.1);
@@ -76,10 +80,10 @@ input {
--newtab-button-secondary-color: inherit;
}
:root[lwt-newtab-brighttext] {
+ color-scheme: dark;
--newtab-background-color: #2B2A33;
--newtab-background-color-secondary: #42414d;
- --newtab-text-primary-color: #fbfbfe;
- --newtab-primary-action-background: #00ddff;
+ --newtab-contextual-text-primary-color: light-dark(#15141a, var(--newtab-text-primary-color));
--newtab-primary-action-background-pocket: #00ddff;
--newtab-primary-action-background-pocket-dimmed: color-mix(in srgb, var(--newtab-primary-action-background) 25%, transparent);
--newtab-primary-element-hover-color: color-mix(in srgb, var(--newtab-primary-action-background) 55%, #FFF);
@@ -91,11 +95,7 @@ input {
--newtab-element-secondary-active-color: color-mix(in srgb, currentColor 30%, transparent);
--newtab-border-color: color-mix(in srgb, var(--newtab-background-color) 75%, #FFF);
--newtab-primary-element-text-color: #2b2a33;
- --newtab-wordmark-color: #fbfbfe;
--newtab-status-success: #7C6;
- --newtab-button-static-background: #2B2A33;
- --newtab-button-static-hover-background: #52525E;
- --newtab-button-static-active-background: #5B5B66;
}
@media (prefers-contrast) {
@@ -531,6 +531,13 @@ main section {
.wallpaper-attribution {
padding: 0 25px;
font-size: 14px;
+ color: var(--newtab-contextual-text-primary-color);
+}
+.lightWallpaper .wallpaper-attribution {
+ color-scheme: light;
+}
+.darkWallpaper .wallpaper-attribution {
+ color-scheme: dark;
}
.wallpaper-attribution.theme-light {
display: inline-block;
@@ -545,7 +552,7 @@ main section {
display: inline-block;
}
.wallpaper-attribution a {
- color: var(--newtab-element-color);
+ color: inherit;
}
.wallpaper-attribution a:hover {
text-decoration: none;
@@ -682,6 +689,12 @@ main section {
.top-site-outer:is(:hover) .context-menu-button {
opacity: 1;
}
+.lightWallpaper .top-site-outer:not(:hover, :active, .active) {
+ color-scheme: light;
+}
+.darkWallpaper .top-site-outer:not(:hover, :active, .active) {
+ color-scheme: dark;
+}
.top-site-outer.active .context-menu-button {
opacity: 1;
background-color: var(--newtab-button-active-background);
@@ -702,6 +715,12 @@ main section {
top: -20px;
transition: opacity 200ms;
}
+.lightWallpaper .top-site-outer .context-menu-button {
+ color-scheme: light;
+}
+.darkWallpaper .top-site-outer .context-menu-button {
+ color-scheme: dark;
+}
.top-site-outer .context-menu-button:hover {
background-color: var(--newtab-button-hover-background);
}
@@ -724,7 +743,7 @@ main section {
cursor: pointer;
position: relative;
align-items: center;
- color: var(--newtab-text-secondary-color);
+ color: var(--newtab-contextual-text-secondary-color);
display: flex;
font-size: 32px;
font-weight: 200;
@@ -813,7 +832,7 @@ main section {
-moz-context-properties: fill;
}
.top-site-outer .title {
- color: var(--newtab-text-primary-color);
+ color: var(--newtab-contextual-text-primary-color);
padding-top: 8px;
font: caption;
text-align: center;
@@ -830,7 +849,7 @@ main section {
white-space: nowrap;
}
.top-site-outer .title .sponsored-label {
- color: var(--newtab-text-secondary-color);
+ color: var(--newtab-contextual-text-secondary-color);
font-size: 0.9em;
}
.top-site-outer .title:not(.sponsored) .sponsored-label {
@@ -1273,6 +1292,12 @@ main section {
margin-inline-start: 16px;
width: 134px;
}
+.lightWallpaper .search-wrapper .logo-and-wordmark .wordmark {
+ color-scheme: light;
+}
+.darkWallpaper .search-wrapper .logo-and-wordmark .wordmark {
+ color-scheme: dark;
+}
@media (max-width: 609px) {
.search-wrapper .logo-and-wordmark .logo {
background-size: 64px;
@@ -1684,6 +1709,12 @@ main section {
background-color: transparent;
padding: 15px;
}
+.lightWallpaper .personalize-button:not(:hover, :active) {
+ color-scheme: light;
+}
+.darkWallpaper .personalize-button:not(:hover, :active) {
+ color-scheme: dark;
+}
.personalize-button:hover {
background-color: var(--newtab-element-hover-color);
}
@@ -1922,20 +1953,16 @@ main section {
padding: 0;
border: none;
}
-.wallpaper-list .wallpaper-input.theme-light,
-.wallpaper-list .sr-only.theme-light {
+.wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-light, .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-light {
display: inline-block;
}
-[lwt-newtab-brighttext] .wallpaper-list .wallpaper-input.theme-light,
-[lwt-newtab-brighttext] .wallpaper-list .sr-only.theme-light {
+[lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-light, [lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-light {
display: none;
}
-.wallpaper-list .wallpaper-input.theme-dark,
-.wallpaper-list .sr-only.theme-dark {
+.wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-dark, .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-dark {
display: none;
}
-[lwt-newtab-brighttext] .wallpaper-list .wallpaper-input.theme-dark,
-[lwt-newtab-brighttext] .wallpaper-list .sr-only.theme-dark {
+[lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-dark, [lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-dark {
display: inline-block;
}
.wallpaper-list .wallpaper-input {
@@ -2068,6 +2095,15 @@ main section {
.weatherSponsorText {
visibility: hidden;
font-size: var(--newtab-weather-sponsor-font-size);
+ color: var(--newtab-contextual-text-primary-color);
+}
+.lightWallpaper .weatherSponsorText {
+ color-scheme: light;
+}
+.darkWallpaper .weatherSponsorText {
+ color-scheme: dark;
+}
+.weatherSponsorText span {
color: var(--text-color-deemphasized);
}
@@ -2090,35 +2126,17 @@ main section {
.weatherInfoLink:focus-visible, .weatherButtonContextMenuWrapper:focus-visible {
outline: var(--focus-outline);
}
-@media (prefers-color-scheme: dark) {
- .hasWallpaperDark .weatherInfoLink, .hasWallpaperDark .weatherButtonContextMenuWrapper {
- background-color: rgba(35, 34, 43, 0.7);
- }
- .hasWallpaperDark .weatherInfoLink:hover, .hasWallpaperDark .weatherButtonContextMenuWrapper:hover {
- background-color: var(--newtab-button-static-hover-background);
- }
- .hasWallpaperDark .weatherInfoLink:hover:active, .hasWallpaperDark .weatherButtonContextMenuWrapper:hover:active {
- background-color: var(--newtab-button-static-active-background);
- }
+.lightWallpaper .weatherInfoLink, .darkWallpaper .weatherInfoLink, .lightWallpaper .weatherButtonContextMenuWrapper, .darkWallpaper .weatherButtonContextMenuWrapper {
+ background-color: var(--newtab-weather-background-color);
}
-@media (prefers-contrast) and (prefers-color-scheme: dark) {
- .hasWallpaperDark .weatherInfoLink, .hasWallpaperDark .weatherButtonContextMenuWrapper {
- background-color: var(--background-color-box);
- }
+.lightWallpaper .weatherInfoLink:hover, .darkWallpaper .weatherInfoLink:hover, .lightWallpaper .weatherButtonContextMenuWrapper:hover, .darkWallpaper .weatherButtonContextMenuWrapper:hover {
+ background-color: var(--newtab-button-static-hover-background);
}
-@media (prefers-color-scheme: light) {
- .hasWallpaperLight .weatherInfoLink, .hasWallpaperLight .weatherButtonContextMenuWrapper {
- background-color: rgba(255, 255, 255, 0.7);
- }
- .hasWallpaperLight .weatherInfoLink:hover, .hasWallpaperLight .weatherButtonContextMenuWrapper:hover {
- background-color: var(--newtab-button-static-hover-background);
- }
- .hasWallpaperLight .weatherInfoLink:hover:active, .hasWallpaperLight .weatherButtonContextMenuWrapper:hover:active {
- background-color: var(--newtab-button-static-active-background);
- }
+.lightWallpaper .weatherInfoLink:hover:active, .darkWallpaper .weatherInfoLink:hover:active, .lightWallpaper .weatherButtonContextMenuWrapper:hover:active, .darkWallpaper .weatherButtonContextMenuWrapper:hover:active {
+ background-color: var(--newtab-button-static-active-background);
}
-@media (prefers-contrast) and (prefers-color-scheme: light) {
- .hasWallpaperLight .weatherInfoLink, .hasWallpaperLight .weatherButtonContextMenuWrapper {
+@media (prefers-contrast) {
+ .lightWallpaper .weatherInfoLink, .darkWallpaper .weatherInfoLink, .lightWallpaper .weatherButtonContextMenuWrapper, .darkWallpaper .weatherButtonContextMenuWrapper {
background-color: var(--background-color-box);
}
}
@@ -2169,11 +2187,6 @@ main section {
position: absolute;
z-index: 0;
}
-@media (prefers-color-scheme: dark) {
- .weatherButtonContextMenuWrapper::after {
- background-color: var(--color-gray-70);
- }
-}
.weatherButtonContextMenuWrapper:hover::after {
background-color: transparent;
}
@@ -3137,11 +3150,19 @@ main section {
.ds-header,
.ds-layout .section-title span {
- color: var(--newtab-text-primary-color);
+ color: var(--newtab-contextual-text-primary-color);
font-size: 17px;
font-weight: 600;
line-height: 20px;
}
+.lightWallpaper .ds-header,
+.lightWallpaper .ds-layout .section-title span {
+ color-scheme: light;
+}
+.darkWallpaper .ds-header,
+.darkWallpaper .ds-layout .section-title span {
+ color-scheme: dark;
+}
.ds-header .icon,
.ds-layout .section-title span .icon {
fill: var(--newtab-text-secondary-color);
@@ -3154,6 +3175,12 @@ main section {
color: var(--newtab-primary-action-background);
font-weight: 500;
}
+.lightWallpaper .collapsible-section.ds-layout .section-top-bar .learn-more-link a {
+ color-scheme: light;
+}
+.darkWallpaper .collapsible-section.ds-layout .section-top-bar .learn-more-link a {
+ color-scheme: dark;
+}
.collapsible-section.ds-layout .section-top-bar .learn-more-link a:is(:focus, :hover) {
text-decoration: none;
}
@@ -3723,7 +3750,7 @@ main section {
/* stylelint-disable max-nesting-depth */
.ds-navigation {
- color: var(--newtab-text-primary-color);
+ color: var(--newtab-contextual-text-primary-color);
font-size: 11.5px;
font-weight: 500;
line-height: 22px;
@@ -3741,6 +3768,12 @@ main section {
.ds-navigation.ds-navigation-right-aligned {
text-align: end;
}
+.lightWallpaper .ds-navigation {
+ color-scheme: light;
+}
+.darkWallpaper .ds-navigation {
+ color-scheme: dark;
+}
.ds-navigation ul {
display: inline;
margin: 0;
@@ -4928,6 +4961,12 @@ main section {
color: var(--icon-color);
vertical-align: text-bottom;
}
+.lightWallpaper .sponsored-content-highlight .icon-help {
+ color-scheme: light;
+}
+.darkWallpaper .sponsored-content-highlight .icon-help {
+ color-scheme: dark;
+}
.sponsored-content-highlight .feature-highlight-modal.inset-inline-start::after {
margin-inline-end: 11px;
}
diff --git a/browser/components/newtab/css/activity-stream-windows.css b/browser/components/newtab/css/activity-stream-windows.css
index 96b27e6b5fe7..f77708da4f9d 100644
--- a/browser/components/newtab/css/activity-stream-windows.css
+++ b/browser/components/newtab/css/activity-stream-windows.css
@@ -34,12 +34,16 @@ input {
}
:root {
+ color-scheme: light;
--newtab-background-color: #F9F9FB;
--newtab-background-color-secondary: #FFF;
--newtab-text-primary-color: #15141a;
- --newtab-primary-action-background: #0061e0;
+ --newtab-contextual-text-primary-color: light-dark(var(--newtab-text-primary-color), #fbfbfe);
+ --newtab-primary-action-background: light-dark(#0061e0, #00ddff);
--newtab-primary-action-background-pocket: #008078;
--newtab-text-secondary-color: color-mix(in srgb, var(--newtab-text-primary-color) 70%, transparent);
+ --newtab-contextual-text-secondary-color: color-mix(in srgb, var(--newtab-contextual-text-primary-color) 70%, transparent);
+ --newtab-weather-background-color: light-dark(rgba(255, 255, 255, 70%), rgba(35, 34, 43, 70%));
--newtab-element-hover-color: color-mix(in srgb, var(--newtab-background-color) 90%, #000);
--newtab-element-active-color: color-mix(in srgb, var(--newtab-background-color) 80%, #000);
--newtab-button-background: var(--button-background-color);
@@ -48,10 +52,10 @@ input {
--newtab-button-hover-background: var(--button-background-color-hover);
--newtab-button-active-background: var(--button-background-color-active);
--newtab-button-text: var(--button-text-color);
- --newtab-button-static-background: #F0F0F4;
+ --newtab-button-static-background: light-dark(#F0F0F4, #2B2A33);
--newtab-button-static-focus-background: var(--newtab-button-static-background);
- --newtab-button-static-hover-background: #E0E0E6;
- --newtab-button-static-active-background: #CFCFD8;
+ --newtab-button-static-hover-background: light-dark(#E0E0E6, #52525E);
+ --newtab-button-static-active-background: light-dark(#CFCFD8, #5B5B66);
--newtab-element-secondary-color: color-mix(in srgb, currentColor 5%, transparent);
--newtab-element-secondary-hover-color: color-mix(in srgb, currentColor 12%, transparent);
--newtab-element-secondary-active-color: color-mix(in srgb, currentColor 25%, transparent);
@@ -62,7 +66,7 @@ input {
--newtab-primary-action-background-dimmed: color-mix(in srgb, var(--newtab-primary-action-background) 25%, transparent);
--newtab-primary-action-background-pocket-dimmed: color-mix(in srgb, var(--newtab-primary-action-background-pocket) 25%, transparent);
--newtab-border-color: color-mix(in srgb, var(--newtab-background-color) 75%, #000);
- --newtab-wordmark-color: #20123A;
+ --newtab-wordmark-color: light-dark(#20123A, #fbfbfe);
--newtab-status-success: #058B00;
--newtab-status-error: #D70022;
--newtab-inner-box-shadow-color: rgba(0, 0, 0, 0.1);
@@ -72,10 +76,10 @@ input {
--newtab-button-secondary-color: inherit;
}
:root[lwt-newtab-brighttext] {
+ color-scheme: dark;
--newtab-background-color: #2B2A33;
--newtab-background-color-secondary: #42414d;
- --newtab-text-primary-color: #fbfbfe;
- --newtab-primary-action-background: #00ddff;
+ --newtab-contextual-text-primary-color: light-dark(#15141a, var(--newtab-text-primary-color));
--newtab-primary-action-background-pocket: #00ddff;
--newtab-primary-action-background-pocket-dimmed: color-mix(in srgb, var(--newtab-primary-action-background) 25%, transparent);
--newtab-primary-element-hover-color: color-mix(in srgb, var(--newtab-primary-action-background) 55%, #FFF);
@@ -87,11 +91,7 @@ input {
--newtab-element-secondary-active-color: color-mix(in srgb, currentColor 30%, transparent);
--newtab-border-color: color-mix(in srgb, var(--newtab-background-color) 75%, #FFF);
--newtab-primary-element-text-color: #2b2a33;
- --newtab-wordmark-color: #fbfbfe;
--newtab-status-success: #7C6;
- --newtab-button-static-background: #2B2A33;
- --newtab-button-static-hover-background: #52525E;
- --newtab-button-static-active-background: #5B5B66;
}
@media (prefers-contrast) {
@@ -527,6 +527,13 @@ main section {
.wallpaper-attribution {
padding: 0 25px;
font-size: 14px;
+ color: var(--newtab-contextual-text-primary-color);
+}
+.lightWallpaper .wallpaper-attribution {
+ color-scheme: light;
+}
+.darkWallpaper .wallpaper-attribution {
+ color-scheme: dark;
}
.wallpaper-attribution.theme-light {
display: inline-block;
@@ -541,7 +548,7 @@ main section {
display: inline-block;
}
.wallpaper-attribution a {
- color: var(--newtab-element-color);
+ color: inherit;
}
.wallpaper-attribution a:hover {
text-decoration: none;
@@ -678,6 +685,12 @@ main section {
.top-site-outer:is(:hover) .context-menu-button {
opacity: 1;
}
+.lightWallpaper .top-site-outer:not(:hover, :active, .active) {
+ color-scheme: light;
+}
+.darkWallpaper .top-site-outer:not(:hover, :active, .active) {
+ color-scheme: dark;
+}
.top-site-outer.active .context-menu-button {
opacity: 1;
background-color: var(--newtab-button-active-background);
@@ -698,6 +711,12 @@ main section {
top: -20px;
transition: opacity 200ms;
}
+.lightWallpaper .top-site-outer .context-menu-button {
+ color-scheme: light;
+}
+.darkWallpaper .top-site-outer .context-menu-button {
+ color-scheme: dark;
+}
.top-site-outer .context-menu-button:hover {
background-color: var(--newtab-button-hover-background);
}
@@ -720,7 +739,7 @@ main section {
cursor: pointer;
position: relative;
align-items: center;
- color: var(--newtab-text-secondary-color);
+ color: var(--newtab-contextual-text-secondary-color);
display: flex;
font-size: 32px;
font-weight: 200;
@@ -809,7 +828,7 @@ main section {
-moz-context-properties: fill;
}
.top-site-outer .title {
- color: var(--newtab-text-primary-color);
+ color: var(--newtab-contextual-text-primary-color);
padding-top: 8px;
font: caption;
text-align: center;
@@ -826,7 +845,7 @@ main section {
white-space: nowrap;
}
.top-site-outer .title .sponsored-label {
- color: var(--newtab-text-secondary-color);
+ color: var(--newtab-contextual-text-secondary-color);
font-size: 0.9em;
}
.top-site-outer .title:not(.sponsored) .sponsored-label {
@@ -1269,6 +1288,12 @@ main section {
margin-inline-start: 16px;
width: 134px;
}
+.lightWallpaper .search-wrapper .logo-and-wordmark .wordmark {
+ color-scheme: light;
+}
+.darkWallpaper .search-wrapper .logo-and-wordmark .wordmark {
+ color-scheme: dark;
+}
@media (max-width: 609px) {
.search-wrapper .logo-and-wordmark .logo {
background-size: 64px;
@@ -1680,6 +1705,12 @@ main section {
background-color: transparent;
padding: 15px;
}
+.lightWallpaper .personalize-button:not(:hover, :active) {
+ color-scheme: light;
+}
+.darkWallpaper .personalize-button:not(:hover, :active) {
+ color-scheme: dark;
+}
.personalize-button:hover {
background-color: var(--newtab-element-hover-color);
}
@@ -1918,20 +1949,16 @@ main section {
padding: 0;
border: none;
}
-.wallpaper-list .wallpaper-input.theme-light,
-.wallpaper-list .sr-only.theme-light {
+.wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-light, .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-light {
display: inline-block;
}
-[lwt-newtab-brighttext] .wallpaper-list .wallpaper-input.theme-light,
-[lwt-newtab-brighttext] .wallpaper-list .sr-only.theme-light {
+[lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-light, [lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-light {
display: none;
}
-.wallpaper-list .wallpaper-input.theme-dark,
-.wallpaper-list .sr-only.theme-dark {
+.wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-dark, .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-dark {
display: none;
}
-[lwt-newtab-brighttext] .wallpaper-list .wallpaper-input.theme-dark,
-[lwt-newtab-brighttext] .wallpaper-list .sr-only.theme-dark {
+[lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-dark, [lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-dark {
display: inline-block;
}
.wallpaper-list .wallpaper-input {
@@ -2064,6 +2091,15 @@ main section {
.weatherSponsorText {
visibility: hidden;
font-size: var(--newtab-weather-sponsor-font-size);
+ color: var(--newtab-contextual-text-primary-color);
+}
+.lightWallpaper .weatherSponsorText {
+ color-scheme: light;
+}
+.darkWallpaper .weatherSponsorText {
+ color-scheme: dark;
+}
+.weatherSponsorText span {
color: var(--text-color-deemphasized);
}
@@ -2086,35 +2122,17 @@ main section {
.weatherInfoLink:focus-visible, .weatherButtonContextMenuWrapper:focus-visible {
outline: var(--focus-outline);
}
-@media (prefers-color-scheme: dark) {
- .hasWallpaperDark .weatherInfoLink, .hasWallpaperDark .weatherButtonContextMenuWrapper {
- background-color: rgba(35, 34, 43, 0.7);
- }
- .hasWallpaperDark .weatherInfoLink:hover, .hasWallpaperDark .weatherButtonContextMenuWrapper:hover {
- background-color: var(--newtab-button-static-hover-background);
- }
- .hasWallpaperDark .weatherInfoLink:hover:active, .hasWallpaperDark .weatherButtonContextMenuWrapper:hover:active {
- background-color: var(--newtab-button-static-active-background);
- }
+.lightWallpaper .weatherInfoLink, .darkWallpaper .weatherInfoLink, .lightWallpaper .weatherButtonContextMenuWrapper, .darkWallpaper .weatherButtonContextMenuWrapper {
+ background-color: var(--newtab-weather-background-color);
}
-@media (prefers-contrast) and (prefers-color-scheme: dark) {
- .hasWallpaperDark .weatherInfoLink, .hasWallpaperDark .weatherButtonContextMenuWrapper {
- background-color: var(--background-color-box);
- }
+.lightWallpaper .weatherInfoLink:hover, .darkWallpaper .weatherInfoLink:hover, .lightWallpaper .weatherButtonContextMenuWrapper:hover, .darkWallpaper .weatherButtonContextMenuWrapper:hover {
+ background-color: var(--newtab-button-static-hover-background);
}
-@media (prefers-color-scheme: light) {
- .hasWallpaperLight .weatherInfoLink, .hasWallpaperLight .weatherButtonContextMenuWrapper {
- background-color: rgba(255, 255, 255, 0.7);
- }
- .hasWallpaperLight .weatherInfoLink:hover, .hasWallpaperLight .weatherButtonContextMenuWrapper:hover {
- background-color: var(--newtab-button-static-hover-background);
- }
- .hasWallpaperLight .weatherInfoLink:hover:active, .hasWallpaperLight .weatherButtonContextMenuWrapper:hover:active {
- background-color: var(--newtab-button-static-active-background);
- }
+.lightWallpaper .weatherInfoLink:hover:active, .darkWallpaper .weatherInfoLink:hover:active, .lightWallpaper .weatherButtonContextMenuWrapper:hover:active, .darkWallpaper .weatherButtonContextMenuWrapper:hover:active {
+ background-color: var(--newtab-button-static-active-background);
}
-@media (prefers-contrast) and (prefers-color-scheme: light) {
- .hasWallpaperLight .weatherInfoLink, .hasWallpaperLight .weatherButtonContextMenuWrapper {
+@media (prefers-contrast) {
+ .lightWallpaper .weatherInfoLink, .darkWallpaper .weatherInfoLink, .lightWallpaper .weatherButtonContextMenuWrapper, .darkWallpaper .weatherButtonContextMenuWrapper {
background-color: var(--background-color-box);
}
}
@@ -2165,11 +2183,6 @@ main section {
position: absolute;
z-index: 0;
}
-@media (prefers-color-scheme: dark) {
- .weatherButtonContextMenuWrapper::after {
- background-color: var(--color-gray-70);
- }
-}
.weatherButtonContextMenuWrapper:hover::after {
background-color: transparent;
}
@@ -3133,11 +3146,19 @@ main section {
.ds-header,
.ds-layout .section-title span {
- color: var(--newtab-text-primary-color);
+ color: var(--newtab-contextual-text-primary-color);
font-size: 17px;
font-weight: 600;
line-height: 20px;
}
+.lightWallpaper .ds-header,
+.lightWallpaper .ds-layout .section-title span {
+ color-scheme: light;
+}
+.darkWallpaper .ds-header,
+.darkWallpaper .ds-layout .section-title span {
+ color-scheme: dark;
+}
.ds-header .icon,
.ds-layout .section-title span .icon {
fill: var(--newtab-text-secondary-color);
@@ -3150,6 +3171,12 @@ main section {
color: var(--newtab-primary-action-background);
font-weight: 500;
}
+.lightWallpaper .collapsible-section.ds-layout .section-top-bar .learn-more-link a {
+ color-scheme: light;
+}
+.darkWallpaper .collapsible-section.ds-layout .section-top-bar .learn-more-link a {
+ color-scheme: dark;
+}
.collapsible-section.ds-layout .section-top-bar .learn-more-link a:is(:focus, :hover) {
text-decoration: none;
}
@@ -3719,7 +3746,7 @@ main section {
/* stylelint-disable max-nesting-depth */
.ds-navigation {
- color: var(--newtab-text-primary-color);
+ color: var(--newtab-contextual-text-primary-color);
font-size: 11.5px;
font-weight: 500;
line-height: 22px;
@@ -3737,6 +3764,12 @@ main section {
.ds-navigation.ds-navigation-right-aligned {
text-align: end;
}
+.lightWallpaper .ds-navigation {
+ color-scheme: light;
+}
+.darkWallpaper .ds-navigation {
+ color-scheme: dark;
+}
.ds-navigation ul {
display: inline;
margin: 0;
@@ -4924,6 +4957,12 @@ main section {
color: var(--icon-color);
vertical-align: text-bottom;
}
+.lightWallpaper .sponsored-content-highlight .icon-help {
+ color-scheme: light;
+}
+.darkWallpaper .sponsored-content-highlight .icon-help {
+ color-scheme: dark;
+}
.sponsored-content-highlight .feature-highlight-modal.inset-inline-start::after {
margin-inline-end: 11px;
}
diff --git a/browser/components/newtab/data/content/activity-stream.bundle.js b/browser/components/newtab/data/content/activity-stream.bundle.js
index 45705fe58cf3..f06df950fae0 100644
--- a/browser/components/newtab/data/content/activity-stream.bundle.js
+++ b/browser/components/newtab/data/content/activity-stream.bundle.js
@@ -8993,22 +8993,34 @@ class _WallpapersSection extends (external_React_default()).PureComponent {
} = event.target;
const prefs = this.props.Prefs.values;
const colorMode = this.prefersDarkQuery?.matches ? "dark" : "light";
- this.props.setPref(`newtabWallpapers.wallpaper-${colorMode}`, id);
+ if (prefs["newtabWallpapers.v2.enabled"]) {
+ // If we don't care about color mode, set both to the same wallpaper.
+ this.props.setPref(`newtabWallpapers.wallpaper-dark`, id);
+ this.props.setPref(`newtabWallpapers.wallpaper-light`, id);
+ } else {
+ this.props.setPref(`newtabWallpapers.wallpaper-${colorMode}`, id);
+ // bug 1892095
+ if (prefs["newtabWallpapers.wallpaper-dark"] === "" && colorMode === "light") {
+ this.props.setPref("newtabWallpapers.wallpaper-dark", id.replace("light", "dark"));
+ }
+ if (prefs["newtabWallpapers.wallpaper-light"] === "" && colorMode === "dark") {
+ this.props.setPref(`newtabWallpapers.wallpaper-light`, id.replace("dark", "light"));
+ }
+ }
this.handleUserEvent({
selected_wallpaper: id,
hadPreviousWallpaper: !!this.props.activeWallpaper
});
- // bug 1892095
- if (prefs["newtabWallpapers.wallpaper-dark"] === "" && colorMode === "light") {
- this.props.setPref("newtabWallpapers.wallpaper-dark", id.replace("light", "dark"));
- }
- if (prefs["newtabWallpapers.wallpaper-light"] === "" && colorMode === "dark") {
- this.props.setPref(`newtabWallpapers.wallpaper-light`, id.replace("dark", "light"));
- }
}
handleReset() {
+ const prefs = this.props.Prefs.values;
const colorMode = this.prefersDarkQuery?.matches ? "dark" : "light";
- this.props.setPref(`newtabWallpapers.wallpaper-${colorMode}`, "");
+ if (prefs["newtabWallpapers.v2.enabled"]) {
+ this.props.setPref("newtabWallpapers.wallpaper-light", "");
+ this.props.setPref("newtabWallpapers.wallpaper-dark", "");
+ } else {
+ this.props.setPref(`newtabWallpapers.wallpaper-${colorMode}`, "");
+ }
this.handleUserEvent({
selected_wallpaper: "none",
hadPreviousWallpaper: !!this.props.activeWallpaper
@@ -9029,8 +9041,13 @@ class _WallpapersSection extends (external_React_default()).PureComponent {
const {
activeWallpaper
} = this.props;
+ const prefs = this.props.Prefs.values;
+ let fieldsetClassname = `wallpaper-list`;
+ if (prefs["newtabWallpapers.v2.enabled"]) {
+ fieldsetClassname += " ignore-color-mode";
+ }
return /*#__PURE__*/external_React_default().createElement("div", null, /*#__PURE__*/external_React_default().createElement("fieldset", {
- className: "wallpaper-list"
+ className: fieldsetClassname
}, wallpaperList.map(({
title,
theme,
@@ -9836,10 +9853,11 @@ class _Weather extends (external_React_default()).PureComponent {
link: "https://support.mozilla.org/kb/customize-items-on-firefox-new-tab-page",
shouldSendImpressionStats: shouldSendImpressionStats
}) : null))), /*#__PURE__*/external_React_default().createElement("span", {
- "data-l10n-id": "newtab-weather-sponsored",
- "data-l10n-args": "{\"provider\": \"AccuWeather\"}",
className: "weatherSponsorText"
- }));
+ }, /*#__PURE__*/external_React_default().createElement("span", {
+ "data-l10n-id": "newtab-weather-sponsored",
+ "data-l10n-args": "{\"provider\": \"AccuWeather\"}"
+ })));
}
return /*#__PURE__*/external_React_default().createElement("div", {
ref: this.setErrorRef,
@@ -10100,12 +10118,19 @@ class BaseContent extends (external_React_default()).PureComponent {
__webpack_require__.g.document?.body.style.setProperty(`--newtab-wallpaper-light`, `url(${lightWallpaper?.wallpaperUrl || ""})`);
__webpack_require__.g.document?.body.style.setProperty(`--newtab-wallpaper-dark`, `url(${darkWallpaper?.wallpaperUrl || ""})`);
+ // Grab the contrast of the currently displayed wallpaper.
+ const {
+ theme
+ } = this.state.colorMode === "light" ? lightWallpaper : darkWallpaper;
+
// Add helper class to body if user has a wallpaper selected
- if (lightWallpaper) {
- __webpack_require__.g.document?.body.classList.add("hasWallpaperLight");
+ if (theme === "light") {
+ __webpack_require__.g.document?.body.classList.add("lightWallpaper");
+ __webpack_require__.g.document?.body.classList.remove("darkWallpaper");
}
- if (darkWallpaper) {
- __webpack_require__.g.document?.body.classList.add("hasWallpaperDark");
+ if (theme === "dark") {
+ __webpack_require__.g.document?.body.classList.add("darkWallpaper");
+ __webpack_require__.g.document?.body.classList.remove("lightWallpaper");
}
}
}
diff --git a/browser/components/newtab/lib/ActivityStream.sys.mjs b/browser/components/newtab/lib/ActivityStream.sys.mjs
index 430707ab5bda..c73b98260822 100644
--- a/browser/components/newtab/lib/ActivityStream.sys.mjs
+++ b/browser/components/newtab/lib/ActivityStream.sys.mjs
@@ -292,7 +292,14 @@ export const PREFS_CONFIG = new Map([
"newtabWallpapers.enabled",
{
title: "Boolean flag to turn wallpaper functionality on and off",
- value: true,
+ value: false,
+ },
+ ],
+ [
+ "newtabWallpapers.v2.enabled",
+ {
+ title: "Boolean flag to turn wallpaper v2 functionality on and off",
+ value: false,
},
],
[