Right now we're only supporting the light theme.

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

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.

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

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

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

• Why are some of the titles on cards in blue?
• Bordered Card missing background color and drop shadow
  See https://www.figma.com/file/HAk87Z6QBcu6YxBIoXN6LJcU/Firefox-Home-Components?node-id=1204%3A216
• Numbered list number background color
  See https://www.figma.com/file/HAk87Z6QBcu6YxBIoXN6LJcU/Firefox-Home-Components?node-id=1204%3A402
• Source text color for cards should be Teal 10 (#A7FFFE)
• Looks like border colors are set to Grey 60, can you confirm?

Could not review the following…
– Pressed state

• Image placeholder color

@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!

: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.

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

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

Here's a screenshot of the card hover state.

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.

https://hg.mozilla.org/mozilla-central/rev/a014bada4619

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.