Skip to content

Commit e26d0e4

Browse files
author
Niklas Baumgardner
committed
Bug 1957460 - Update themes on about:editprofile. r=profiles-reviewers,fluent-reviewers,bolsson,tbersentes
Differential Revision: https://phabricator.services.mozilla.com/D260751
1 parent 84cf97f commit e26d0e4

File tree

3 files changed

+175
-94
lines changed

3 files changed

+175
-94
lines changed

‎browser/components/profiles/ProfilesParent.sys.mjs‎

Lines changed: 164 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -11,138 +11,220 @@ const PROFILE_THEMES_MAP = new Map([
1111
[
1212
"firefox-compact-light@mozilla.org",
1313
{
14-
dataL10nId: "profiles-light-theme",
14+
dataL10nId: "profiles-gray-theme",
1515
colors: {
16-
chromeColor: "#F0F0F4",
17-
toolbarColor: "#F9F9FB",
18-
contentColor: "#FFFFFF",
16+
light: {
17+
chromeColor: "rgb(234, 234, 237)", // frame
18+
toolbarColor: "rgb(255, 255, 255)", // sidebar?
19+
contentColor: "#F9F9FB", // ntp_background
20+
},
1921
},
2022
isDark: false,
2123
useInAutomation: true,
2224
},
2325
],
2426
[
25-
"{b90acfd0-f0fc-4add-9195-f6306d25cdfa}",
27+
"firefox-compact-dark@mozilla.org",
28+
{
29+
dataL10nId: "profiles-gray-theme",
30+
colors: {
31+
dark: {
32+
chromeColor: "rgb(28, 27, 34)",
33+
toolbarColor: "rgb(28, 27, 34)",
34+
contentColor: "rgb(43, 42, 51)",
35+
},
36+
},
37+
isDark: true,
38+
useInAutomation: true,
39+
},
40+
],
41+
[
42+
"{cd6791f7-4b6d-47b4-8877-1d4c82c6699d}",
2643
{
27-
dataL10nId: "profiles-marigold-theme-2",
44+
dataL10nId: "profiles-yellow-theme",
2845
downloadURL:
29-
"https://addons.mozilla.org/firefox/downloads/file/4381985/marigold-1.9.xpi",
46+
"https://addons.mozilla.org/firefox/downloads/file/4552782/profiles_yellow-1.0.xpi",
3047
colors: {
31-
chromeColor: "#F1CA52",
32-
toolbarColor: "#FBDF8C",
33-
contentColor: "#FEF7E0",
48+
light: {
49+
chromeColor: "rgb(255, 230, 153)",
50+
toolbarColor: "rgb(255, 255, 255)",
51+
contentColor: "rgb(255, 244, 208)",
52+
},
53+
dark: {
54+
chromeColor: "rgb(39, 16, 0)",
55+
toolbarColor: "rgb(22, 22, 22)",
56+
contentColor: "rgb(66, 27, 0)",
57+
},
3458
},
35-
isDark: false,
3659
},
3760
],
3861
[
39-
"{388d9fae-8a28-4f9f-9aad-fb9e84e4f3c3}",
62+
"{7a301b7b-c3e2-40bf-a06b-6d517bbf138b}",
4063
{
41-
dataL10nId: "profiles-lichen-theme-2",
64+
dataL10nId: "profiles-orange-theme",
4265
downloadURL:
43-
"https://addons.mozilla.org/firefox/downloads/file/4381979/lichen_soft-1.3.xpi",
66+
"https://addons.mozilla.org/firefox/downloads/file/4552788/profiles_orange-1.0.xpi",
4467
colors: {
45-
chromeColor: "#D2E4DA",
46-
toolbarColor: "#E9F2EC",
47-
contentColor: "#F5F9F7",
68+
light: {
69+
chromeColor: "rgb(255, 205, 158)",
70+
toolbarColor: "rgb(255, 255, 255)",
71+
contentColor: "rgb(255, 237, 214)",
72+
},
73+
dark: {
74+
chromeColor: "rgb(39, 15, 0)",
75+
toolbarColor: "rgb(22, 22, 22)",
76+
contentColor: "rgb(72, 18, 0)",
77+
},
4878
},
49-
isDark: false,
5079
},
5180
],
5281
[
53-
"{3ac3b0d7-f017-40e1-b142-a26f794e7015}",
82+
"{8de5f8c3-bfc2-443b-9913-7bbadbd1ba0d}",
5483
{
55-
dataL10nId: "profiles-magnolia-theme-2",
84+
dataL10nId: "profiles-red-theme",
5685
downloadURL:
57-
"https://addons.mozilla.org/firefox/downloads/file/4381978/magnolia-1.1.xpi",
86+
"https://addons.mozilla.org/firefox/downloads/file/4552785/profiles_red-1.0.xpi",
5887
colors: {
59-
chromeColor: "#FB5B9E",
60-
toolbarColor: "#F986B6",
61-
contentColor: "#FBE0ED",
88+
light: {
89+
chromeColor: "rgb(255, 195, 201)",
90+
toolbarColor: "rgb(255, 255, 255)",
91+
contentColor: "rgb(255, 232, 234)",
92+
},
93+
dark: {
94+
chromeColor: "rgb(41, 11, 15)",
95+
toolbarColor: "rgb(22, 22, 22)",
96+
contentColor: "rgb(76, 5, 22)",
97+
},
6298
},
63-
isDark: false,
6499
},
65100
],
66101
[
67-
"{ba48d251-0732-45c2-9f2f-39c68e82d047}",
102+
"{2b0fadbf-238d-43db-aa9d-e06c9a7e000b}",
68103
{
69-
dataL10nId: "profiles-lavender-theme-2",
104+
dataL10nId: "profiles-pink-theme",
70105
downloadURL:
71-
"https://addons.mozilla.org/firefox/downloads/file/4381983/lavender_soft-1.2.xpi",
106+
"https://addons.mozilla.org/firefox/downloads/file/4552787/profiles_pink-1.0.xpi",
72107
colors: {
73-
chromeColor: "#CDC1EA",
74-
toolbarColor: "#EBE4FA",
75-
contentColor: "#F4F0FD",
108+
light: {
109+
chromeColor: "rgb(255, 194, 219)",
110+
toolbarColor: "rgb(255, 255, 255)",
111+
contentColor: "rgb(255, 232, 244)",
112+
},
113+
dark: {
114+
chromeColor: "rgb(39, 11, 21)",
115+
toolbarColor: "rgb(22, 22, 22)",
116+
contentColor: "rgb(73, 6, 36)",
117+
},
76118
},
77-
isDark: false,
78119
},
79120
],
80121
[
81-
"firefox-compact-dark@mozilla.org",
122+
"{1d73a1eb-128d-4e9e-83f8-c0c51f8c5fd3}",
82123
{
83-
dataL10nId: "profiles-dark-theme",
124+
dataL10nId: "profiles-purple-theme",
125+
downloadURL:
126+
"https://addons.mozilla.org/firefox/downloads/file/4552786/profiles_purple-1.0.xpi",
84127
colors: {
85-
chromeColor: "#1C1B22",
86-
toolbarColor: "#2B2A33",
87-
contentColor: "#42414D",
128+
light: {
129+
chromeColor: "rgb(247, 202, 255)",
130+
toolbarColor: "rgb(255, 255, 255)",
131+
contentColor: "rgb(255, 236, 255)",
132+
},
133+
dark: {
134+
chromeColor: "rgb(30, 14, 37)",
135+
toolbarColor: "rgb(22, 22, 22)",
136+
contentColor: "rgb(56, 17, 71)",
137+
},
88138
},
89-
isDark: true,
90-
useInAutomation: true,
91139
},
92140
],
93141
[
94-
"{750fa518-b61f-4068-9974-330dcf45442f}",
142+
"{aab1adac-5449-47fd-b836-c2f43dc28f3f}",
95143
{
96-
dataL10nId: "profiles-ocean-theme-2",
144+
dataL10nId: "profiles-violet-theme",
97145
downloadURL:
98-
"https://addons.mozilla.org/firefox/downloads/file/4381977/ocean_dark-1.1.xpi",
146+
"https://addons.mozilla.org/firefox/downloads/file/4552784/profiles_violet-1.0.xpi",
99147
colors: {
100-
chromeColor: "#080D33",
101-
toolbarColor: "#050D5B",
102-
contentColor: "#000511",
148+
light: {
149+
chromeColor: "rgb(221, 207, 255)",
150+
toolbarColor: "rgb(255, 255, 255)",
151+
contentColor: "rgb(244, 240, 255)",
152+
},
153+
dark: {
154+
chromeColor: "rgb(22, 17, 43)",
155+
toolbarColor: "rgb(22, 22, 22)",
156+
contentColor: "rgb(40, 25, 83)",
157+
},
103158
},
104-
isDark: true,
105159
},
106160
],
107161
[
108-
"{25b5a343-4238-4bae-b1f9-93a33f258167}",
162+
"{4223a94a-d3f9-40e9-95dd-99aca80ea04b}",
109163
{
110-
dataL10nId: "profiles-terracotta-theme-2",
164+
dataL10nId: "profiles-blue-theme",
111165
downloadURL:
112-
"https://addons.mozilla.org/firefox/downloads/file/4381976/terracotta_dark-1.1.xpi",
166+
"https://addons.mozilla.org/firefox/downloads/file/4551961/profiles_blue-1.0.xpi",
113167
colors: {
114-
chromeColor: "#591305",
115-
toolbarColor: "#98240B",
116-
contentColor: "#060100",
168+
light: {
169+
chromeColor: "rgb(171, 223, 255)",
170+
toolbarColor: "rgb(255, 255, 255)",
171+
contentColor: "rgb(226, 247, 255)",
172+
},
173+
dark: {
174+
chromeColor: "rgb(8, 21, 44)",
175+
toolbarColor: "rgb(22, 22, 22)",
176+
contentColor: "rgb(4, 35, 86)",
177+
},
117178
},
118-
isDark: true,
119179
},
120180
],
121181
[
122-
"{f9261f02-c03c-4352-92ee-78dd8b41ca98}",
182+
"{7063abff-a690-4b87-a548-fc32d3ce5708}",
123183
{
124-
dataL10nId: "profiles-moss-theme-2",
184+
dataL10nId: "profiles-green-theme",
125185
downloadURL:
126-
"https://addons.mozilla.org/firefox/downloads/file/4381975/moss_dark-1.1.xpi",
186+
"https://addons.mozilla.org/firefox/downloads/file/4552789/profiles_green-1.0.xpi",
127187
colors: {
128-
chromeColor: "#405948",
129-
toolbarColor: "#5B7B65",
130-
contentColor: "#323433",
188+
light: {
189+
chromeColor: "rgb(181, 240, 181)",
190+
toolbarColor: "rgb(255, 255, 255)",
191+
contentColor: "rgb(225, 255, 225)",
192+
},
193+
dark: {
194+
chromeColor: "rgb(5, 28, 7)",
195+
toolbarColor: "rgb(22, 22, 22)",
196+
contentColor: "rgb(0, 50, 0)",
197+
},
131198
},
132-
isDark: true,
133199
},
134200
],
135201
[
136-
"default-theme@mozilla.org",
202+
"{0683b144-0d4a-4815-963e-55a8ec8d386b}",
137203
{
138-
dataL10nId: "profiles-system-theme",
204+
dataL10nId: "profiles-cyan-theme",
205+
downloadURL:
206+
"https://addons.mozilla.org/firefox/downloads/file/4552790/profiles_cyan-1.0.xpi",
139207
colors: {
140-
chromeColor: "#1C1B22",
141-
toolbarColor: "#2B2A33",
142-
contentColor: "#42414D",
208+
light: {
209+
chromeColor: "rgb(166, 236, 244)",
210+
toolbarColor: "rgb(255, 255, 255)",
211+
contentColor: "rgb(207, 255, 255)",
212+
},
213+
dark: {
214+
chromeColor: "rgb(0, 31, 43)",
215+
toolbarColor: "rgb(22, 22, 22)",
216+
contentColor: "rgb(0, 50, 61)",
217+
},
143218
},
144219
},
145220
],
221+
[
222+
"default-theme@mozilla.org",
223+
{
224+
dataL10nId: "profiles-system-theme",
225+
colors: {},
226+
},
227+
],
146228
]);
147229

