Dark theme

[srambach]

Closes #82 Adds a dark theme and switch based on Patternfly's dark theme. Initial set up by @DaoDaoNoCode.

[netlify[bot]]

✅ Deploy Preview for quickstarts ready!

Name	Link
🔨 Latest commit	c1207af98cb0eb33f94a54ff0ce06e2cbeda3579
🔍 Latest deploy log	https://app.netlify.com/sites/quickstarts/deploys/6245b62562db530008929038
😎 Deploy Preview	https://deploy-preview-141--quickstarts.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[DaoDaoNoCode]

Is there a style for the inline <code> tag? Currently, I can only tell the difference from the font, is there a background color for it in the dark mode?

[lboehling]

The dark theme looks great overall! I reviewed with Michael and we saw a few small visual tweaks to make.

In the drawer:

• The text before the tasks (“In this quick start, you will complete X tasks”) should be using our secondary text color, which is pf-black-200 in dark theme. (This may need to be updated in the default qs drawer too).
• All green success text (in the check your work and in the success task title) should be lightened to our pf-green-400 color. (The current shade does not have enough contrast against the dark background).
• The copy to clipboard/code block background colors should be the same color as our form inputs in dark theme.
• The code snippet background should be one shade darker than in the preview
• The border around the example is too light. Should be using the same border color as the other dark theme dividers.

In the catalog:

• the cards lose their hover states in dark theme--This would be resolved if we updated the quickstarts catalog cards to use our new selectable cards state styling https://www.patternfly.org/v4/components/card#selectable
• the cards should be lighter than the background color in dark theme. I think the bkg color and the card colors need to be reversed here. see this PR: https://patternfly-pr-3686.surge.sh/components/card/html
• the prerequisites info icon hover state is too dark, can we lighten the hover shade to use the light blue hover color on our dark theme text links?

thanks!

[srambach]

• The text before the tasks (“In this quick start, you will complete X tasks”) should be using our secondary text color, which is pf-black-200 in dark theme. (This may need to be updated in the default qs drawer too).

This one doesn't have a unique identifier, so it will need something to identify it in order to style it.

• the cards lose their hover states in dark theme--This would be resolved if we updated the quickstarts catalog cards to use our new selectable cards state styling https://www.patternfly.org/v4/components/card#selectable

This is a bigger change and should probably be a separate PR.

@lboehling, I think I got the rest!

[lboehling]

Looks great! Thank you @srambach!

[srambach]

Added issue #155 to fix the card hover state.

[CooperRedhat]

LGTM