Skip to content
This repository has been archived by the owner on Mar 14, 2024. It is now read-only.

Add color-scheme article #2481

Merged
merged 28 commits into from
Apr 8, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
839e9d0
Start work on color-scheme article
tomayac Mar 27, 2020
65de764
No smart quotes
tomayac Mar 27, 2020
10c07ca
More content
tomayac Mar 30, 2020
7563dd6
Review draft
tomayac Mar 31, 2020
6e65fce
Apply suggestions from code review
tomayac Apr 1, 2020
4676afe
Update src/site/content/en/blog/color-scheme/index.md
tomayac Apr 1, 2020
a66cf25
Update src/site/content/en/blog/color-scheme/index.md
tomayac Apr 1, 2020
5aa6dd8
Update src/site/content/en/blog/color-scheme/index.md
tomayac Apr 1, 2020
ffd9527
Update src/site/content/en/blog/color-scheme/index.md
tomayac Apr 1, 2020
9e609c4
Update src/site/content/en/blog/color-scheme/index.md
tomayac Apr 1, 2020
c68b066
Update src/site/content/en/blog/color-scheme/index.md
tomayac Apr 1, 2020
e8921e6
Update src/site/content/en/blog/color-scheme/index.md
tomayac Apr 1, 2020
c2be2ac
Update src/site/content/en/blog/color-scheme/index.md
tomayac Apr 1, 2020
a36ba3e
Update src/site/content/en/blog/color-scheme/index.md
tomayac Apr 1, 2020
c9b2391
Update index.md
tomayac Apr 1, 2020
167fb5f
Update src/site/content/en/blog/color-scheme/index.md
tomayac Apr 1, 2020
fa327f6
Remove embedded demo
tomayac Apr 1, 2020
bff3565
Add bug info
tomayac Apr 1, 2020
7a1af8f
Add HTML issue
tomayac Apr 1, 2020
9a41955
Apply suggestions from code review
tomayac Apr 1, 2020
282b03a
Update src/site/content/en/blog/color-scheme/index.md
tomayac Apr 1, 2020
6b870f8
Update src/site/content/en/blog/color-scheme/index.md
tomayac Apr 1, 2020
821d6af
Update src/site/content/en/blog/color-scheme/index.md
tomayac Apr 1, 2020
4b4b32c
Optimize images
Apr 8, 2020
cdd2e3d
Fix content styling
Apr 8, 2020
b2cb325
Fix figure stylings
Apr 8, 2020
4881893
More image styling fixes
Apr 8, 2020
f26692f
Add alt descriptions to images
Apr 8, 2020
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/site/content/en/blog/color-scheme/hero.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
380 changes: 380 additions & 0 deletions src/site/content/en/blog/color-scheme/index.md

Large diffs are not rendered by default.

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 3 additions & 7 deletions src/site/content/en/blog/prefers-color-scheme/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -352,22 +352,17 @@ In the code sample above, you will probably have noticed a property
[`color-scheme`](https://drafts.csswg.org/css-color-adjust-1/#propdef-color-scheme)
with the space-separated value `light dark`.

{% Aside 'warning' %}
The `color-scheme` property is still [in development](https://crbug.com/925935)
and it might not work as advertised, full support in Chrome will come later this year.
{% endAside %}

This tells the browser which color themes my app supports
and allows it to activate special variants of the user agent stylesheet,
which is useful to, for example, let the browser render form fields
with a dark background and light text, adjust the scrollbars,
with a dark background and light text, adjust the scroll bars,
or to enable a theme-aware highlight color.
The exact details of `color-scheme` are specified in
[CSS Color Adjustment Module Level 1](https://drafts.csswg.org/css-color-adjust-1/).

{% Aside 'note' %}
🌒 Read up more on
[what `color-scheme` actually does](https://medium.com/dev-channel/what-does-dark-modes-supported-color-schemes-actually-do-69c2eacdfa1d).
[what `color-scheme` actually does](color-scheme).
{% endAside %}

Everything else is then just a matter of defining CSS variables
Expand Down Expand Up @@ -790,6 +785,7 @@ Resources for the `prefers-color-scheme` media query:
- [Media Queries Level 5 spec](https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme)

Resources for the `color-scheme` meta tag and CSS property:
- [The `color-scheme` CSS property and meta tag](/color-scheme)
- [Chrome Platform Status page](https://chromestatus.com/feature/5330651267989504)
- [Chromium bug](http://crbug.com/925935)
- [CSS Color Adjustment Module Level 1 spec](https://drafts.csswg.org/css-color-adjust-1/)
Expand Down