148230
ChromeUtils.defineESModuleGetters(lazy, {
@@ -176,12 +258,12 @@ export class ProfilesParent extends JSWindowActorParent {
176258
favicon.classList.remove("profiles-tab");
177259
}
178260

179-
async #getProfileContent() {
261+
async #getProfileContent(isDark) {
180262
// Make sure SelectableProfileService is initialized
181263
await SelectableProfileService.init();
182264
let currentProfile = SelectableProfileService.currentProfile;
183265
let profiles = await SelectableProfileService.getAllProfiles();
184-
let themes = await this.getSafeForContentThemes();
266+
let themes = await this.getSafeForContentThemes(isDark);
185267
return {
186268
currentProfile: await currentProfile.toContentSafeObject(),
187269
profiles: await Promise.all(profiles.map(p => p.toContentSafeObject())),
@@ -236,11 +318,17 @@ export class ProfilesParent extends JSWindowActorParent {
236318
}
237319
case "Profiles:GetNewProfileContent": {
238320
Glean.profilesNew.displayed.record();
239-
return this.#getProfileContent();
321+
let isDark = gBrowser.selectedBrowser.ownerGlobal.matchMedia(
322+
"(-moz-system-dark-theme)"
323+
).matches;
324+
return this.#getProfileContent(isDark);
240325
}
241326
case "Profiles:GetEditProfileContent": {
242327
Glean.profilesExisting.displayed.record();
243-
return this.#getProfileContent();
328+
let isDark = gBrowser.selectedBrowser.ownerGlobal.matchMedia(
329+
"(-moz-system-dark-theme)"
330+
).matches;
331+
return this.#getProfileContent(isDark);
244332
}
245333
case "Profiles:MoreThemes": {
246334
if (message.data.source === "about:editprofile") {
@@ -394,16 +482,20 @@ export class ProfilesParent extends JSWindowActorParent {
394482
await theme.enable();
395483
}
396484

397-
async getSafeForContentThemes() {
485+
async getSafeForContentThemes(isDark) {
486+
let lightDark = isDark ? "dark" : "light";
398487
let themes = [];
399488
for (let [themeId, themeObj] of PROFILE_THEMES_MAP) {
489+
if (Object.hasOwn(themeObj, "isDark") && themeObj.isDark !== isDark) {
490+
continue;
491+
}
492+
400493
let theme = await lazy.AddonManager.getAddonByID(themeId);
401494
themes.push({
402495
id: themeId,
403496
dataL10nId: themeObj.dataL10nId,
404497
isActive: theme?.isActive ?? false,
405-
...themeObj.colors,
406-
isDark: themeObj.isDark,
498+
...themeObj.colors[lightDark],
407499
useInAutomation: themeObj?.useInAutomation,
408500
});
409501
}

‎browser/components/profiles/content/new-profile-card.mjs‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,7 @@ export class NewProfileCard extends EditProfileCard {
4848
return;
4949
}
5050

51-
let isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
52-
let possibleThemes = this.themes.filter(t => t.isDark === isDark);
51+
let possibleThemes = this.themes;
5352
if (isInAutomation) {
5453
possibleThemes = possibleThemes.filter(t => t.useInAutomation);
5554
}

‎browser/locales/en-US/browser/profiles.ftl‎

Lines changed: 10 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -98,26 +98,16 @@ delete-profile-confirm = Delete
9898
9999
## These strings are color themes available to select from the profile selection screen. Theme names should be localized.
100100

101-
# This light theme features sunny colors such as goldenrod and pale yellow. Its name evokes the color of a marigold flower. This name can be translated directly if it's easily understood in your language, or adapted to a more natural sounding name that fits the color scheme.
102-
profiles-marigold-theme-2 = Marigold yellow
103-
104-
# This light theme features various shades of soft, muted purples. Its name evokes the color of a lavender flower. This name can be translated directly if it's easily understood in your language, or adapted to a more natural sounding name that fits the color scheme.
105-
profiles-lavender-theme-2 = Pale lavender
106-
107-
# This light theme features very pale green tones. Its name evokes the color of pale green mint ice cream. This name can be translated directly if it's easily understood in your language, or adapted to a more natural sounding name that fits the color scheme.
108-
profiles-lichen-theme-2 = Minty green
109-
110-
# This light theme features various shades of pink ranging from pale to bold. Its name evokes the color of a pink magnolia flower. This name can be translated directly if it's easily understood in your language, or adapted to a more natural sounding name that fits the color scheme.
111-
profiles-magnolia-theme-2 = Magnolia pink
112-
113-
# Ocean blue is a dark theme that features very dark blues and black. Its name evokes the color of the deep ocean water. This name can be translated directly if it's easily understood in your language, or adapted to a more natural sounding name that fits the color scheme.
114-
profiles-ocean-theme-2 = Ocean blue
115-
116-
# This dark theme features warm oranges, dark mahogany browns, and earthy red/brown colors. The name evokes the earthy colors of brick masonry. This name can be translated directly if it's easily understood in your language, or adapted to a more natural sounding name that fits the color scheme.
117-
profiles-terracotta-theme-2 = Brick red
118-
119-
# This dark theme features forest green, dusky green with a gray undertone, and a muted sage green. Its name evokes the rich color of green moss in the forest. This name can be translated directly if its easily understood in your language, or adapted to a more natural sounding name that fits the color scheme.
120-
profiles-moss-theme-2 = Moss green
101+
profiles-gray-theme = Gray
102+
profiles-yellow-theme = Yellow
103+
profiles-orange-theme = Orange
104+
profiles-red-theme = Red
105+
profiles-pink-theme = Pink
106+
profiles-purple-theme = Purple
107+
profiles-violet-theme = Violet
108+
profiles-blue-theme = Blue
109+
profiles-green-theme = Green
110+
profiles-cyan-theme = Cyan
121111
122112
# The default light theme
123113
profiles-light-theme = Light

0 commit comments

Comments
 (0)