{"id":148596,"date":"2019-10-22T08:10:56","date_gmt":"2019-10-22T06:10:56","guid":{"rendered":"https:\/\/www.iphone-ticker.de\/?p=148596"},"modified":"2019-10-22T08:14:49","modified_gmt":"2019-10-22T06:14:49","slug":"mit-12-zeilen-css-dark-mode-fuer-webseiten","status":"publish","type":"post","link":"https:\/\/www.iphone-ticker.de\/mit-12-zeilen-css-dark-mode-fuer-webseiten-148596\/","title":{"rendered":"Mit 12 Zeilen CSS: Einfacher Dark Mode f\u00fcr Webseiten"},"content":{"rendered":"<p>Der Software-Entwickler Tom Brow hat sich auf seinem Blog mit dem von iOS 13 eingef\u00fchrten Dunkelmodus auseinandergesetzt <a href=\"https:\/\/tombrow.com\/dark-mode-website-css\">und erkl\u00e4rt<\/a> am Beispiel der eigenen Seite, wie sich Online-Inhalte so vorbereiten lassen, dass das Seitendesign in Abh\u00e4ngigkeit von den Ger\u00e4te-Einstellungen des Besuchers hell bzw. dunkel angezeigt wird. <\/p>\n<p><a href=\"https:\/\/images.iphone-ticker.de\/wp-content\/uploads\/2019\/10\/nachtmodus-animation.gif\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/images.iphone-ticker.de\/wp-content\/uploads\/2019\/10\/nachtmodus-animation.gif\" alt=\"Nachtmodus Animation\" width=\"500\" height=\"231\" class=\"aligncenter size-full wp-image-148602\" \/><\/a><br \/>\nSchl\u00fcssel zum Gl\u00fcck ist der CSS media query &#8222;prefers-color-scheme&#8220;, mit dessen Hilfe in Erfahrung gebracht werden kann, ob Besucher den Dunkelmodus auf ihren Ger\u00e4ten aktiviert haben. <\/p>\n<p>Ist dies der Fall f\u00e4rbt Brows Beispiel-Code den Hintergrund der Webseite dunkel ein, \u00e4ndert die Text- und Link-Farben und ents\u00e4ttigt die in den Bildern eingesetzten Farben etwas. <\/p>\n<p><script src=\"https:\/\/gist.github.com\/noestreich\/2d8e3506a4fc967ff11ed3cd15724af6.js\"><\/script><\/p>\n<p>Brows 12 Zeilen sind noch kein vollst\u00e4ndiger &#8222;Dark Mode&#8220; f\u00fcr Webseiten, aber ein guter Start f\u00fcr Webmaster, die ihre Seiten entsprechend anpassen m\u00f6chten. Eine Aufgabe, die auch wir noch zu erledigen haben. <\/p>\n","protected":false},"excerpt":{"rendered":"<a href=\"https:\/\/www.iphone-ticker.de\/mit-12-zeilen-css-dark-mode-fuer-webseiten-148596\/\"><img width=\"150\" height=\"150\" src=\"https:\/\/images.iphone-ticker.de\/wp-content\/uploads\/2019\/10\/nachtmodus-150x150.gif\" class=\"alignright tfe wp-post-image\" alt=\"Nachtmodus\" decoding=\"async\" loading=\"lazy\" \/><\/a><p>Der Software-Entwickler Tom Brow hat sich auf seinem Blog mit dem von iOS 13 eingef\u00fchrten Dunkelmodus auseinandergesetzt und erkl\u00e4rt am Beispiel der eigenen Seite, wie sich Online-Inhalte so vorbereiten lassen, dass das Seitendesign in Abh\u00e4ngigkeit von den Ger\u00e4te-Einstellungen des Besuchers hell bzw. dunkel angezeigt wird. Schl\u00fcssel zum Gl\u00fcck ist der CSS media query &#8222;prefers-color-scheme&#8220;, mit [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":148598,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[78,3917,2810,52],"class_list":["post-148596","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news","tag-design","tag-entwickler","tag-nachtmodus","tag-safari"],"aioseo_notices":[],"subheadline":["Von Mac und iPhone ber\u00fccksichtigt","Von Mac und iPhone ber\u00fccksichtigt"],"featured_image":["https:\/\/images.iphone-ticker.de\/wp-content\/uploads\/2019\/08\/ios-13-dark-mode.jpg"],"rest_api_enabler":{"subheadline":["Von Mac und iPhone ber\u00fccksichtigt","Von Mac und iPhone ber\u00fccksichtigt"],"featured_image":"https:\/\/images.iphone-ticker.de\/wp-content\/uploads\/2019\/08\/ios-13-dark-mode.jpg"},"_links":{"self":[{"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/posts\/148596","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/comments?post=148596"}],"version-history":[{"count":5,"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/posts\/148596\/revisions"}],"predecessor-version":[{"id":148603,"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/posts\/148596\/revisions\/148603"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/media\/148598"}],"wp:attachment":[{"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/media?parent=148596"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/categories?post=148596"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/tags?post=148596"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}