{"id":311473,"date":"2020-10-14T21:00:42","date_gmt":"2020-10-14T21:00:42","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=311473"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=311473","title":{"rendered":"\u0422\u0435\u043c\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c: Hello darkness, my old friend"},"content":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/company\/timeweb\/blog\/523478\/\">\n<blockquote><p><b>Dark mode<\/b> \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0442\u0435\u043d\u0434\u0435\u043d\u0446\u0438\u0435\u0439 \u0432 \u0434\u0438\u0437\u0430\u0439\u043d\u0435 \u0441\u0430\u0439\u0442\u043e\u0432 \u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u041c\u044b \u043d\u0430\u0448\u043b\u0438 \u043a\u043b\u0430\u0441\u0441\u043d\u0443\u044e <a href=\"https:\/\/medium.com\/dev-channel\/hello-darkness-my-old-friend-48a97ab4379a\">\u0441\u0442\u0430\u0442\u044c\u044e<\/a> \u043d\u0430 \u044d\u0442\u0443 \u0442\u0435\u043c\u0443 \u0438 \u0440\u0435\u0448\u0438\u043b\u0438 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u043e\u043c. \u041c\u043d\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439, \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 dark mode, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0434\u0430\u043b\u0435\u0435 \u0432 \u0441\u0442\u0430\u0442\u044c\u0435. \u0410 \u043d\u0430 \u043a\u0430\u043a\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0432\u044b?<\/p><\/blockquote>\n<p>  \u041f\u0440\u043e\u0441\u0442\u043e \u0445\u0430\u0439\u043f \u0438\u043b\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c? \u0423\u0437\u043d\u0430\u0439\u0442\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u043e \u0442\u0435\u043c\u043d\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435. \u042f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443, \u043a\u0430\u043a \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 dark mode \u043d\u0430 \u0431\u043b\u0430\u0433\u043e \u0432\u0430\u0448\u0438\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439!<\/p>\n<h3>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h3>\n<p>  \u041f\u043e \u0434\u0430\u043d\u043d\u043e\u0439 \u0442\u0435\u043c\u0435 \u044f \u043f\u0440\u043e\u0432\u0435\u043b \u043e\u0431\u044a\u0435\u043c\u043d\u043e\u0435 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435, \u0438\u0437\u0443\u0447\u0438\u043b \u0438\u0441\u0442\u043e\u0440\u0438\u044e \u0432\u043e\u043f\u0440\u043e\u0441\u0430. \u0415\u0441\u043b\u0438 \u0432\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 \u0442\u0435\u043c\u043d\u044b\u043c \u0440\u0435\u0436\u0438\u043c\u043e\u043c, \u0441\u043c\u0435\u043b\u043e \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u0430\u0439\u0442\u0435 \u043f\u0435\u0440\u0432\u044b\u0439 \u0440\u0430\u0437\u0434\u0435\u043b.<br \/>  <a name=\"habracut\"><\/a>  <\/p>\n<h3>\u0422\u0435\u043c\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c \u0434\u043e \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u044d\u0442\u043e \u0441\u0442\u0430\u043b\u043e \u043c\u0435\u0439\u043d\u0441\u0442\u0440\u0438\u043c\u043e\u043c<\/h3>\n<p>  <\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/zj\/bm\/-3\/zjbm-3ajwy7cak6sx5kjv27j-do.jpeg\" width=\"780\"><\/div>\n<p><i>\u0417\u0435\u043b\u0435\u043d\u044b\u0439 \u044d\u043a\u0440\u0430\u043d <\/i>(<a href=\"https:\/\/commons.wikimedia.org\/wiki\/File:Compaq_Portable_and_Wordperfect.JPG\">\u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a<\/a>)<\/p>\n<p>  \u0413\u043e\u0432\u043e\u0440\u044f\u0442, \u0438\u0441\u0442\u043e\u0440\u0438\u044f \u0446\u0438\u043a\u043b\u0438\u0447\u043d\u0430. \u0412 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438 \u0441 \u0442\u0435\u043c\u043d\u044b\u043c \u0440\u0435\u0436\u0438\u043c\u043e\u043c \u043c\u044b \u0432\u0435\u0440\u043d\u0443\u043b\u0438\u0441\u044c \u043a \u0442\u043e\u043c\u0443, \u0441 \u0447\u0435\u0433\u043e \u0432\u0441\u0451 \u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u043b\u043e\u0441\u044c. \u041d\u0430 \u0437\u0430\u0440\u0435 \u044d\u0440\u044b \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0442\u0435\u043c\u043d\u043e\u0433\u043e \u0440\u0435\u0436\u0438\u043c\u0430 \u0431\u044b\u043b\u043e \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u043c: \u043c\u043e\u043d\u043e\u0445\u0440\u043e\u043c\u043d\u044b\u0435 \u042d\u041b\u0422-\u043c\u043e\u043d\u0438\u0442\u043e\u0440\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438, \u043e\u0431\u043b\u0443\u0447\u0430\u044f \u043f\u0443\u0447\u043a\u0430\u043c\u0438 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043e\u0432 \u0444\u043e\u0441\u0444\u043e\u0440\u0435\u0441\u0446\u0438\u0440\u0443\u044e\u0449\u0438\u0439 \u044d\u043a\u0440\u0430\u043d, \u0430 \u043b\u044e\u043c\u0438\u043d\u043e\u0444\u043e\u0440, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0432\u0448\u0438\u0439\u0441\u044f \u0432 \u0440\u0430\u043d\u043d\u0438\u0445 \u042d\u041b\u0422, \u0431\u044b\u043b \u0437\u0435\u043b\u0435\u043d\u044b\u043c. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0442\u0435\u043a\u0441\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u043b\u0441\u044f \u0437\u0435\u043b\u0435\u043d\u044b\u043c \u0446\u0432\u0435\u0442\u043e\u043c, \u0430 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u044d\u043a\u0440\u0430\u043d\u0430 \u0431\u044b\u043b\u0430 \u0447\u0435\u0440\u043d\u043e\u0439, \u0442\u0430\u043a\u0438\u0435 \u043c\u043e\u0434\u0435\u043b\u0438 \u0447\u0430\u0441\u0442\u043e \u043d\u0430\u0437\u044b\u0432\u0430\u043b\u0438\u0441\u044c <a href=\"https:\/\/commons.wikimedia.org\/wiki\/File:Schneider_CPC6128_with_green_monitor_GT65,_start_screen.jpg\">\u0437\u0435\u043b\u0435\u043d\u044b\u043c\u0438 \u044d\u043a\u0440\u0430\u043d\u0430\u043c\u0438<\/a>.<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/6x\/ee\/fl\/6xeeflgu-zfkfgbraqy67yypsua.jpeg\" width=\"780\"><\/div>\n<p><i>\u0422\u0435\u043c\u043d\u043e\u0435 \u043d\u0430 \u0431\u0435\u043b\u043e\u043c<\/i> (<a href=\"https:\/\/www.youtube.com\/watch?v=qKkABzt0Zqg\">\u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a<\/a>)<\/p>\n<p>  \u0412\u043f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0438 \u0446\u0432\u0435\u0442\u043d\u044b\u0435 \u042d\u041b\u0422-\u0434\u0438\u0441\u043f\u043b\u0435\u0438 \u0441\u0442\u0430\u043b\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0446\u0432\u0435\u0442\u043e\u0432 \u0437\u0430 \u0441\u0447\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u0440\u0430\u0441\u043d\u043e\u0433\u043e, \u0437\u0435\u043b\u0435\u043d\u043e\u0433\u043e \u0438 \u0441\u0438\u043d\u0435\u0433\u043e \u043b\u044e\u043c\u0438\u043d\u043e\u0444\u043e\u0440\u043e\u0432. \u041e\u043d\u0438 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b\u0438 \u0431\u0435\u043b\u044b\u0439 \u0446\u0432\u0435\u0442, \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u0443\u044f \u0432\u0441\u0435 \u0442\u0440\u0438 \u043b\u044e\u043c\u0438\u043d\u043e\u0444\u043e\u0440\u0430 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e. \u0421 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u0431\u043e\u043b\u0435\u0435 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 <a href=\"https:\/\/en.wikipedia.org\/wiki\/Desktop_publishing\">\u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043d\u044b\u0445 \u0438\u0437\u0434\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0441\u0438\u0441\u0442\u0435\u043c<\/a> \u0438 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 <a href=\"https:\/\/ru.wikipedia.org\/wiki\/WYSIWYG#:~:text=WYSIWYG%20(%D0%BF%D1%80%D0%BE%D0%B8%D0%B7%D0%BD%D0%BE%D1%81%D0%B8%D1%82%D1%81%D1%8F%20%5B%CB%88w%C9%AAziw%C9%AA%C9%A1%5D%2C%20%D1%8F%D0%B2%D0%BB%D1%8F%D0%B5%D1%82%D1%81%D1%8F%20%D0%B0%D0%B1%D0%B1%D1%80%D0%B5%D0%B2%D0%B8%D0%B0%D1%82%D1%83%D1%80%D0%BE%D0%B9%20%D0%BE%D1%82%20%D0%B0%D0%BD%D0%B3%D0%BB.\">WYSIWYG<\/a> \u0441\u0442\u0430\u043b\u0430 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0439 \u0438\u0434\u0435\u044f \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u043f\u043e\u0445\u043e\u0436\u0438\u043c \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u043b\u0438\u0441\u0442 \u0431\u0443\u043c\u0430\u0433\u0438.<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/qo\/tm\/e-\/qotme-ob3eia59lsbbjlcxnguzs.png\" width=\"780\"><\/div>\n<p><i>\u0411\u0440\u0430\u0443\u0437\u0435\u0440 WorldWideWeb<\/i> (<a href=\"https:\/\/commons.wikimedia.org\/wiki\/File:WorldWideWeb_FSF_GNU.png\">\u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a<\/a>)<\/p>\n<p>  \u0412 \u044d\u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432 \u0434\u0438\u0437\u0430\u0439\u043d\u0435 \u0438 \u0437\u0430\u0440\u043e\u0434\u0438\u043b\u0441\u044f \u0442\u0440\u0435\u043d\u0434 \u00ab\u0442\u0435\u043c\u043d\u043e\u0435 \u043d\u0430 \u0431\u0435\u043b\u043e\u043c\u00bb, \u0435\u0433\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0438 \u0432 \u0441\u0430\u043c\u044b\u0445 \u043f\u0435\u0440\u0432\u044b\u0445 <a href=\"http:\/\/info.cern.ch\/hypertext\/WWW\/TheProject.html\">\u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u0430\u0445 \u0441\u0435\u0442\u0438<\/a> \u2014 \u043e\u043d\u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u043e\u0445\u043e\u0434\u0438\u043b\u0438 \u043d\u0430 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u044b.<\/p>\n<p>  \u041f\u0435\u0440\u0432\u044b\u0439 \u0432 \u043c\u0438\u0440\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 <a href=\"https:\/\/en.wikipedia.org\/wiki\/WorldWideWeb\">WorldWideWeb<\/a> (\u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c\u0442\u0435, <a href=\"https:\/\/en.wikipedia.org\/wiki\/Cascading_Style_Sheets#History\">CSS \u0435\u0449\u0435 \u043d\u0435 \u0431\u044b\u043b \u0438\u0437\u043e\u0431\u0440\u0435\u0442\u0435\u043d<\/a>) \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u043b <a href=\"https:\/\/commons.wikimedia.org\/wiki\/File:WorldWideWeb_FSF_GNU.png\">\u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/a> \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a. \u0417\u0430\u0431\u0430\u0432\u043d\u044b\u0439 \u0444\u0430\u043a\u0442: \u0432\u0442\u043e\u0440\u043e\u0439 \u0432 \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 <a href=\"https:\/\/en.wikipedia.org\/wiki\/Line_Mode_Browser\">Line Mode Browser<\/a> (\u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0430) \u0431\u044b\u043b \u0437\u0435\u043b\u0435\u043d\u044b\u043c \u043d\u0430 \u0442\u0435\u043c\u043d\u043e\u043c. \u0421\u0435\u0439\u0447\u0430\u0441 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043e\u0431\u044b\u0447\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0441 \u0442\u0435\u043c\u043d\u044b\u043c \u0442\u0435\u043a\u0441\u0442\u043e\u043c \u043d\u0430 \u0441\u0432\u0435\u0442\u043b\u043e\u043c \u0444\u043e\u043d\u0435, \u0447\u0442\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u0449\u0435\u043f\u0440\u0438\u043d\u044f\u0442\u043e\u0439 \u043d\u043e\u0440\u043c\u043e\u0439. \u0422\u0430\u043a\u0430\u044f \u0446\u0432\u0435\u0442\u043e\u0432\u0430\u044f \u0441\u0445\u0435\u043c\u0430 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u0430 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u0442\u0438\u043b\u0435\u0439 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0430\u0433\u0435\u043d\u0442\u043e\u0432, \u0432\u043a\u043b\u044e\u0447\u0430\u044f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <a href=\"https:\/\/chromium.googlesource.com\/chromium\/blink\/+\/master\/Source\/core\/css\/html.css\">Chrome<\/a>.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ri\/b0\/io\/rib0ioghgen4qr1ehwusxw2bvsg.jpeg\" width=\"350\"> <br \/>  <i>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u043c\u0430\u0440\u0442\u0444\u043e\u043d\u043e\u0432<\/i> (<a href=\"https:\/\/unsplash.com\/photos\/W39xsPWZgA4\">\u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a<\/a>)<\/p>\n<p>  \u0414\u043d\u0438 \u042d\u041b\u0422-\u043c\u043e\u043d\u0438\u0442\u043e\u0440\u043e\u0432 \u0434\u0430\u0432\u043d\u043e \u043f\u0440\u043e\u0448\u043b\u0438. \u041e\u0433\u0440\u043e\u043c\u043d\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043f\u043e\u0442\u0440\u0435\u0431\u043b\u044f\u0435\u043c \u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0416\u041a-\u0434\u0438\u0441\u043f\u043b\u0435\u0438 \u0441 \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u043e\u0439 \u0438\u043b\u0438 \u044d\u043d\u0435\u0440\u0433\u043e\u0441\u0431\u0435\u0440\u0435\u0433\u0430\u044e\u0449\u0438\u0435 AMOLED-\u0434\u0438\u0441\u043f\u043b\u0435\u0438. \u041c\u0435\u043d\u044c\u0448\u0438\u0435 \u043f\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0443 \u0438 \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u043d\u044b\u0435 \u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u044b, \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u044b \u0438 \u0441\u043c\u0430\u0440\u0442\u0444\u043e\u043d\u044b \u043f\u0440\u0438\u0432\u0435\u043b\u0438 \u043a \u043d\u043e\u0432\u044b\u043c \u043c\u043e\u0434\u0435\u043b\u044f\u043c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439. \u0412 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u043c\u044b \u043f\u0440\u043e\u043f\u0430\u0434\u0430\u0435\u043c \u0432 \u0441\u043e\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0435\u0442\u044f\u0445, \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u0443\u0435\u043c \u0440\u0430\u0434\u0438 \u0440\u0430\u0437\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u044f \u0438\u043b\u0438 \u0438\u0433\u0440\u0430\u0435\u043c \u0432 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u043d\u044b\u0435 \u0438\u0433\u0440\u044b. \u041e\u0431\u044b\u0447\u043d\u043e \u044d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u043e\u0441\u043b\u0435 \u0440\u0430\u0431\u043e\u0442\u044b \u0432\u0435\u0447\u0435\u0440\u043e\u043c \u043f\u0440\u0438 \u0442\u0443\u0441\u043a\u043b\u043e\u043c \u043e\u0441\u0432\u0435\u0449\u0435\u043d\u0438\u0438 \u0438\u043b\u0438 \u0434\u0430\u0436\u0435 \u043d\u043e\u0447\u044c\u044e \u0432 \u043a\u0440\u043e\u0432\u0430\u0442\u0438 \u043f\u0435\u0440\u0435\u0434 \u0441\u043d\u043e\u043c. \u0427\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043b\u044e\u0434\u0435\u0439 \u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u0435\u0432\u0430\u0439\u0441\u0430\u043c\u0438 \u0432 \u0442\u0435\u043c\u043d\u043e\u0442\u0435, \u0442\u0435\u043c \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u043c \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0442\u0435\u043c\u043d\u043e\u0433\u043e \u0440\u0435\u0436\u0438\u043c\u0430.<\/p>\n<h3>\u041f\u043e\u0447\u0435\u043c\u0443 \u043c\u044b \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0442\u0435\u043c\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c?<\/h3>\n<p>  <b>\u041f\u043e \u044d\u0441\u0442\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u0441\u043e\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c<\/b><br \/>  \u041a\u043e\u0433\u0434\u0430 \u043b\u044e\u0434\u0435\u0439 \u0441\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u044e\u0442, <a href=\"https:\/\/medium.com\/dev-channel\/let-there-be-darkness-maybe-9facd9c3023d\">\u043f\u043e\u0447\u0435\u043c\u0443 \u0438\u043c \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u0442\u0435\u043c\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c<\/a>, \u0441\u0430\u043c\u044b\u0435 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u043e\u0442\u0432\u0435\u0442\u044b: \u00ab\u041e\u043d \u043f\u0440\u0438\u044f\u0442\u043d\u0435\u0435 \u0434\u043b\u044f \u0433\u043b\u0430\u0437\u00bb \u0438\u043b\u0438 \u00ab\u0422\u0435\u043c\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u0439\u00bb. \u041a\u043e\u043c\u043f\u0430\u043d\u0438\u044f Apple \u0432 <a href=\"https:\/\/developer.apple.com\/documentation\/appkit\/supporting_dark_mode_in_your_interface\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0442\u0435\u043c\u043d\u043e\u0433\u043e \u0440\u0435\u0436\u0438\u043c\u0430<\/a> \u043e\u0442\u043a\u0440\u044b\u0442\u043e \u0433\u043e\u0432\u043e\u0440\u0438\u0442: \u00ab\u0412\u044b\u0431\u043e\u0440 \u0442\u0435\u043c\u043d\u043e\u0433\u043e \u0438\u043b\u0438 \u0441\u0432\u0435\u0442\u043b\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0434\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u044d\u0441\u0442\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0435\u043d\u0438\u0439 \u0438 \u043c\u043e\u0436\u0435\u0442 \u043d\u0435 \u0438\u043c\u0435\u0442\u044c \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u044f \u043a \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u043c \u043e\u0441\u0432\u0435\u0449\u0435\u043d\u0438\u044f\u00bb.<\/p>\n<p>  \u0423\u0437\u043d\u0430\u0439\u0442\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u0432 <a href=\"https:\/\/medium.com\/dev-channel\/let-there-be-darkness-maybe-9facd9c3023d\">\u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0438<\/a>, \u043f\u043e\u0447\u0435\u043c\u0443 \u043b\u044e\u0434\u0438 \u043b\u044e\u0431\u044f\u0442 \u0442\u0435\u043c\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c \u0438 \u043a\u0430\u043a \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/5r\/th\/0q\/5rth0qg8-kwxynqtrxpdqvkqq30.png\" width=\"350\"><br \/>  <i>System 7 CloseView<\/i> (<a href=\"https:\/\/archive.org\/details\/mac_Macintosh_System_7_at_your_Fingertips_1992\">\u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a<\/a>)<\/p>\n<p>  <b>\u0422\u0435\u043c\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c \u043a\u0430\u043a \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u043b\u044e\u0434\u0435\u0439 \u0441 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u044b\u043c\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c\u0438 \u0437\u0434\u043e\u0440\u043e\u0432\u044c\u044f<\/b><br \/>  \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043b\u044e\u0434\u044f\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0442\u0435\u043c\u043d\u043e\u0433\u043e \u0440\u0435\u0436\u0438\u043c\u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e: \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0441 \u043e\u0441\u043b\u0430\u0431\u043b\u0435\u043d\u043d\u044b\u043c \u0437\u0440\u0435\u043d\u0438\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0442\u0430\u043a\u043e\u0439 \u0440\u0435\u0436\u0438\u043c \u043a\u0430\u043a \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438. \u0421\u0430\u043c\u044b\u0439 \u0440\u0430\u043d\u043d\u0438\u0439 \u0441\u043b\u0443\u0447\u0430\u0439 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0442\u0435\u043c\u043d\u043e\u0433\u043e \u0440\u0435\u0436\u0438\u043c\u0430 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u0441\u043c\u043e\u0433 \u043d\u0430\u0439\u0442\u0438, \u2014 \u044d\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f CloseView \u0432 \u041e\u0421 <a href=\"https:\/\/en.wikipedia.org\/wiki\/System_7\">System 7<\/a> \u0441 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u043c\u0435\u043d\u044f\u0442\u044c \u0446\u0432\u0435\u0442\u043e\u0432\u0443\u044e \u0441\u0445\u0435\u043c\u0443: \u0447\u0435\u0440\u043d\u043e\u0435 \u043d\u0430 \u0431\u0435\u043b\u043e\u043c \u0438 \u0431\u0435\u043b\u043e\u0435 \u043d\u0430 \u0447\u0435\u0440\u043d\u043e\u043c. \u0425\u043e\u0442\u044f System 7 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u043b\u0430 \u0446\u0432\u0435\u0442\u043d\u043e\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043e\u0441\u0442\u0430\u0432\u0430\u043b\u0441\u044f \u0447\u0435\u0440\u043d\u043e-\u0431\u0435\u043b\u044b\u043c.<\/p>\n<p>  \u042d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0438\u043d\u0432\u0435\u0440\u0441\u0438\u0438, \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043b \u0441\u0432\u043e\u0438 \u0441\u043b\u0430\u0431\u044b\u0435 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u043f\u043e\u0441\u043b\u0435 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044f \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0446\u0432\u0435\u0442\u043e\u0432 \u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435. \u0421\u0430\u0440\u0438\u0442 \u0421\u0437\u043f\u0438\u0440\u043e (Sarit Szpiro) \u0441 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043f\u0440\u043e\u0432\u0435\u043b\u0438 <a href=\"https:\/\/dl.acm.org\/citation.cfm?id=2982168\">\u043e\u043f\u0440\u043e\u0441<\/a> \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u043b\u044e\u0434\u0438 \u0441 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u044b\u043c \u0437\u0440\u0435\u043d\u0438\u0435\u043c \u043e\u0431\u0440\u0430\u0449\u0430\u044e\u0442\u0441\u044f \u0441 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u043d\u044b\u043c\u0438 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438. \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u0432\u0441\u0435 \u043e\u043f\u0440\u043e\u0448\u0435\u043d\u043d\u044b\u0435 \u043d\u0435 \u043b\u044e\u0431\u0438\u043b\u0438 \u0438\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430, \u043d\u043e \u043c\u043d\u043e\u0433\u0438\u0435 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0438\u0442\u0430\u043b\u0438 \u0441\u0432\u0435\u0442\u043b\u044b\u0439 \u0442\u0435\u043a\u0441\u0442 \u043d\u0430 \u0442\u0435\u043c\u043d\u043e\u043c \u0444\u043e\u043d\u0435. \u041a\u043e\u043c\u043f\u0430\u043d\u0438\u044f Apple \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u043e\u0435 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <a href=\"https:\/\/www.apple.com\/\/accessibility\/iphone\/vision\/\">Smart Invert<\/a>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043c\u0435\u043d\u044f\u0435\u0442 \u0446\u0432\u0435\u0442\u0430 \u043d\u0430 \u0434\u0438\u0441\u043f\u043b\u0435\u0435, \u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u043c\u0443\u043b\u044c\u0442\u0438\u043c\u0435\u0434\u0438\u0430 \u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0445 \u0441\u0442\u0438\u043b\u0438 \u0442\u0435\u043c\u043d\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430.<\/p>\n<p>  \u041e\u0441\u043e\u0431\u043e\u0439 \u0444\u043e\u0440\u043c\u043e\u0439 \u0441\u043b\u0430\u0431\u043e\u0432\u0438\u0434\u0435\u043d\u0438\u044f \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0438\u043d\u0434\u0440\u043e\u043c \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u043d\u043e\u0433\u043e \u0437\u0440\u0435\u043d\u0438\u044f, \u0442\u0430\u043a\u0436\u0435 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0439 \u043a\u0430\u043a \u0446\u0438\u0444\u0440\u043e\u0432\u043e\u0435 \u043d\u0430\u043f\u0440\u044f\u0436\u0435\u043d\u0438\u0435 \u0437\u0440\u0435\u043d\u0438\u044f. \u042d\u0442\u0438\u043c\u0438 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043c\u0438 <a href=\"https:\/\/onlinelibrary.wiley.com\/doi\/full\/10.1111\/j.1475-1313.2011.00834.x\">\u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u044e\u0442<\/a> \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441\u043e \u0437\u0440\u0435\u043d\u0438\u0435\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0432\u044f\u0437\u0430\u043d\u044b \u0441 \u0447\u0430\u0441\u0442\u044b\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u043e\u0432 (\u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u044b, \u043d\u043e\u0443\u0442\u0431\u0443\u043a\u0438 \u0438 \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u044b) \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 (\u0441\u043c\u0430\u0440\u0442\u0444\u043e\u043d\u044b \u0438 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u044b\u0435 \u043a\u043d\u0438\u0433\u0438). \u0423\u0447\u0435\u043d\u044b\u0435 <a href=\"https:\/\/bmjopen.bmj.com\/content\/5\/1\/e006748\">\u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442<\/a>, \u0447\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043e\u0434\u0440\u043e\u0441\u0442\u043a\u0430\u043c\u0438 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0432 \u043d\u043e\u0447\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f, \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u043d\u043e\u043c\u0443 \u0440\u0438\u0441\u043a\u0443 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0441\u043e \u0441\u043d\u043e\u043c, \u0431\u0435\u0441\u0441\u043e\u043d\u043d\u0438\u0446\u044b \u0438 \u0441\u0438\u043d\u0434\u0440\u043e\u043c\u0430 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e\u0441\u0442\u0438 \u0441\u043d\u0430. \u0421\u043e\u0433\u043b\u0430\u0441\u043d\u043e <a href=\"https:\/\/www.college-optometrists.org\/oip-resource\/computer-vision-syndrome--a-k-a--digital-eye-strain.html\">\u0434\u0440\u0443\u0433\u0438\u043c \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f\u043c<\/a>, \u0432\u043e\u0437\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441\u0438\u043d\u0435\u0433\u043e \u0441\u0432\u0435\u0442\u0430 \u0443\u0447\u0430\u0441\u0442\u0432\u0443\u0435\u0442 \u0432 \u0440\u0435\u0433\u0443\u043b\u044f\u0446\u0438\u0438 <a href=\"https:\/\/en.wikipedia.org\/wiki\/Circadian_rhythm\">\u0446\u0438\u0440\u043a\u0430\u0434\u043d\u043e\u0433\u043e \u0440\u0438\u0442\u043c\u0430<\/a> \u0438 \u0446\u0438\u043a\u043b\u0430 \u0441\u043d\u0430, \u0430 \u043d\u0435\u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u0430\u044f \u0441\u0432\u0435\u0442\u043e\u0432\u0430\u044f \u0441\u0440\u0435\u0434\u0430 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a \u0434\u0435\u043f\u0440\u0438\u0432\u0430\u0446\u0438\u0438 \u0441\u043d\u0430, \u0447\u0442\u043e \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0435 \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u0430 \u0438 \u0435\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0438 \u0437\u0430\u0434\u0430\u0447. \u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0442\u044c \u043d\u0435\u0433\u0430\u0442\u0438\u0432\u043d\u043e\u0435 \u0432\u043b\u0438\u044f\u043d\u0438\u0435 \u043c\u043e\u0436\u043d\u043e, \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0432 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0438\u043d\u0435\u0433\u043e \u0441\u0432\u0435\u0442\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0440\u0435\u0433\u0443\u043b\u0438\u0440\u043e\u0432\u043a\u0438 \u0446\u0432\u0435\u0442\u043e\u0432\u043e\u0439 \u0442\u0435\u043c\u043f\u0435\u0440\u0430\u0442\u0443\u0440\u044b \u0434\u0438\u0441\u043f\u043b\u0435\u044f (\u0442\u0430\u043a\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043a\u0430\u043a iOS <a href=\"https:\/\/support.apple.com\/en-us\/HT207570\">Night Shift<\/a> \u0438\u043b\u0438 Android <a href=\"https:\/\/support.google.com\/pixelphone\/answer\/7169926\">Night Light<\/a>), \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0430\u044f \u044f\u0440\u043a\u0438\u0439 \u0438\u043b\u0438 \u043d\u0435\u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u044b\u0439 \u0441\u0432\u0435\u0442 \u0432 \u0446\u0435\u043b\u043e\u043c \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0442\u0435\u043c\u043d\u043e\u0439 \u0442\u0435\u043c\u0435 \u0438\u043b\u0438 \u0440\u0435\u0436\u0438\u043c\u0443.<\/p>\n<p>  <b>\u042d\u043a\u043e\u043d\u043e\u043c\u0438\u044f \u044d\u043d\u0435\u0440\u0433\u0438\u0438 \u0432 \u0442\u0435\u043c\u043d\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435 \u043d\u0430 AMOLED-\u0434\u0438\u0441\u043f\u043b\u0435\u044f\u0445<\/b><\/p>\n<p>  \u0418\u0437\u0432\u0435\u0441\u0442\u043d\u043e, \u0447\u0442\u043e \u0442\u0435\u043c\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442 \u043c\u043d\u043e\u0433\u043e \u044d\u043d\u0435\u0440\u0433\u0438\u0438 \u043d\u0430 AMOLED-\u0434\u0438\u0441\u043f\u043b\u0435\u044f\u0445. \u0418\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f, \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d\u043d\u044b\u0435 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u043c Google \u0442\u0430\u043a\u0438\u043c, \u043a\u0430\u043a YouTube, \u0434\u043e\u043a\u0430\u0437\u0430\u043b\u0438, \u0447\u0442\u043e \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u044f \u044d\u043d\u0435\u0440\u0433\u0438\u0438 \u043c\u043e\u0436\u0435\u0442 \u0434\u043e\u0441\u0442\u0438\u0433\u0430\u0442\u044c 60%. \u0412 \u0432\u0438\u0434\u0435\u043e \u043d\u0438\u0436\u0435 \u0434\u0430\u043d\u0430 \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e\u0431 \u044d\u0442\u0438\u0445 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f\u0445 \u0438 \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0438 \u044d\u043d\u0435\u0440\u0433\u0438\u0438 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;\"><iframe src=\"https:\/\/www.youtube.com\/embed\/N_6sPd0Jd3g?rel=0&amp;showinfo=1&amp;hl=en-US\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen scrolling=\"no\" allow=\"encrypted-media; accelerometer; gyroscope; picture-in-picture\"><\/iframe><\/div>\n<\/div>\n<\/div>\n<h3>\u041a\u0430\u043a \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u0435\u043c\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c \u0432 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u0435<\/h3>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u043b, \u043f\u043e\u0447\u0435\u043c\u0443 \u0442\u0435\u043c\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c \u0442\u0430\u043a \u0432\u0430\u0436\u0435\u043d \u0434\u043b\u044f \u043c\u043d\u043e\u0433\u0438\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0435\u0433\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/wm\/ga\/yn\/wmgayn7k-5iqusbqrkhd8ilmnlc.png\" width=\"350\"><br \/>  <i>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0442\u0435\u043c\u043d\u043e\u0439 \u0442\u0435\u043c\u044b \u043d\u0430 Android Q<\/i><\/p>\n<p>  \u041e\u043f\u0435\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u044b, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0449\u0438\u0435 \u0442\u0435\u043c\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c \u0438\u043b\u0438 \u0442\u0435\u043c\u043d\u0443\u044e \u0442\u0435\u043c\u0443, \u043e\u0431\u044b\u0447\u043d\u043e \u0438\u043c\u0435\u044e\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445. \u0412 macOS X \u044d\u0442\u043e \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u00ab\u041e\u0431\u0449\u0438\u0435\u00bb \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0445 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0438 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f Appearance (<a href=\"https:\/\/web.dev\/prefers-color-scheme\/macosx.png\">\u0441\u043d\u0438\u043c\u043e\u043a \u044d\u043a\u0440\u0430\u043d\u0430<\/a>), \u0430 \u0432 Windows 10 \u2014 \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 Colors \u043f\u043e\u0434 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c Choose your color (<a href=\"https:\/\/web.dev\/prefers-color-scheme\/windows10.png\">\u0441\u043d\u0438\u043c\u043e\u043a \u044d\u043a\u0440\u0430\u043d\u0430<\/a>). \u0414\u043b\u044f Android Q \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0440\u0435\u0436\u0438\u043c \u0432 Display as a Dark Theme \u200b\u200b(<a href=\"https:\/\/web.dev\/prefers-color-scheme\/android.png\">\u0441\u043d\u0438\u043c\u043e\u043a \u044d\u043a\u0440\u0430\u043d\u0430<\/a>), \u0430 \u0432 iOS 13 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0446\u0432\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u043c\u043e\u0436\u043d\u043e \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 Display &amp; Brightness (<a href=\"https:\/\/web.dev\/prefers-color-scheme\/ios.jpg\">\u0441\u043d\u0438\u043c\u043e\u043a \u044d\u043a\u0440\u0430\u043d\u0430<\/a>).<\/p>\n<h3>\u041c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441 <b>prefers-color-scheme<\/b><\/h3>\n<p>  \u0415\u0449\u0435 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0442\u0435\u043e\u0440\u0438\u0438, \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u044f \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0443. <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Media_Queries\/Using_media_queries\">\u041c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441\u044b<\/a> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0430\u0432\u0442\u043e\u0440\u0430\u043c \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0430\u0433\u0435\u043d\u0442\u0430 \u0438\u043b\u0438 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430. \u041e\u043d\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432 CSS \u043c\u0435\u0434\u0438\u0430-\u043f\u0440\u0430\u0432\u0438\u043b\u0435 \u0434\u043b\u044f \u0443\u0441\u043b\u043e\u0432\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u0442\u0438\u043b\u0435\u0439 \u043a \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0443 \u0438 \u0432 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0434\u0440\u0443\u0433\u0438\u0445 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430\u0445 \u0438 \u200b\u200b\u044f\u0437\u044b\u043a\u0430\u0445 \u0442\u0430\u043a\u0438\u0445, \u043a\u0430\u043a HTML \u0438 JavaScript. <a href=\"https:\/\/drafts.csswg.org\/mediaqueries-5\/\">\u041c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0443\u0440\u043e\u0432\u043d\u044f 5<\/a> \u0432\u0432\u043e\u0434\u044f\u0442 \u0442\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u0435 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043c\u0435\u0434\u0438\u0430-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u0447\u0442\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0438\u0433\u043d\u0430\u043b\u043e\u043c \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u043e\u0432 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u0442\u044c \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0434\u043b\u044f \u044e\u0437\u0435\u0440\u0430 \u0441\u043f\u043e\u0441\u043e\u0431 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430.<\/p>\n<p>  \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u043e\u0435 CSS \u043c\u0435\u0434\u0438\u0430-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <b>prefers-reduced-motion<\/b> \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0442\u043e\u0433\u043e, \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442 \u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c, \u0447\u0442\u043e\u0431\u044b \u041e\u0421 \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043b\u0430 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442. \u042f \u0443\u0436\u0435 <a href=\"https:\/\/developers.google.com\/web\/updates\/2019\/03\/prefers-reduced-motion\">\u043f\u0438\u0441\u0430\u043b<\/a> \u043e <b>prefers-reduced-motion<\/b> \u0440\u0430\u043d\u0435\u0435.<\/p>\n<p>  CSS \u043c\u0435\u0434\u0438\u0430-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <b><a href=\"https:\/\/drafts.csswg.org\/mediaqueries-5\/#prefers-color-scheme\">prefers-color-scheme<\/a><\/b> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f, \u043a\u0430\u043a\u0430\u044f \u0442\u0435\u043c\u0430, \u0441\u0432\u0435\u0442\u043b\u0430\u044f \u0438\u043b\u0438 \u0442\u0451\u043c\u043d\u0430\u044f, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u043e\u043c \u0432 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u0435. \u041e\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438:  <\/p>\n<ul>\n<li><b>no-preference<\/b>: \u0423\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u0441\u0434\u0435\u043b\u0430\u043b \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0435\u043d\u0438\u0439, \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0445 \u0441\u0438\u0441\u0442\u0435\u043c\u0435. \u042d\u0442\u043e \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0441\u043b\u043e\u0432\u043e \u043e\u0446\u0435\u043d\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u043b\u043e\u0436\u043d\u043e\u0435 \u0432 <a href=\"https:\/\/drafts.csswg.org\/mediaqueries-5\/#boolean-context\">\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435<\/a>.<\/li>\n<li><b>light<\/b>: \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0443\u0432\u0435\u0434\u043e\u043c\u0438\u043b \u0441\u0438\u0441\u0442\u0435\u043c\u0443, \u0447\u0442\u043e \u043e\u043d \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0438\u0442\u0430\u0435\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0441\u043e \u0441\u0432\u0435\u0442\u043b\u043e\u0439 \u0442\u0435\u043c\u043e\u0439 (\u0442\u0435\u043c\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442 \u043d\u0430 \u0441\u0432\u0435\u0442\u043b\u043e\u043c \u0444\u043e\u043d\u0435).<\/li>\n<li><b>dark<\/b>: \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0443\u0432\u0435\u0434\u043e\u043c\u0438\u043b \u0441\u0438\u0441\u0442\u0435\u043c\u0443, \u0447\u0442\u043e \u043e\u043d \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0438\u0442\u0430\u0435\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0441 \u0442\u0435\u043c\u043d\u043e\u0439 \u0442\u0435\u043c\u043e\u0439 (\u0441\u0432\u0435\u0442\u043b\u044b\u0439 \u0442\u0435\u043a\u0441\u0442 \u043d\u0430 \u0442\u0435\u043c\u043d\u043e\u043c \u0444\u043e\u043d\u0435).<\/li>\n<\/ul>\n<p>  <\/p>\n<h3>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0442\u0435\u043c\u043d\u043e\u0433\u043e \u0440\u0435\u0436\u0438\u043c\u0430<\/h3>\n<p>  <\/p>\n<h3>\u0412\u044b\u044f\u0441\u043d\u0438\u043c, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043b\u0438 \u0442\u0435\u043c\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c<\/h3>\n<p>  \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0442\u0435\u043c\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043b\u0435\u0433\u043a\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043b\u0438 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0442\u0435\u043c\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c, \u0432\u044b\u044f\u0441\u043d\u0438\u0432, \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u043b\u0438 \u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441 <b>prefers-color-scheme<\/b>. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u044f \u043d\u0435 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u044e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u044e \u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0435.<\/p>\n<pre><code class=\"javascript\">if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {   console.log(' Dark mode is supported'); } <\/code><\/pre>\n<p>  \u041d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438 <b>prefers-color-scheme<\/b> \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u043d\u0430 \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0430\u0445, \u0442\u0430\u043a \u0438 \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 (\u0433\u0434\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e) \u0432 Chrome \u0438 Edge \u0441 \u0432\u0435\u0440\u0441\u0438\u0438 76, Firefox \u0441 \u0432\u0435\u0440\u0441\u0438\u0438 67 \u0438 Safari \u0441 \u0432\u0435\u0440\u0441\u0438\u0438 12.1 \u0432 macOS \u0438 \u0441 \u0432\u0435\u0440\u0441\u0438\u0438 13 \u043d\u0430 iOS. \u0414\u043b\u044f \u0432\u0441\u0435\u0445 \u0434\u0440\u0443\u0433\u0438\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0439\u0442\u0438 \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 <a href=\"https:\/\/caniuse.com\/#feat=prefers-color-scheme\">Can I use support tables<\/a>.<\/p>\n<p>  \u0414\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <b><a href=\"https:\/\/github.com\/GoogleChromeLabs\/dark-mode-toggle\">&lt;dark-mode-toggle&gt;<\/a><\/b>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0442\u0435\u043c\u043d\u043e\u0433\u043e \u0440\u0435\u0436\u0438\u043c\u0430 \u0432 \u0441\u0442\u0430\u0440\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b. \u041e\u0431 \u044d\u0442\u043e\u043c \u044f <a href=\"https:\/\/web.dev\/prefers-color-scheme\/#the-lessdark-mode-togglegreater-custom-element\">\u043d\u0430\u043f\u0438\u0448\u0443<\/a> \u0434\u0430\u043b\u0435\u0435.<\/p>\n<h3>\u0422\u0435\u043c\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435<\/h3>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0442\u0435\u043c\u043d\u043e\u0433\u043e \u0440\u0435\u0436\u0438\u043c\u0430. \u0422\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u0432 \u0444\u0438\u043b\u044c\u043c\u0435 <a href=\"https:\/\/en.wikipedia.org\/wiki\/Highlander_(film)\">\u00ab\u0413\u043e\u0440\u0435\u0446\u00bb<\/a>, \u0432 \u043a\u043e\u043d\u0446\u0435 \u043c\u043e\u0436\u0435\u0442 \u043e\u0441\u0442\u0430\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d: \u0442\u0435\u043c\u043d\u044b\u0439 \u0438\u043b\u0438 \u0441\u0432\u0435\u0442\u043b\u044b\u0439! \u041f\u043e\u0447\u0435\u043c\u0443 \u044f \u0430\u043a\u0446\u0435\u043d\u0442\u0438\u0440\u0443\u044e \u043d\u0430 \u044d\u0442\u043e\u043c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435? \u041f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u044d\u0442\u043e\u0442 \u0444\u0430\u043a\u0442 \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438. \u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u043d\u0435 \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0439\u0442\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u0442\u044c CSS \u043d\u0430 \u043a\u0440\u0438\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0434\u043b\u044f \u0440\u0435\u0436\u0438\u043c\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0435\u0439\u0447\u0430\u0441 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f. \u0421\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043b\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u044f \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u043b \u043c\u043e\u0439 CSS \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043d\u0430 \u0442\u0440\u0438 \u0447\u0430\u0441\u0442\u0438 \u0441 \u0446\u0435\u043b\u044c\u044e \u043e\u0442\u043b\u043e\u0436\u0438\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 <a href=\"https:\/\/web.dev\/defer-non-critical-css\/\">\u043d\u0435\u043a\u0440\u0438\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e CSS<\/a>:<\/p>\n<ul>\n<li><b>style.css<\/b> \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043e\u0431\u0449\u0438\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043d\u0430 \u0432\u0441\u0435\u043c \u0441\u0430\u0439\u0442\u0435<\/li>\n<li><b>dark.css<\/b> \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u0430, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0434\u043b\u044f \u0442\u0435\u043c\u043d\u043e\u0433\u043e \u0440\u0435\u0436\u0438\u043c\u0430<\/li>\n<li><b>light.css<\/b> \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u0430, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0441\u0432\u0435\u0442\u043b\u043e\u0433\u043e \u0440\u0435\u0436\u0438\u043c\u0430.<\/li>\n<\/ul>\n<p>  <\/p>\n<h3>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438<\/h3>\n<p>  \u0414\u0432\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0445, light.css \u0438 dark.css, \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f \u0432\u044b\u0431\u043e\u0440\u043e\u0447\u043d\u043e \u0447\u0435\u0440\u0435\u0437 \u0437\u0430\u043f\u0440\u043e\u0441 &lt;link media&gt;. <\/p>\n<p>  \u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e <a href=\"https:\/\/caniuse.com\/#feat=prefers-color-scheme\">\u043d\u0435 \u0432\u0441\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b<\/a> \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 CSS \u043c\u0435\u0434\u0438\u0430-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <a href=\"https:\/\/caniuse.com\/#feat=prefers-color-scheme\">prefers-color-scheme<\/a> (\u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u0432\u0430\u0435\u043c\u043e\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/web.dev\/prefers-color-scheme\/#finding-out-if-dark-mode-is-supported-by-the-browser\">\u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0432\u044b\u0448\u0435<\/a>), \u044d\u0442\u043e \u0440\u0435\u0448\u0430\u0435\u0442\u0441\u044f \u0432\u044b\u0431\u043e\u0440\u043e\u043c light.css \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0447\u0435\u0440\u0435\u0437 \u044d\u043b\u0435\u043c\u0435\u043d\u0442  \u0432 \u043d\u0430\u0448\u0435\u043c \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u043c \u0441\u043a\u0440\u0438\u043f\u0442\u0435 (light \u2014 \u044d\u0442\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u044b\u0439 \u0432\u044b\u0431\u043e\u0440, \u044f \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0433 \u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c dark \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e). \u0427\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f <a href=\"https:\/\/en.wikipedia.org\/wiki\/Flash_of_unstyled_content\">\u043d\u0435\u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e<\/a>, \u044f \u0441\u043a\u0440\u044b\u0432\u0430\u044e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0434\u043e \u0442\u0435\u0445 \u043f\u043e\u0440, \u043f\u043e\u043a\u0430 \u043d\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0441\u044f light.css.<\/p>\n<pre><code class=\"html\">&lt;script&gt;   \/\/ If `prefers-color-scheme` is not supported, fall back to light mode.   \/\/ In this case, light.css will be downloaded with `highest` priority.   if (window.matchMedia('(prefers-color-scheme)').media === 'not all') {     document.documentElement.style.display = 'none';     document.head.insertAdjacentHTML(         'beforeend',         '&lt;link rel=&quot;stylesheet&quot; href=&quot;\/light.css&quot; onload=&quot;document.documentElement.style.display = ``&quot;&gt;'     );   } &lt;\/script&gt; &lt;!--   Conditionally either load the light or the dark stylesheet. The matching file   will be downloaded with `highest`, the non-matching file with `lowest`   priority. If the browser doesn't support `prefers-color-scheme`, the media   query is unknown and the files are downloaded with `lowest` priority (but   above I already force `highest` priority for my default light experience). --&gt;  &lt;link rel=&quot;stylesheet&quot; href=&quot;\/dark.css&quot; media=&quot;(prefers-color-scheme: dark)&quot;&gt;  &lt;link rel=&quot;stylesheet&quot; href=&quot;\/light.css&quot; media=&quot;(prefers-color-scheme: no-preference), (prefers-color-scheme: light)&quot;&gt; &lt;!-- The main stylesheet --&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;\/style.css&quot;&gt;  <\/code><\/pre>\n<p>  <\/p>\n<h3>\u0410\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u0442\u0438\u043b\u0435\u0439<\/h3>\n<p>  \u042f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/var\">\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 CSS<\/a>, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u0442\u0438\u043b\u044e style.css \u0431\u044b\u0442\u044c \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u043c, \u0432\u0441\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0441\u0432\u0435\u0442\u043b\u043e\u0433\u043e \u0438\u043b\u0438 \u0442\u0435\u043c\u043d\u043e\u0433\u043e \u0440\u0435\u0436\u0438\u043c\u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432 \u0434\u0432\u0443\u0445 \u0434\u0440\u0443\u0433\u0438\u0445 \u0444\u0430\u0439\u043b\u0430\u0445: dark.css \u0438 light.css. \u041d\u0438\u0436\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d \u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c \u043e\u0431\u0449\u0443\u044e \u0438\u0434\u0435\u044e. \u042f \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u044e \u0434\u0432\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, -\u2060-\u2060color \u0438 -\u2060-\u2060background-color, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u0437\u0434\u0430\u044e\u0442 \u043e\u0441\u043d\u043e\u0432\u043d\u0443\u044e \u0442\u0435\u043c\u0443 \u00ab\u0442\u0435\u043c\u043d\u044b\u0439 \u043d\u0430 \u0441\u0432\u0435\u0442\u043b\u043e\u043c\u00bb \u0438 \u00ab\u0441\u0432\u0435\u0442\u043b\u044b\u0439 \u043d\u0430 \u0442\u0435\u043c\u043d\u043e\u043c\u00bb.<\/p>\n<pre><code class=\"css\">\/* light.css:  dark-on-light *\/ :root {   --color: rgb(5, 5, 5);   --background-color: rgb(250, 250, 250); } \/* dark.css:  light-on-dark *\/ :root {   --color: rgb(250, 250, 250);   --background-color: rgb(5, 5, 5); } <\/code><\/pre>\n<p>  \u0417\u0430\u0442\u0435\u043c \u0432 <b>style.css<\/b> \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u044d\u0442\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0432 <b>body {\u2026}<\/b>. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u043d\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u044b \u0432 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:root\">CSS \u043f\u0441\u0435\u0432\u0434\u043e-\u043a\u043b\u0430\u0441\u0441\u0435<\/a> <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:root\">:root<\/a> \u2014 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432 HTML \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <b>&lt;html&gt;<\/b> \u0438 \u0438\u0434\u0435\u043d\u0442\u0438\u0447\u0435\u043d \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0443 <b>html<\/b>, \u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0435\u0433\u043e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u044c \u0432\u044b\u0448\u0435: \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u043e \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u044e\u0442\u0441\u044f, \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 CSS \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435.<\/p>\n<pre><code class=\"css\">\/* style.css *\/ :root {   color-scheme: light dark; } body {   color: var(--color);   background-color: var(--background-color); }<\/code><\/pre>\n<p>  \u0412 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u043c \u0432\u044b\u0448\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b, \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u0437\u0430\u043c\u0435\u0442\u0438\u043b\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <b><a href=\"https:\/\/drafts.csswg.org\/css-color-adjust-1\/#propdef-color-scheme\">color-scheme<\/a><\/b> \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 <b>light dark<\/b>, \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c\u0438 \u043f\u0440\u043e\u0431\u0435\u043b\u043e\u043c.<\/p>\n<p>  \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443, \u043a\u0430\u043a\u0438\u0435 \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u0435 \u0442\u0435\u043c\u044b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043c\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0435\u043c\u0443 \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u0442\u0438\u043b\u0435\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0430\u0433\u0435\u043d\u0442\u0430. \u042d\u0442\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u043f\u043e\u043b\u044f \u0444\u043e\u0440\u043c\u044b \u0441 \u0442\u0435\u043c\u043d\u044b\u043c \u0444\u043e\u043d\u043e\u043c \u0438 \u0441\u0432\u0435\u0442\u043b\u044b\u043c \u0442\u0435\u043a\u0441\u0442\u043e\u043c, \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u043e\u0441\u044b \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u0438\u043b\u0438 \u0447\u0442\u043e\u0431\u044b \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0446\u0432\u0435\u0442 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0441 \u0443\u0447\u0435\u0442\u043e\u043c \u0442\u0435\u043c\u044b. \u0414\u0435\u0442\u0430\u043b\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <b>color-scheme<\/b> \u0443\u043a\u0430\u0437\u0430\u043d\u044b \u0432 <a href=\"https:\/\/drafts.csswg.org\/css-color-adjust-1\/\">CSS Color Adjustment Module Level 1<\/a>.<\/p>\n<p>  \u0423\u0437\u043d\u0430\u0439\u0442\u0435 <a href=\"https:\/\/medium.com\/dev-channel\/what-does-dark-modes-supported-color-schemes-actually-do-69c2eacdfa1d\">\u0431\u043e\u043b\u044c\u0448\u0435 \u043e <b>color-scheme<\/b><\/a>.<\/p>\n<p>  \u0412\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u2014 \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 CSS \u0441\u0442\u0438\u043b\u0435\u0439 \u0434\u043b\u044f \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0435\u0441\u0442\u044c \u043d\u0430 \u043c\u043e\u0435\u043c \u0441\u0430\u0439\u0442\u0435. \u0421\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u0442\u0438\u043b\u0435\u0439 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0442\u0435\u043c\u043d\u044b\u043c \u0440\u0435\u0436\u0438\u043c\u043e\u043c. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u043c\u0435\u0441\u0442\u043e <b>-\u2060-\u2060highlight-yellow<\/b> \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 <b>-\u2060-\u2060accent-color<\/b>, \u0442\u0430\u043a \u043a\u0430\u043a \u00ab\u0436\u0435\u043b\u0442\u044b\u0439\u00bb \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043c\u043e\u0436\u0435\u0442 \u043d\u0435 \u0431\u044b\u0442\u044c \u0436\u0435\u043b\u0442\u044b\u043c \u0432 \u0442\u0435\u043c\u043d\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435 \u0438\u043b\u0438 \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442. \u041d\u0438\u0436\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d \u043f\u0440\u0438\u043c\u0435\u0440 \u0435\u0449\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e.<\/p>\n<pre><code class=\"css\">\/* dark.css *\/ :root {   --color: rgb(250, 250, 250);   --background-color: rgb(5, 5, 5);   --link-color: rgb(0, 188, 212);   --main-headline-color: rgb(233, 30, 99);   --accent-background-color: rgb(0, 188, 212);   --accent-color: rgb(5, 5, 5); } \/* light.css *\/ :root {   --color: rgb(5, 5, 5);   --background-color: rgb(250, 250, 250);   --link-color: rgb(0, 0, 238);   --main-headline-color: rgb(0, 0, 192);   --accent-background-color: rgb(0, 0, 238);   --accent-color: rgb(250, 250, 250); }<\/code><\/pre>\n<p>  <\/p>\n<h3>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u044b\u0439 \u0440\u0430\u0437\u0431\u043e\u0440 <\/h3>\n<p>  \u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0432\u0441\u0442\u0430\u0432\u043a\u0435 <a href=\"https:\/\/dark-mode-baseline.glitch.me\/\">Glitch<\/a> \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432\u0441\u0435, \u0447\u0442\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u043e \u0432\u044b\u0448\u0435, \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435. \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0442\u0435\u043c\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c \u0432 <a href=\"https:\/\/web.dev\/prefers-color-scheme\/#activating-dark-mode-in-the-operating-system\">\u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445 \u0432\u0430\u0448\u0435\u0439 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b<\/a> \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435, \u043a\u0430\u043a \u043e\u0442\u0440\u0435\u0430\u0433\u0438\u0440\u0443\u0435\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430.<\/p>\n<h3>\u0412\u043b\u0438\u044f\u043d\u0438\u0435 \u043d\u0430 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438<\/h3>\n<p>  \u041a\u043e\u0433\u0434\u0430 \u0432\u044b \u043d\u0430\u0438\u0433\u0440\u0430\u0435\u0442\u0435\u0441\u044c \u0441 \u044d\u0442\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u043c, \u0432\u044b \u043f\u043e\u0439\u043c\u0435\u0442\u0435, \u043f\u043e\u0447\u0435\u043c\u0443 \u044f \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e \u0441\u0432\u043e\u0438 <b>dark.css<\/b> \u0438 <b>light.css<\/b> \u0447\u0435\u0440\u0435\u0437 \u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441\u044b. \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0442\u0435\u043c\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c \u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443: \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435, \u0432 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u043d\u0435\u0441\u043e\u0432\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u0442\u0438\u043b\u0435\u0439 \u0432\u0441\u0435 \u0435\u0449\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f, \u043d\u043e \u0441 \u0441\u0430\u043c\u044b\u043c \u043d\u0438\u0437\u043a\u0438\u043c \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u043d\u0435 \u043a\u043e\u043d\u043a\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \u0441 \u0440\u0435\u0441\u0443\u0440\u0441\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b \u0441\u0430\u0439\u0442\u0443 \u043f\u0440\u044f\u043c\u043e \u0441\u0435\u0439\u0447\u0430\u0441.<\/p>\n<p>  \u0423\u0437\u043d\u0430\u0439\u0442\u0435, <a href=\"https:\/\/blog.tomayac.com\/2018\/11\/08\/why-browsers-download-stylesheets-with-non-matching-media-queries-180513\">\u043f\u043e\u0447\u0435\u043c\u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u0442\u0438\u043b\u0435\u0439 \u0441 \u043d\u0435\u0441\u043e\u0432\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u043c\u0438 \u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c\u0438<\/a>.<\/p>\n<p>  \u0421\u0430\u0439\u0442 \u0432 \u0441\u0432\u0435\u0442\u043b\u043e\u043c \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0442\u0435\u043c\u043d\u043e\u0433\u043e \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u044f \u0441 \u0441\u0430\u043c\u044b\u043c \u043d\u0438\u0437\u043a\u0438\u043c \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043e\u043c:<br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/bw\/1k\/qs\/bw1kqsypxmaa4nts_oosemzaeyy.png\"><\/p>\n<p>  \u0421\u0430\u0439\u0442 \u0432 \u0442\u0435\u043c\u043d\u043e\u043c \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0441\u0432\u0435\u0442\u043b\u043e\u0433\u043e \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u044f \u0441 \u0441\u0430\u043c\u044b\u043c \u043d\u0438\u0437\u043a\u0438\u043c \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043e\u043c:<br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/bj\/3b\/je\/bj3bje8wr5o3vwx0cjfwymo3f68.png\"><\/p>\n<p>  \u0421\u0430\u0439\u0442 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0432 \u0441\u0432\u0435\u0442\u043b\u043e\u043c \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0438 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 prefers-color-scheme, \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0442\u0435\u043c\u043d\u043e\u0433\u043e \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u044f \u0441 \u0441\u0430\u043c\u044b\u043c \u043d\u0438\u0437\u043a\u0438\u043c \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043e\u043c:<br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/dd\/ai\/fn\/ddaifn724jsrqn3uda5rkru3npu.png\"><\/p>\n<h3>\u041a\u0430\u043a \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0442\u0435\u043c\u043d\u043e\u0433\u043e \u0440\u0435\u0436\u0438\u043c\u0430<\/h3>\n<p>  \u041a\u0430\u043a \u0438 \u043d\u0430 \u043b\u044e\u0431\u043e\u0435 \u0434\u0440\u0443\u0433\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441\u0430, \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0442\u0435\u043c\u043d\u043e\u0433\u043e \u0440\u0435\u0436\u0438\u043c\u0430 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u0447\u0435\u0440\u0435\u0437 JavaScript. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f <a href=\"https:\/\/developers.google.com\/web\/fundamentals\/design-and-ux\/browser-customization\/#provide_great_icons_tiles\">\u0437\u043d\u0430\u0447\u043a\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/a> \u0438\u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f <a href=\"https:\/\/developers.google.com\/web\/fundamentals\/design-and-ux\/browser-customization\/#meta_theme_color_for_chrome_and_opera\"><b>&lt;meta name = &quot;theme-color&quot;&gt;<\/b><\/a>, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0446\u0432\u0435\u0442 \u0441\u0442\u0440\u043e\u043a\u0438 URL-\u0430\u0434\u0440\u0435\u0441\u0430 \u0432 Chrome. <a href=\"https:\/\/web.dev\/prefers-color-scheme\/#full-example\">\u041f\u0440\u0438\u043c\u0435\u0440<\/a> \u0432\u044b\u0448\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0435 \u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438. \u0427\u0442\u043e\u0431\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0446\u0432\u0435\u0442\u0430 \u0442\u0435\u043c\u044b \u0438 \u0437\u043d\u0430\u0447\u043a\u0430, \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 <a href=\"https:\/\/dark-mode-baseline.glitch.me\/\">\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044e \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u0435<\/a>.<\/p>\n<pre><code class=\"javascript\">const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');   darkModeMediaQuery.addListener((e) =&gt; {     const darkModeOn = e.matches;     console.log(`Dark mode is ${darkModeOn ? ' on' : '\ufe0f off'}.`);   });<\/code><\/pre>\n<p>  <\/p>\n<h3>\u041b\u0443\u0447\u0448\u0438\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438 \u0442\u0435\u043c\u043d\u043e\u0433\u043e \u0440\u0435\u0436\u0438\u043c\u0430<\/h3>\n<p>  <b>\u0418\u0437\u0431\u0435\u0433\u0430\u0439\u0442\u0435 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u0431\u0435\u043b\u043e\u0433\u043e<\/b><\/p>\n<p>  \u0412\u044b \u043c\u043e\u0433\u043b\u0438 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0443\u044e \u0434\u0435\u0442\u0430\u043b\u044c: \u044f \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0447\u0438\u0441\u0442\u043e \u0431\u0435\u043b\u044b\u0439 \u0446\u0432\u0435\u0442. \u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0442\u0438\u0442\u044c \u0441\u0432\u0435\u0447\u0435\u043d\u0438\u0435 \u043d\u0430 \u0444\u043e\u043d\u0435 \u043e\u043a\u0440\u0443\u0436\u0430\u044e\u0449\u0435\u0433\u043e \u0442\u0435\u043c\u043d\u043e\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e, \u044f \u0432\u044b\u0431\u0440\u0430\u043b \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0431\u043e\u043b\u0435\u0435 \u0442\u0435\u043c\u043d\u044b\u0439 \u0431\u0435\u043b\u044b\u0439 \u0446\u0432\u0435\u0442, \u0447\u0442\u043e-\u0442\u043e \u0432\u0440\u043e\u0434\u0435 <b>rgb (250, 250, 250)<\/b>.<\/p>\n<p>  <b>\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0446\u0432\u0435\u0442\u0430 \u0438 \u0437\u0430\u0442\u0435\u043c\u043d\u0435\u043d\u0438\u0435 \u0444\u043e\u0442\u043e\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439<\/b><\/p>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u044b \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u0435 \u0434\u0432\u0430 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0430 \u043d\u0438\u0436\u0435, \u0432\u044b \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u0435, \u0447\u0442\u043e \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0442\u0435\u043c\u0430 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0430\u0441\u044c \u0441 \u0442\u0435\u043c\u043d\u043e\u0433\u043e \u043d\u0430 \u0441\u0432\u0435\u0442\u043b\u043e\u043c \u043d\u0430 \u0441\u0432\u0435\u0442\u043b\u044b\u0439 \u043d\u0430 \u0442\u0435\u043c\u043d\u043e\u043c, \u043d\u043e \u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0438\u043d\u0430\u0447\u0435. <a href=\"https:\/\/medium.com\/dev-channel\/re-colorization-for-dark-mode-19e2e17b584b\">\u041c\u043e\u0439 \u043e\u043f\u0440\u043e\u0441<\/a> \u043f\u043e\u043a\u0430\u0437\u0430\u043b, \u0447\u0442\u043e \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0438\u0442\u0430\u044e\u0442 \u0447\u0443\u0442\u044c \u043c\u0435\u043d\u0435\u0435 \u044f\u0440\u043a\u0438\u0435 \u0438 \u043d\u0430\u0441\u044b\u0449\u0435\u043d\u043d\u044b\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0433\u0434\u0430 \u0430\u043a\u0442\u0438\u0432\u0435\u043d \u0442\u0435\u043c\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c. \u042f \u043d\u0430\u0437\u044b\u0432\u0430\u044e \u044d\u0442\u043e \u043f\u0435\u0440\u0435\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u043d\u0438\u0435\u043c (re-colorization).<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/bm\/id\/iy\/bmidiy6w3vlbsvye5konmvpmito.png\" width=\"780\"><\/div>\n<p> <i>\u0426\u0432\u0435\u0442\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u0431\u043e\u043b\u0435\u0435 \u0442\u0443\u0441\u043a\u043b\u044b\u043c\u0438 \u0432 \u0442\u0435\u043c\u043d\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435<\/i><\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/2s\/0p\/pa\/2s0ppaw_5q3jg75ci23hgvrchqk.png\" width=\"780\"><\/div>\n<p> <i>\u0426\u0432\u0435\u0442\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0432 \u0441\u0432\u0435\u0442\u043b\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435<\/i><\/p>\n<p>  \u041f\u0435\u0440\u0435\u043a\u0440\u0430\u0441\u0438\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0438\u043b\u044c\u0442\u0440\u0430 CSS. \u042f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 CSS, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0432\u0441\u0435\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c, \u043d\u0435 \u0438\u043c\u0435\u044e\u0449\u0438\u043c <b>.svg<\/b> \u0432 \u0438\u0445 URL-\u0430\u0434\u0440\u0435\u0441\u0430\u0445. \u0418\u0434\u0435\u044f \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u044f \u043c\u043e\u0433\u0443 \u0434\u0430\u0442\u044c \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u043e\u0439 \u0433\u0440\u0430\u0444\u0438\u043a\u0435 (\u0438\u043a\u043e\u043d\u043a\u0430\u043c) \u0434\u0440\u0443\u0433\u0443\u044e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443, \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e\u0431 \u044d\u0442\u043e\u043c \u0432 <a href=\"https:\/\/web.dev\/prefers-color-scheme\/#vector-graphics-and-icons\">\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435<\/a>. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u043a\u0430\u043a \u044f \u0441\u043d\u043e\u0432\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/var\">\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e CSS<\/a>, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0437\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b\u0441\u0442\u0440\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u0432\u043e\u0439 \u0444\u0438\u043b\u044c\u0442\u0440.<\/p>\n<p>  \u0423\u0437\u043d\u0430\u0439\u0442\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u043e \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0435\u043d\u0438\u044f\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0438\u0437 <a href=\"https:\/\/medium.com\/dev-channel\/re-colorization-for-dark-mode-19e2e17b584b\">\u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f<\/a>.<\/p>\n<p>  \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043f\u0435\u0440\u0435\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u043d\u0438\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0442\u0435\u043c\u043d\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435, \u0442\u043e \u0435\u0441\u0442\u044c, \u043a\u043e\u0433\u0434\u0430 <b>dark.css<\/b> \u0430\u043a\u0442\u0438\u0432\u0435\u043d, \u0432 <b>light.css<\/b> \u043d\u0435\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u043f\u0440\u0430\u0432\u0438\u043b.<\/p>\n<pre><code class=\"css\">\/* dark.css *\/ --image-filter: grayscale(50%); img:not([src*=&quot;.svg&quot;]) {   filter: var(--image-filter); } <\/code><\/pre>\n<p>  <b>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0438\u043d\u0442\u0435\u043d\u0441\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u043f\u0435\u0440\u0435\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u043d\u0438\u044f \u0442\u0435\u043c\u043d\u043e\u0433\u043e \u0440\u0435\u0436\u0438\u043c\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e JavaScript<\/b><\/p>\n<p>  \u041c\u044b \u0440\u0430\u0437\u043d\u044b\u0435, \u0438 \u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u0430 \u0431\u0443\u0434\u0443\u0442 \u0441\u0432\u043e\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u043a\u0430\u043a \u0438\u043c\u0435\u043d\u043d\u043e \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0435\u043c\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c. \u041f\u0440\u0438\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044f\u0441\u044c \u043c\u0435\u0442\u043e\u0434\u0430 \u043f\u0435\u0440\u0435\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u043d\u0438\u044f, \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0433\u043e \u0432\u044b\u0448\u0435, \u044f \u043b\u0435\u0433\u043a\u043e \u043c\u043e\u0433\u0443 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u043d\u0441\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u043e\u0442\u0442\u0435\u043d\u043a\u043e\u0432 \u0441\u0435\u0440\u043e\u0433\u043e \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0435\u043d\u0438\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Using_CSS_custom_properties#Values_in_JavaScript\">\u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e JavaScript<\/a>, \u0430 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <b>0%<\/b>, \u044f \u043c\u043e\u0433\u0443 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u043d\u0438\u0435. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e <b><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document\/documentElement\">document.documentElement<\/a><\/b> \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430, \u0442\u043e \u0435\u0441\u0442\u044c \u043d\u0430 \u0442\u043e\u0442 \u0436\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u043c\u043e\u0433\u0443 \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:root\">CSS \u043f\u0441\u0435\u0432\u0434\u043e-\u043a\u043b\u0430\u0441\u0441\u0430<\/a><b><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:root\">:root<\/a><\/b>.<\/p>\n<pre><code class=\"javascript\">const filter = 'grayscale(70%)'; document.documentElement.style.setProperty('--image-filter', value);<\/code><\/pre>\n<p>  <\/p>\n<h3>\u0418\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u0443\u044e \u0433\u0440\u0430\u0444\u0438\u043a\u0443 \u0438 \u0438\u043a\u043e\u043d\u043a\u0438<\/h3>\n<p>  \u0414\u043b\u044f \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u043e\u0439 \u0433\u0440\u0430\u0444\u0438\u043a\u0438 (\u0432 \u043c\u043e\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0438\u043a\u043e\u043d\u043a\u0438, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f \u0441\u0441\u044b\u043b\u0430\u044e\u0441\u044c \u0447\u0435\u0440\u0435\u0437 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b <b>&lt;img&gt;<\/b>) \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0434\u0440\u0443\u0433\u043e\u0439 \u043c\u0435\u0442\u043e\u0434 \u043f\u0435\u0440\u0435\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u043d\u0438\u044f. \u0425\u043e\u0442\u044f <a href=\"https:\/\/dl.acm.org\/citation.cfm?id=2982168\">\u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f<\/a> \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u0438, \u0447\u0442\u043e \u043b\u044e\u0434\u044f\u043c \u043d\u0435 \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u0438\u043d\u0432\u0435\u0440\u0441\u0438\u044f \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u0439, \u043e\u043d\u0430 \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0440\u043e\u0448\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0434\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0430 \u0438\u043a\u043e\u043d\u043e\u043a. \u042f \u0441\u043d\u043e\u0432\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 CSS \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0441\u0442\u0435\u043f\u0435\u043d\u0438 \u0438\u043d\u0432\u0435\u0440\u0441\u0438\u0438 \u0432 \u043e\u0431\u044b\u0447\u043d\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u0438 \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 <b>:hover<\/b>.<\/p>\n<p>  \u0418\u043a\u043e\u043d\u043a\u0430 \u0438\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432 \u0442\u0435\u043c\u043d\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/9e\/nf\/hl\/9enfhlmieghic6jxnm9wmad_gcc.png\" width=\"350\"><\/p>\n<p>  \u0418\u043a\u043e\u043d\u043a\u0430 \u0432 \u0441\u0432\u0435\u0442\u043b\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/qs\/er\/uu\/qseruulcgcfthfhcyvfankh4q6s.png\" width=\"350\"><\/p>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u043a\u0430\u043a \u0441\u043d\u043e\u0432\u0430 \u044f \u0438\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u0443\u044e \u0438\u043a\u043e\u043d\u043a\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 <b>dark.css<\/b>, \u043d\u043e \u043d\u0435 \u0432 <b>light.css<\/b>, \u0438 \u043a\u0430\u043a <b>:hover<\/b> \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u0443\u044e \u0438\u043d\u0442\u0435\u043d\u0441\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u0438\u043d\u0432\u0435\u0440\u0441\u0438\u0438 \u0432 \u0434\u0432\u0443\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445, \u0447\u0442\u043e\u0431\u044b \u0438\u043a\u043e\u043d\u043a\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u0430 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0442\u0435\u043c\u043d\u0435\u0435 \u0438\u043b\u0438 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u044f\u0440\u0447\u0435, \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0440\u0435\u0436\u0438\u043c\u0430, \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c.<\/p>\n<pre><code class=\"css\">\/* dark.css *\/ --icon-filter: invert(100%); --icon-filter_hover: invert(40%); img[src*=&quot;.svg&quot;] {   filter: var(--icon-filter); } \/* light.css *\/ --icon-filter_hover: invert(60%); \/* style.css *\/ img[src*=&quot;.svg&quot;]:hover {   filter: var(--icon-filter_hover); }<\/code><\/pre>\n<p>  <\/p>\n<h3>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 currentColor \u0434\u043b\u044f inline SVG<\/h3>\n<p>  \u0412\u043c\u0435\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f <a href=\"https:\/\/web.dev\/prefers-color-scheme\/#invert-vector-graphics-and-icons\">\u0438\u043d\u0432\u0435\u0440\u0441\u0438\u0438 \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432<\/a> \u0434\u043b\u044f inline SVG \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0441\u043b\u043e\u0432\u043e <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/color_value#currentColor_keyword\">currentColor<\/a>, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0446\u0432\u0435\u0442\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.<\/p>\n<p>  \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u0430\u043c \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0446\u0432\u0435\u0442\u0430 \u0434\u043b\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u044e\u0442 \u0435\u0433\u043e \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u0435\u0441\u043b\u0438 currentColor \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/SVG\/Tutorial\/Fills_and_Strokes#Fill_and_Stroke_Attributes\">\u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432<\/a> <b>fill<\/b> \u0438\u043b\u0438 <b>stroke <\/b>SVG, \u0442\u043e \u043e\u043d \u0431\u0435\u0440\u0435\u0442 \u0441\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u0437 \u0443\u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0446\u0432\u0435\u0442\u0430. \u042d\u0442\u043e \u0442\u0430\u043a\u0436\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0434\u043b\u044f <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/SVG\/Element\/use\">&lt;svg&gt; &lt;use href = &quot;\u2026&quot;&gt; &lt;\/svg&gt;<\/a>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0443 \u0432\u0430\u0441 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b, \u0430 currentColor \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f inline \u0438\u043b\u0438 <b>&lt;use href = &quot;\u2026&quot;&gt;<\/b> SVG, \u043d\u043e \u043d\u0435 \u0434\u043b\u044f SVG, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u044e\u0442\u0441\u044f \u043a\u0430\u043a src \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438\u043b\u0438 \u0447\u0435\u0440\u0435\u0437 CSS. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 <a href=\"https:\/\/glitch.com\/~dark-mode-currentcolor\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<pre><code class=\"html\">&lt;!-- Some inline SVG --&gt; &lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;     stroke=&quot;currentColor&quot; &gt;   [\u2026] &lt;\/svg&gt;<\/code><\/pre>\n<p>  <\/p>\n<h3>\u041f\u043b\u0430\u0432\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b \u043c\u0435\u0436\u0434\u0443 \u0440\u0435\u0436\u0438\u043c\u0430\u043c\u0438<\/h3>\n<p>  \u041f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0438\u0437 \u0442\u0435\u043c\u043d\u043e\u0433\u043e \u0440\u0435\u0436\u0438\u043c\u0430 \u0432 \u0441\u0432\u0435\u0442\u043b\u044b\u0439 \u0438\u043b\u0438 \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0441\u0433\u043b\u0430\u0436\u0435\u043d\u043e \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0442\u043e\u043c\u0443 \u0444\u0430\u043a\u0442\u0443, \u0447\u0442\u043e \u0446\u0432\u0435\u0442, \u0438 \u0431\u044d\u043a\u0433\u0440\u0430\u0443\u043d\u0434 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f <a href=\"https:\/\/www.quackit.com\/css\/css3\/animations\/animatable_properties\/\">\u0430\u043d\u0438\u043c\u0438\u0440\u0443\u0435\u043c\u044b\u043c\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 CSS<\/a>. \u0421\u043e\u0437\u0434\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0442\u0430\u043a \u0436\u0435 \u043f\u0440\u043e\u0441\u0442\u043e, \u043a\u0430\u043a \u043e\u0431\u044a\u044f\u0432\u0438\u0442\u044c \u0434\u0432\u0430 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u0434\u043b\u044f \u0434\u0432\u0443\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432. <a href=\"https:\/\/dark-mode-baseline.glitch.me\/\">\u041f\u0440\u0438\u043c\u0435\u0440<\/a> \u043d\u0438\u0436\u0435 \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442 \u043e\u0431\u0449\u0443\u044e \u0438\u0434\u0435\u044e.<\/p>\n<pre><code class=\"css\">body {   --duration: 0.5s;    --timing: ease;   color: var(--color);   background-color: var(--background-color);   transition:     color var(--duration) var(--timing),     background-color var(--duration) var(--timing); }<\/code><\/pre>\n<p>  <\/p>\n<h3>\u0425\u0443\u0434\u043e\u0436\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435 \u0441 \u0442\u0435\u043c\u043d\u044b\u043c \u0440\u0435\u0436\u0438\u043c\u043e\u043c<\/h3>\n<p>  \u0425\u043e\u0442\u044f \u0438\u0437 \u0441\u043e\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0432 \u0446\u0435\u043b\u043e\u043c \u044f \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441 prefers-color-scheme \u0432 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0435 media \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432  (\u0430 \u043d\u0435 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u043c \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u0442\u0438\u043b\u0435\u0439), \u0435\u0441\u0442\u044c \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438, \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u0430\u0445\u043e\u0442\u0435\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 prefers-color- scheme \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u043c \u0432 \u0432\u0430\u0448 HTML-\u043a\u043e\u0434. \u0425\u0443\u0434\u043e\u0436\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435 \u2014 \u044d\u0442\u043e \u043a\u0430\u043a \u0440\u0430\u0437 \u0442\u0430\u043a\u0430\u044f \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f. \u0425\u0443\u0434\u043e\u0436\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435 \u2014 \u043e\u0431\u0449\u0435\u0435 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b: \u043a\u0430\u043a \u0441\u0430\u0439\u0442 \u0432\u043e\u0437\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0435\u0442 \u043d\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u043a\u0430\u043a\u0438\u0435 \u0447\u0443\u0432\u0441\u0442\u0432\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442.<\/p>\n<p>  \u0412 \u0442\u0435\u043c\u043d\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440 \u0434\u043e\u043b\u0436\u0435\u043d \u0440\u0435\u0448\u0438\u0442\u044c, \u043a\u0430\u043a\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0438 \u0431\u0443\u0434\u0435\u0442 \u043b\u0438 <a href=\"https:\/\/web.dev\/prefers-color-scheme\/#photographic-images\">\u043f\u0435\u0440\u0435\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u043d\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439<\/a> \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u043c. \u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 &lt;picture&gt; &lt;source&gt; \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u043c \u043e\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 media. \u0412 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u043c \u043d\u0438\u0436\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u044f \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u0437\u0430\u043f\u0430\u0434\u043d\u043e\u0435 \u043f\u043e\u043b\u0443\u0448\u0430\u0440\u0438\u0435 \u0434\u043b\u044f \u0442\u0435\u043c\u043d\u043e\u0433\u043e \u0440\u0435\u0436\u0438\u043c\u0430 \u0438 \u0432\u043e\u0441\u0442\u043e\u0447\u043d\u043e\u0435 \u043f\u043e\u043b\u0443\u0448\u0430\u0440\u0438\u0435 \u0434\u043b\u044f \u0441\u0432\u0435\u0442\u043b\u043e\u0433\u043e \u0440\u0435\u0436\u0438\u043c\u0430 \u0438\u043b\u0438, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043d\u0435 \u0437\u0430\u0434\u0430\u043d\u044b, \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043a\u0430\u043a \u0434\u043b\u044f \u0432\u043e\u0441\u0442\u043e\u0447\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u0443\u0448\u0430\u0440\u0438\u044f \u0432 \u043b\u044e\u0431\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435. \u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0438\u0440\u0443\u044e\u0442 <a href=\"https:\/\/glitch.com\/~dark-mode-picture\">\u043c\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/a>. \u0412\u043a\u043b\u044e\u0447\u0438\u0442\u0435 \u0442\u0435\u043c\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c \u043d\u0430 \u0441\u0432\u043e\u0435\u043c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0435, \u0447\u0442\u043e\u0431\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0440\u0430\u0437\u043d\u0438\u0446\u0443.<\/p>\n<pre><code class=\"html\">&lt;picture&gt;   &lt;source srcset=&quot;western.webp&quot; media=&quot;(prefers-color-scheme: dark)&quot;&gt;   &lt;source srcset=&quot;eastern.webp&quot; media=&quot;(prefers-color-scheme: light), (prefers-color-scheme: no-preference)&quot;&gt;   &lt;img src=&quot;eastern.webp&quot;&gt; &lt;\/picture&gt;<\/code><\/pre>\n<p>  <\/p>\n<h3>\u0422\u0435\u043c\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c \u0441 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f<\/h3>\n<p>  \u041a\u0430\u043a \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043b\u043e\u0441\u044c \u0432\u044b\u0448\u0435, \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0432\u044b\u0431\u0438\u0440\u0430\u044e\u0442 Dark Mode \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0441\u0432\u043e\u0438\u0445 \u0432\u043a\u0443\u0441\u043e\u0432 \u0438 \u044d\u0441\u0442\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0435\u043d\u0438\u0439. \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u0432\u0438\u0434\u0435\u0442\u044c UI \u0441\u0432\u043e\u0435\u0439 \u041e\u0421 \u0442\u0435\u043c\u043d\u044b\u043c, \u0430 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0442\u0430\u043a, \u043a\u0430\u043a \u043e\u043d\u0438 \u043f\u0440\u0438\u0432\u044b\u043a\u043b\u0438. \u041f\u043b\u0430\u043d \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439: \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u043e\u0436\u0434\u0430\u0442\u044c\u0441\u044f \u0441\u0438\u0433\u043d\u0430\u043b\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0447\u0435\u0440\u0435\u0437 prefers-color-scheme, \u0430 \u0437\u0430\u0442\u0435\u043c \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c, \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u0445\u043e\u0442\u044f\u0442, \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u044b.<\/p>\n<h3>\u041a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 &lt;dark-mode-toggle&gt;<\/h3>\n<p>  \u0412\u044b, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u0434 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e, \u043d\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 (\u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u0441\u043e\u0437\u0434\u0430\u043b \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0434\u043b\u044f \u044d\u0442\u043e\u0439 \u0446\u0435\u043b\u0438. \u041e\u043d \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f <a href=\"https:\/\/github.com\/GoogleChromeLabs\/dark-mode-toggle\">&lt;dark-mode-toggle&gt;<\/a> \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0430 \u0432\u0430\u0448\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u0435\u043b\u044c (\u0442\u0435\u043c\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c: \u0432\u043a\u043b \/ \u0432\u044b\u043a\u043b) \u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u0435\u043b\u044c \u0442\u0435\u043c (\u0442\u0435\u043c\u0430: \u0441\u0432\u0435\u0442\u043b\u044b\u0439 \/ \u0442\u0435\u043c\u043d\u044b\u0439), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c. \u0414\u0435\u043c\u043e \u043d\u0438\u0436\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438 (\u043e, \u0438 \u044f \u043d\u0435\u0437\u0430\u043c\u0435\u0442\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0435\u0433\u043e \u0432\u043e \u0432\u0441\u0435\u0445 <a href=\"https:\/\/dark-mode-baseline.glitch.me\/\">\u0434\u0440\u0443\u0433\u0438\u0445<\/a> <a href=\"https:\/\/dark-mode-currentcolor.glitch.me\/\">\u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445<\/a> <a href=\"https:\/\/dark-mode-picture.glitch.me\/\">\u0432\u044b\u0448\u0435<\/a>).<\/p>\n<pre><code class=\"html\">&lt;dark-mode-toggle     legend=&quot;Theme Switcher&quot;     appearance=&quot;switch&quot;     dark=&quot;Dark&quot;     light=&quot;Light&quot;     remember=&quot;Remember this&quot; &gt;&lt;\/dark-mode-toggle&gt;<\/code><\/pre>\n<p>  &lt;dark-mode-toggle&gt; \u0432 \u0441\u0432\u0435\u0442\u043b\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/u-\/hy\/np\/u-hynpp7pkggfneg4p0vvjq9wzi.png\"><\/p>\n<p>  &lt;dark-mode-toggle&gt; \u0432 \u0442\u0435\u043c\u043d\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/z2\/fj\/kw\/z2fjkwva2rhir_jzbid5p121th4.png\"><\/p>\n<p>  \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u0449\u0435\u043b\u043a\u043d\u0443\u0442\u044c \u0438\u043b\u0438 \u043a\u043e\u0441\u043d\u0443\u0442\u044c\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0442\u0435\u043c\u043d\u044b\u043c \u0440\u0435\u0436\u0438\u043c\u043e\u043c \u0432 \u0432\u0435\u0440\u0445\u043d\u0435\u043c \u043f\u0440\u0430\u0432\u043e\u043c \u0443\u0433\u043b\u0443 \u0432 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u043d\u0438\u0436\u0435. \u0415\u0441\u043b\u0438 \u0432\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 \u0444\u043b\u0430\u0436\u043a\u0438 \u0432 \u0442\u0440\u0435\u0442\u044c\u0435\u043c \u0438 \u0447\u0435\u0442\u0432\u0435\u0440\u0442\u043e\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0445 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435, \u043a\u0430\u043a \u0432\u0430\u0448 \u0432\u044b\u0431\u043e\u0440 \u0440\u0435\u0436\u0438\u043c\u0430 \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0434\u0430\u0436\u0435 \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u0430\u0448\u0438\u043c \u043f\u043e\u0441\u0435\u0442\u0438\u0442\u0435\u043b\u044f\u043c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u044e \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u0443\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0432 \u0442\u0435\u043c\u043d\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435, \u043d\u043e \u043d\u0430\u0441\u043b\u0430\u0436\u0434\u0430\u0442\u044c\u0441\u044f \u0432\u0430\u0448\u0438\u043c \u0441\u0430\u0439\u0442\u043e\u043c \u0432 \u0441\u0432\u0435\u0442\u043b\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435 \u0438\u043b\u0438 \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442.<\/p>\n<h3>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h3>\n<p>  \u0420\u0430\u0431\u043e\u0442\u0430 \u0441 \u0442\u0435\u043c\u043d\u044b\u043c \u0440\u0435\u0436\u0438\u043c\u043e\u043c \u0438 \u0435\u0433\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u2014 \u044d\u0442\u043e \u0432\u0435\u0441\u0435\u043b\u043e! \u041e\u0442\u043a\u0440\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u0434\u0438\u0437\u0430\u0439\u043d\u0430. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u044b\u0431\u043e\u0440\u0430 \u0442\u0435\u043c\u043d\u043e\u0433\u043e \u0440\u0435\u0436\u0438\u043c\u0430 \u043c\u043e\u0436\u0435\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0441\u0447\u0430\u0441\u0442\u043b\u0438\u0432\u044b\u043c. \u0414\u0430, \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u044e\u0442\u0441\u044f \u043f\u043e\u0434\u0432\u043e\u0434\u043d\u044b\u0435 \u043a\u0430\u043c\u043d\u0438, \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0442\u0449\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u043d\u043e \u0442\u0435\u043c\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c \u2014 \u043e\u0442\u043b\u0438\u0447\u043d\u0430\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0437\u0430\u0431\u043e\u0442\u0443 \u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u0445. \u041b\u0443\u0447\u0448\u0438\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438, \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044b\u0435 \u0432 \u0441\u0442\u0430\u0442\u044c\u0435, \u0438 \u0442\u0430\u043a\u043e\u0439 \u043b\u0430\u0439\u0444\u0445\u0430\u043a, \u043a\u0430\u043a \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <a href=\"https:\/\/github.com\/GoogleChromeLabs\/dark-mode-toggle\">&lt;dark-mode-toggle&gt;<\/a>, \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u043e\u043c\u043e\u0447\u044c \u0432\u0430\u043c \u0432 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043f\u043e\u0442\u0440\u044f\u0441\u0430\u044e\u0449\u0435\u0433\u043e \u0442\u0435\u043c\u043d\u043e\u0433\u043e \u0440\u0435\u0436\u0438\u043c\u0430. <\/p>\n<h3>\u041f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0441\u0441\u044b\u043b\u043a\u0438 <\/h3>\n<p>  <b>\u041c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441 <b>prefers-color-scheme<\/b><\/b>:<\/p>\n<ul>\n<li><a href=\"https:\/\/chromestatus.com\/feature\/5109758977638400\">Chrome Platform Status page<\/a><\/li>\n<li><a href=\"https:\/\/crbug.com\/889087\">Chromium bug<\/a><\/li>\n<li><a href=\"https:\/\/drafts.csswg.org\/mediaqueries-5\/#prefers-color-scheme\">Media Queries Level 5 spec<\/a><\/li>\n<\/ul>\n<p>  <b>\u041c\u0435\u0442\u0430-\u0442\u0435\u0433 <b>color-scheme<\/b><\/b>:<\/p>\n<ul>\n<li><a href=\"https:\/\/chromestatus.com\/feature\/5330651267989504\">Chrome Platform Status page<\/a><\/li>\n<li><a href=\"http:\/\/crbug.com\/925935\">Chromium bug<\/a><\/li>\n<li><a href=\"https:\/\/drafts.csswg.org\/css-color-adjust-1\/\">CSS Color Adjustment Module Level 1 spec<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/w3c\/csswg-drafts\/issues\/3299\">CSS WG GitHub Issue for the meta tag and the CSS property<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/whatwg\/html\/issues\/4504\">HTML WHATWG GitHub Issue for the meta tag<\/a><\/li>\n<\/ul>\n<p>  <b>\u0421\u0441\u044b\u043b\u043a\u0438 \u043e dark mode:<\/b><\/p>\n<ul>\n<li><a href=\"https:\/\/material.io\/design\/color\/dark-theme.html\">Material Design \u2014 Dark Theme<\/a><\/li>\n<li><a href=\"https:\/\/webkit.org\/blog\/8892\/dark-mode-in-web-inspector\/\">Dark Mode in Web Inspector<\/a><\/li>\n<li><a href=\"https:\/\/webkit.org\/blog\/8840\/dark-mode-support-in-webkit\/\">Dark Mode Support in WebKit<\/a><\/li>\n<li><a href=\"https:\/\/developer.apple.com\/design\/human-interface-guidelines\/macos\/visual-design\/dark-mode\/\">Apple Human Interface Guidelines \u2014 Dark Mode<\/a><\/li>\n<\/ul>\n<p>  <b>\u0418\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f:<\/b><\/p>\n<ul>\n<li><a href=\"https:\/\/medium.com\/dev-channel\/what-does-dark-modes-supported-color-schemes-actually-do-69c2eacdfa1d\">What Does Dark Mode\u2019s \u201csupported-color-schemes\u201d Actually Do?<\/a> <\/li>\n<li><a href=\"https:\/\/medium.com\/dev-channel\/let-there-be-darkness-maybe-9facd9c3023d\">Let there be darkness! Maybe\u2026<\/a><\/li>\n<li><a href=\"https:\/\/medium.com\/dev-channel\/re-colorization-for-dark-mode-19e2e17b584b\">Re-Colorization for Dark Mode<\/a><\/li>\n<\/ul>\n<\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/company\/timeweb\/blog\/523478\/\"> https:\/\/habr.com\/ru\/company\/timeweb\/blog\/523478\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/company\/timeweb\/blog\/523478\/\">\n<blockquote><p><b>Dark mode<\/b> \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0442\u0435\u043d\u0434\u0435\u043d\u0446\u0438\u0435\u0439 \u0432 \u0434\u0438\u0437\u0430\u0439\u043d\u0435 \u0441\u0430\u0439\u0442\u043e\u0432 \u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u041c\u044b \u043d\u0430\u0448\u043b\u0438 \u043a\u043b\u0430\u0441\u0441\u043d\u0443\u044e <a href=\"https:\/\/medium.com\/dev-channel\/hello-darkness-my-old-friend-48a97ab4379a\">\u0441\u0442\u0430\u0442\u044c\u044e<\/a> \u043d\u0430 \u044d\u0442\u0443 \u0442\u0435\u043c\u0443 \u0438 \u0440\u0435\u0448\u0438\u043b\u0438 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u043e\u043c. \u041c\u043d\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439, \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 dark mode, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0434\u0430\u043b\u0435\u0435 \u0432 \u0441\u0442\u0430\u0442\u044c\u0435. \u0410 \u043d\u0430 \u043a\u0430\u043a\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0432\u044b?<\/p><\/blockquote>\n<p>  \u041f\u0440\u043e\u0441\u0442\u043e \u0445\u0430\u0439\u043f \u0438\u043b\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c? \u0423\u0437\u043d\u0430\u0439\u0442\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u043e \u0442\u0435\u043c\u043d\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435. \u042f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443, \u043a\u0430\u043a \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 dark mode \u043d\u0430 \u0431\u043b\u0430\u0433\u043e \u0432\u0430\u0448\u0438\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439!<\/p>\n<h3>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h3>\n<p>  \u041f\u043e \u0434\u0430\u043d\u043d\u043e\u0439 \u0442\u0435\u043c\u0435 \u044f \u043f\u0440\u043e\u0432\u0435\u043b \u043e\u0431\u044a\u0435\u043c\u043d\u043e\u0435 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435, \u0438\u0437\u0443\u0447\u0438\u043b \u0438\u0441\u0442\u043e\u0440\u0438\u044e \u0432\u043e\u043f\u0440\u043e\u0441\u0430. \u0415\u0441\u043b\u0438 \u0432\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 \u0442\u0435\u043c\u043d\u044b\u043c \u0440\u0435\u0436\u0438\u043c\u043e\u043c, \u0441\u043c\u0435\u043b\u043e \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u0430\u0439\u0442\u0435 \u043f\u0435\u0440\u0432\u044b\u0439 \u0440\u0430\u0437\u0434\u0435\u043b.  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-311473","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/311473","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=311473"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/311473\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=311473"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=311473"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=311473"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}