{"id":23180,"date":"2018-10-24T16:15:35","date_gmt":"2018-10-24T20:15:35","guid":{"rendered":"https:\/\/mjtsai.com\/blog\/?p=23180"},"modified":"2019-05-21T16:03:31","modified_gmt":"2019-05-21T20:03:31","slug":"safari-technology-preview-adds-dark-mode-css","status":"publish","type":"post","link":"https:\/\/mjtsai.com\/blog\/2018\/10\/24\/safari-technology-preview-adds-dark-mode-css\/","title":{"rendered":"Safari Technology Preview Adds Dark Mode CSS"},"content":{"rendered":"

Jon Davis<\/a>:<\/p>\n

\n

Safari Technology Preview<\/a> Release 68 is now available for download<\/a> for macOS Mojave and macOS High Sierra.<\/p>\n

[…]<\/p>\n

Added prefers-color-scheme<\/code> media query support for styling dark mode content (r237156<\/a>)<\/p>\n<\/blockquote>\n\n

W3C<\/a>:<\/p>\n

The prefers-color-scheme<\/code> media feature is used to detect if the user has requested the system use a light or dark color theme.<\/p>

no-preference<\/dt>
Indicates that the user has made no preference known to the system. This keyword value evaluates as false in the boolean context.<\/dd>
light<\/dt>
Indicates that user has notified the system that they prefer an interface that has a light theme.<\/dd>
dark<\/dt>
Indicates that user has notified the system that they prefer an interface that has a dark theme.<\/dd><\/dl><\/blockquote>\n\n

Previously: Supporting Dark Mode<\/a>.<\/p>\n\n

Update (2018-10-25): Craig Hockenberry<\/a>:<\/p>\n

\n

After downloading Release 68<\/a> and making sure that Dark Mode CSS Support<\/strong> is turned on in the Develop > Experimental Features<\/em> menu, you can do this in your CSS:<\/p>\n

div {\n  background-color: pink;\n}\n\n@media (prefers-color-scheme: light) {\n  div {\n    background-color: yellow;\n  }\n}\n\n@media (prefers-color-scheme: dark) {\n  div {\n    background-color: purple;\n  }\n}<\/pre>\n
As you switch in and out of Dark Mode, the div<\/code> will change color. If you need a more interactive approach, say to show a theme-switching control at page load, you can use JavaScript to check the media query string:<\/p>\n
var inDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;<\/pre>\n<\/blockquote>","protected":false},"excerpt":{"rendered":"
Jon Davis: Safari Technology Preview Release 68 is now available for download for macOS Mojave and macOS High Sierra. […] Added prefers-color-scheme media query support for styling dark mode content (r237156) W3C: The prefers-color-scheme media feature is used to detect if the user has requested the system use a light or dark color theme.no-preference Indicates […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"apple_news_api_created_at":"2018-10-24T20:15:38Z","apple_news_api_id":"fd256fb4-062c-406a-84fa-0526109b9336","apple_news_api_modified_at":"2019-05-21T20:03:35Z","apple_news_api_revision":"AAAAAAAAAAAAAAAAAAAAAg==","apple_news_api_share_url":"https:\/\/apple.news\/A_SVvtAYsQGqE-gUmEJuTNg","apple_news_coverimage":0,"apple_news_coverimage_caption":"","apple_news_is_hidden":false,"apple_news_is_paid":false,"apple_news_is_preview":false,"apple_news_is_sponsored":false,"apple_news_maturity_rating":"","apple_news_metadata":"\"\"","apple_news_pullquote":"","apple_news_pullquote_position":"","apple_news_slug":"","apple_news_sections":"\"\"","apple_news_suppress_video_url":false,"apple_news_use_image_component":false,"footnotes":""},"categories":[2],"tags":[338,1805,30,1609,103,96],"class_list":["post-23180","post","type-post","status-publish","format-standard","hentry","category-technology","tag-css","tag-dark-mode","tag-mac","tag-macos-10-14","tag-safari","tag-web"],"apple_news_notices":[],"_links":{"self":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/23180","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/comments?post=23180"}],"version-history":[{"count":2,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/23180\/revisions"}],"predecessor-version":[{"id":23191,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/23180\/revisions\/23191"}],"wp:attachment":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/media?parent=23180"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/categories?post=23180"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/tags?post=23180"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}