Add color-scheme article

[tomayac]

Fixes #2265

Changes proposed in this pull request:

• Adds the article

[netlify]

Deploy preview for web-dev-staging ready!

Built with commit f26692f

https://deploy-preview-2481--web-dev-staging.netlify.com

[tomayac]

@lilles FYI, the color-scheme article is ready for review. If you can, please take a look, here's the staging preview deeplink.

[lilles]

Thanks Thomas!

A couple of notes:

Do we have a crbug report for the link colors? We shouldn't break accessibility requirements for the default rendering of:

<meta name="color-scheme" content="dark>
<a href="link.html">Click me</a>

Since the UA color changes for system colors, forms, scrollbars etc. has not shipped yet. Did you plan to publish this before that ships? If so, it should have a note about that?

[tomayac]

Do we have a crbug report for the link colors? We shouldn't break accessibility requirements for the default rendering of:

Chrome
WebKit
Firefox

Meta issue in the HTML Standard

Since the UA color changes for system colors, forms, scrollbars etc. has not shipped yet. Did you plan to publish this before that ships? If so, it should have a note about that?

Content on web.dev is not tied to Chrome, we write about general web features. Ideally it'd work in Chrome at the time of publication, but it doesn't have to.

[jpmedley]

LGTM

@kaycebasques

[kaycebasques]

Thanks for the great content @tomayac. Notes:

• The draft: true field is set in the front matter. I'll assume that was intentional and that you want to make this live on a later date. If not feel free to open another PR or just ping me on Chat and I can push up a commit.
• We have the ability to embed Glitches into our pages. https://web.dev/handbook/web-dev-components/#glitches
• The subhead is more descriptive IMO than the current title. After reading the current subhead (The color-scheme CSS property and the corresponding meta tag allow developers to opt their pages in to the theme-specific defaults of the user agent stylesheet.) I know exactly what I'm getting. Whereas with the current title (Improved dark mode with the color-scheme CSS property and the corresponding meta tag) I don't have much of a clue what the article actually discusses. I think it's important for the title to be more descriptive because that's sometimes the only thing that people see. I suggest swapping the title and subhead (of course you'll have to condense down the content in the subhead if that stuff becomes the title).

[tomayac]

@kaycebasques Thanks, Kayce, for the tweaks.

The draft: true field is set in the front matter. I'll assume that was intentional and that you want to make this live on a later date. If not feel free to open another PR or just ping me on Chat and I can push up a commit.

I've opened #2532 to push it live. Are there comms from the team who should flip the draft bit (also see #2519)? I was under the impression the merger flips the bit.

We have the ability to embed Glitches into our pages. https://web.dev/handbook/web-dev-components/#glitches

Well aware, just in this case the embed doesn't work to convey the message due to iframe styling issues (w3c/csswg-drafts#4772).

The subhead is more descriptive IMO than the current title. After reading the current subhead (The color-scheme CSS property and the corresponding meta tag allow developers to opt their pages in to the theme-specific defaults of the user agent stylesheet.) I know exactly what I'm getting. Whereas with the current title (Improved dark mode with the color-scheme CSS property and the corresponding meta tag) I don't have much of a clue what the article actually discusses. I think it's important for the title to be more descriptive because that's sometimes the only thing that people see. I suggest swapping the title and subhead (of course you'll have to condense down the content in the subhead if that stuff becomes the title).

I have tweaked the title a bit #2532, the "clickbait" is improved dark mode default styling, I think that works.