Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-08 02:14:43 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1786627 - Let contentTheme.js set the color scheme so common-shared.css can honor it. r=sfoster

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D155477
This commit is contained in:
Dão Gottwald 2022-08-26 11:26:21 +00:00
parent 4d7b018d55
commit a5b9c5d73e
2 changed files with 20 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
browser/base/content/contentTheme.js
View File

@ -37,21 +37,31 @@
{
lwtProperty: "ntp_text",
processColor(rgbaChannels, element) {
// We only have access to the browser when we're in a chrome
// docshell, so for now only set the color scheme in that case, and
// use the `lwt-newtab-brighttext` attribute as a fallback mechanism.
let browserStyle =
element.ownerGlobal?.docShell?.chromeEventHandler.style;
if (!rgbaChannels) {
element.removeAttribute("lwt-newtab");
element.toggleAttribute(
"lwt-newtab-brighttext",
prefersDarkQuery.matches
);
if (browserStyle) {
browserStyle.colorScheme = "";
}
return null;
}
element.setAttribute("lwt-newtab", "true");
const { r, g, b, a } = rgbaChannels;
element.toggleAttribute(
"lwt-newtab-brighttext",
!_isTextColorDark(r, g, b)
);
let darkMode = !_isTextColorDark(r, g, b);
element.toggleAttribute("lwt-newtab-brighttext", darkMode);
if (browserStyle) {
browserStyle.colorScheme = darkMode ? "dark" : "light";
}
return `rgba(${r}, ${g}, ${b}, ${a})`;
},

10
browser/components/firefoxview/firefoxview.css
View File

@ -72,10 +72,12 @@ body {
color: var(--newtab-text-primary-color);
}
body[lwt-newtab-brighttext] {
--fxview-element-hover-color: color-mix(in srgb, var(--fxview-background-color) 80%, white);
--fxview-element-active-color: color-mix(in srgb, var(--fxview-background-color) 60%, white);
--newtab-background-color-secondary: #42414d;
@media (prefers-color-scheme: dark) {
body {
--fxview-element-hover-color: color-mix(in srgb, var(--fxview-background-color) 80%, white);
--fxview-element-active-color: color-mix(in srgb, var(--fxview-background-color) 60%, white);
--newtab-background-color-secondary: #42414d;
}
}
h1 {