Closed Bug 1525442 Opened 1 year ago Closed 1 year ago

Dark mode support for Pocket Newtab

Categories

(Firefox :: New Tab Page, enhancement, P1)

enhancement

Tracking

()

VERIFIED FIXED
Firefox 67
Iteration:
68.1 - Mar 18 - 31
Tracking Status
firefox66 --- wontfix
firefox67 --- verified
firefox68 --- verified

People

(Reporter: andreio, Assigned: gsuntop)

References

Details

(Keywords: github-merged)

Attachments

(3 files, 2 obsolete files)

Right now we're only supporting the light theme.

Iteration: --- → 67.4 - Mar 11 - 17
Priority: -- → P1
Iteration: 67.4 - Mar 11 - 17 → 68.1 - Mar 18 - 31
Iteration: 68.1 - Mar 18 - 31 → 67.3 - Feb 25 - Mar 10

can you take this and get a spec written, wolasi?

Iteration: 67.3 - Feb 25 - Mar 10 → 67.2 - Feb 11 - 24
Flags: needinfo?(wkonu)
Severity: normal → enhancement
Keywords: uiwanted

Dark theme primarily involves changing the background and text color. Colors are based on the dark theme for the current version of New Tab

Dark Theme Colors
Blue 40 #0060DF
Blue 50 #0A84FF
Teal 60 #00C8D7
Teal 70 #008EA4
Grey 80 #2A2A2E
Grey 70 #38383D
Grey 60 #4A4A4F
Grey 30 #D7D7DB
White 100 #FFFFFF

Dark Theme Colors Spec
https://www.figma.com/file/HAk87Z6QBcu6YxBIoXN6LJcU/Firefox-Home-Components?node-id=1204%3A0

Message, Section Title, Component Header, Navigation
https://www.figma.com/file/HAk87Z6QBcu6YxBIoXN6LJcU/Firefox-Home-Components?node-id=1204%3A475

Hero
Note this spec shows the border variant, but the changes should apply to all hero permutations
https://www.figma.com/file/HAk87Z6QBcu6YxBIoXN6LJcU/Firefox-Home-Components?node-id=1204%3A43

Hero UX
https://www.figma.com/file/HAk87Z6QBcu6YxBIoXN6LJcU/Firefox-Home-Components?node-id=1218%3A0

Card Grid
https://www.figma.com/file/HAk87Z6QBcu6YxBIoXN6LJcU/Firefox-Home-Components?node-id=1204%3A216

Card UX
https://www.figma.com/file/HAk87Z6QBcu6YxBIoXN6LJcU/Firefox-Home-Components?node-id=1204%3A242

Lists
https://www.figma.com/file/HAk87Z6QBcu6YxBIoXN6LJcU/Firefox-Home-Components?node-id=1204%3A347

Numbered Lists
Note the background color for the numbers is not the same as the text color for source urls
https://www.figma.com/file/HAk87Z6QBcu6YxBIoXN6LJcU/Firefox-Home-Components?node-id=1204%3A402

List UX
https://www.figma.com/file/HAk87Z6QBcu6YxBIoXN6LJcU/Firefox-Home-Components?node-id=1204%3A297

Note
Once Dark Theme has been implemented, the Dark Theme Not Available disclosure above Top Sites should be removed.

Assignee: nobody → gsuntop
Flags: needinfo?(wkonu)
Keywords: uiwanted

Note: Dark mode selector is body[lwt-newtab-brighttext]. Also see : _theme.scss

Iteration: 67.2 - Feb 11 - 24 → 68.1 - Mar 18 - 31
Attached image dark-theme-proof.jpg (obsolete) —

@Wolasi - Attaching a screenshot of dev-test-all for you to do a design review. Please leave requested tweaks in this ticket. Thanks!

Attachment #9047129 - Flags: review?(wkonu)

Bottom third of the attached screenshot was missing, so the feedback below pertains to what was visible

Could not review the following…
– Pressed state

  • Image placeholder color
Attached image dark-theme-proof-2.jpg (obsolete) —

@Wolasi: Here's a revised screenshot with feedback addressed.

Image placeholder color: #4A4A4F

Border colors are Grey 60.

Let me know if there's further tweaks or if this is good to go to code review. Thanks!

Attachment #9047129 - Attachment is obsolete: true
Attachment #9047129 - Flags: review?(wkonu)
Flags: needinfo?(wkonu)

:gvn same issue as before with this screenshot, bottom third is missing. There's some funky happening with the drop shadow for cards with borders. Looks more like a glow than a shadow. Check the spec (https://www.figma.com/file/HAk87Z6QBcu6YxBIoXN6LJcU/Firefox-Home-Components?node-id=1204%3A216) or the cards in the old version of New Tab for reference.

Flags: needinfo?(wkonu) → needinfo?(gsuntop)
Attached image dark-theme-proof-3.jpg

@Wolasi – Should match figma now. Note that the placeholders do have images in them, but this is an artifact of the FF screenshot tool.

Attachment #9047517 - Attachment is obsolete: true
Flags: needinfo?(gsuntop) → needinfo?(wkonu)

Looking good! D'you have a screenshot of the card hover state?

Flags: needinfo?(wkonu) → needinfo?(gsuntop)
Attached image card hover

Here's a screenshot of the card hover state.

Flags: needinfo?(gsuntop)

Noice! Let's get this into Nightly for the final pass! And the "dark mode not yet supported disclosure" is gone?

Yep! Took it out. I'll move this into code review. Thanks for the feedback.

Blocks: 1532807
Blocks: 1533832
Status: NEW → RESOLVED
Closed: 1 year ago
Keywords: github-merged
Resolution: --- → FIXED
Target Milestone: --- → Firefox 67

I have verified this issue with the latest Firefox Beta (67.0b9 Build ID - 20190408123043) and with the latest Firefox Nightly (68.0a1 Build ID - 20190410215612) installed, on Windows 10 x64, Arch Linux and Mac 10.13.3. Now, the new "Pocket Newtab" experience supports the browser's "Dark" mode.

Status: RESOLVED → VERIFIED
Component: Activity Streams: Newtab → New Tab Page
You need to log in before you can comment on or make changes to this bug.