Колірна схема «світле на темному» — також називається чорним режимом, темним режимом, темною темою, нічним режимом або режимом вимкнення світла — це колірна схема, яка використовує світлий текст, піктограми та елементи графічного інтерфейсу користувача на темному фоні. Його часто обговорюють з погляду дизайну інтерфейсу користувача комп'ютера та веб-дизайну. Багато сучасних веб-сайтів і операційних систем пропонують користувачеві додатковий режим відображення світлого на темному.
Деякі користувачі вважають дисплеї в темному режимі більш привабливими та стверджують, що вони можуть зменшити напруження очей. Відображення білого на повній яскравості споживає приблизно в шість разів більше енергії, ніж чистий чорний на Google Pixel 2016 року, який має OLED-дисплей. Однак звичайні світлодіодні дисплеї не можуть виграти від зниженого енергоспоживання. Більшість сучасних операційних систем підтримують темну тему.
Історія
Попередники сучасних комп’ютерних екранів, такі як електронно-променеві трубки, осцилографи тощо, мали тенденцію будувати графіки та виводити вміст у вигляді яскравих символів на чорному тлі.
З появою комп’ютерних екранів інтерфейси користувача спочатку були сформовані на кінескопах, подібних до тих, що використовуються для осцилографів. Зазвичай люмінофор був дуже темного кольору і яскраво світився, коли на нього потрапляв електронний промінь, виглядаючи білим, зеленим, синім або бурштиновим на чорному фоні, залежно від люмінофора, нанесеного на монохромний екран. Екрани RGB продовжували працювати так само, використовуючи всі промені, встановлені в положення «увімкнено», для формування білого кольору.
З появою телетексту було проведено дослідження, які основні та додаткові кольори та комбінації краще підходять для цього нового носія. Блакитний або жовтий на чорному зазвичай вважаються оптимальними з палітри чорного, червоного, зеленого, жовтого, синього, пурпурового, блакитного та білого.
Контрастний набір кольорів, колірна схема темне на світлому, спочатку була представлена в текстових процесорах WYSIWYG для імітації чорнила на папері та стала нормою.
У 2018 році Apple випустила macOS 10.14. У вересні 2019 року в iOS 13 і Android 10 з’явилися темні режими.
Firefox і Chromium мають додаткову темну тему. Також сторонні розробники можуть реалізувати власні темні теми.
У 2019 році була створена опція «бажана колірна схема» для зовнішніх веб-розробників, котра є властивістю CSS, яка сигналізує про вибір користувача для своєї системи використовувати світлу або темну колірну тему.
Споживання енергії
Світло на темних колірних схемах вимагає менше енергії для відображення на OLED -дисплеях. Це позитивно впливає на термін служби акумулятора та енергоспоживання.
У той час як OLED споживає приблизно 40% енергії РК-дисплея, відображаючи зображення, яке переважно є чорним, він може використовувати більш ніж у три рази більше енергії для відображення зображення з білим фоном, наприклад документа або веб-сайту. Це може призвести до скорочення терміну служби акумулятора та споживання енергії, якщо не використовується темна тема. Тривале зниження енергоспоживання також може подовжити термін служби батареї або термін служби дисплея й батареї.
Енергозбереження, якого можна досягти за допомогою темної теми, пояснюється тим, як працюють екрани OLED: на екрані OLED кожен субпіксель генерує власне світло, і він споживає енергію лише під час генерування світла. Це відрізняється від того, як працює РК-дисплей: у РК-дисплеї субпікселі або блокують, або пропускають світло від постійно ввімкненого (освітленого) світлодіодного підсвічування .
Схеми кольорів «AMOLED Black» (у яких використовується чистий чорний замість темно-сірого) не обов’язково економлять більше енергії, ніж інші схеми кольорів «темна тема», у яких використовується темно-сірий замість чорного, оскільки споживання електроенергії на екрані AMOLED зменшується пропорційно середній яскравості відображуваних пікселів. Хоча це правда, що на AMOLED чорний економить більше енергії, ніж темно-сірий, додаткова економія енергії часто незначна; Чорний AMOLED забезпечить лише додаткову економію енергії менше ніж на 1%, наприклад, порівняно з темно-сірим, який використовується в темній темі для офіційних програм Google для Android. У листопаді 2018 року Google підтвердив, що темний режим на Android економить заряд батареї.
Проблеми з Інтернетом
Дехто стверджує, що колірну схему зі світлим текстом на темному тлі легше читати на екрані, оскільки нижча загальна яскравість спричиняє меншому стомленню очей. Інші стверджують протилежне. Застереження полягає в тому, що більшість сторінок в Інтернеті створено для білого фону; Зображення GIF і PNG з бітами прозорості замість альфа-каналів мають тенденцію відображатися з нечіткими контурами, а також спричиняти проблеми з іншими графічними елементами.
У CSS є медіа-функція prefers-color-scheme
, щоб визначити, чи вибрав користувач світлу чи темну колірну схему, і надати запитану колірну схему. Її можна вказати у налаштуванні операційної системи користувача або агенті користувача .
Приклад CSS:
@media (prefers-color-scheme: dark) { body { color: #ccc; background: #222; } }
JavaScript example:
if (window.matchMedia('(prefers-color-scheme: dark)').matches) { dark(); }
Дивитися також
- AMOLED
- Blackle
- Night Shift (ПЗ)
- OLED
- Solarized (колірна тема)
Список літератури
- Dark mode is easier on your eyes and battery. 21 листопада 2018.
- Emily Price (11 листопада 2018). Use Dark Mode to Conserve Your Phone's Battery Power. . Процитовано 20 березня 2021.
- Eisfeld, Henriette; Kristallovich, Felix (2020). The Rise of Dark Mode : A qualitative study of an emerging user interface design trend.
- David Murphy. Embrace Evil by Enabling Dark Mode in Every App. . Процитовано 15 листопада 2020.
- Petterson, Rune (March 1985). Use of Colors in Teletext and Videotex. ResearchGate.
{{}}
: Обслуговування CS1: Сторінки з параметром url-status, але без параметра archive-url () - macOS Mojave: Dark Mode, Stacks, & More. MacRumors (англ.). Процитовано 8 серпня 2022.
- How to Enable Dark Mode in iOS 13. MacRumors (англ.). Процитовано 8 серпня 2022.
- Here's how to enable the Android 10 dark theme mode. Android Authority (англ.). 3 вересня 2019. Процитовано 8 серпня 2022.
- Porter, Jon (3 червня 2019). Dark mode is coming to iOS 13. The Verge. Процитовано 5 червня 2019.
- prefers-color-scheme - CSS: Cascading Style Sheets | MDN. MDN Web Docs. Процитовано 18 березня 2021.
{{}}
: Обслуговування CS1: Сторінки з параметром url-status, але без параметра archive-url () - Gottsegen, Gordon. Using Android's dark mode improves battery life, Google confirms. CNET.
- Raga, Dylan (27 червня 2019). No, "AMOLED Black" Does NOT Save More Battery Than Dark Gray. XDA.
- Welch, Chris (2 листопада 2018). Google confirms dark mode is a huge help for battery life on Android. The Verge.
- Love dark mode? Here’s why you may still want to avoid it. Android Authority. 29 червня 2020. Процитовано 12 вересня 2020.
- Clarke, Laurie (30 липня 2019). Dark mode isn't as good for your eyes as you believe. Wired UK. ISSN 1357-0978. Процитовано 12 вересня 2020.
- Budiu, Raluca (2 лютого 2020). Dark Mode vs. Light Mode: Which Is Better?. nngroup.com.
- Walsh, David (28 січня 2019). prefers-color-scheme: CSS Media Query. David Walsh Blog. Процитовано 18 березня 2021.
- Window.matchMedia() - Web APIs | MDN. developer.mozilla.org. Процитовано 18 березня 2021.
The Window interface's matchMedia() method returns a new MediaQueryList object that can then be used to determine if the document matches the media query string, as well as to monitor the document to detect when it matches (or stops matching) that media query
{{}}
: Обслуговування CS1: Сторінки з параметром url-status, але без параметра archive-url ()
Вікіпедія, Українська, Україна, книга, книги, бібліотека, стаття, читати, завантажити, безкоштовно, безкоштовно завантажити, mp3, відео, mp4, 3gp, jpg, jpeg, gif, png, малюнок, музика, пісня, фільм, книга, гра, ігри, мобільний, телефон, android, ios, apple, мобільний телефон, samsung, iphone, xiomi, xiaomi, redmi, honor, oppo, nokia, sonya, mi, ПК, web, Інтернет
Kolirna shema svitle na temnomu takozh nazivayetsya chornim rezhimom temnim rezhimom temnoyu temoyu nichnim rezhimom abo rezhimom vimknennya svitla ce kolirna shema yaka vikoristovuye svitlij tekst piktogrami ta elementi grafichnogo interfejsu koristuvacha na temnomu foni Jogo chasto obgovoryuyut z poglyadu dizajnu interfejsu koristuvacha komp yutera ta veb dizajnu Bagato suchasnih veb sajtiv i operacijnih sistem proponuyut koristuvachevi dodatkovij rezhim vidobrazhennya svitlogo na temnomu Temna tema dlya GNOME Versiyi veb sajtu v zvichajnomu rezhimi livoruch i temnomu rezhimi pravoruch Deyaki koristuvachi vvazhayut displeyi v temnomu rezhimi bilsh privablivimi ta stverdzhuyut sho voni mozhut zmenshiti napruzhennya ochej Vidobrazhennya bilogo na povnij yaskravosti spozhivaye priblizno v shist raziv bilshe energiyi nizh chistij chornij na Google Pixel 2016 roku yakij maye OLED displej Odnak zvichajni svitlodiodni displeyi ne mozhut vigrati vid znizhenogo energospozhivannya Bilshist suchasnih operacijnih sistem pidtrimuyut temnu temu IstoriyaVideogra Zork pracyuye na zeleno chornomu EPT displeyi Poperedniki suchasnih komp yuternih ekraniv taki yak elektronno promenevi trubki oscilografi tosho mali tendenciyu buduvati grafiki ta vivoditi vmist u viglyadi yaskravih simvoliv na chornomu tli Z poyavoyu komp yuternih ekraniv interfejsi koristuvacha spochatku buli sformovani na kineskopah podibnih do tih sho vikoristovuyutsya dlya oscilografiv Zazvichaj lyuminofor buv duzhe temnogo koloru i yaskravo svitivsya koli na nogo potraplyav elektronnij promin viglyadayuchi bilim zelenim sinim abo burshtinovim na chornomu foni zalezhno vid lyuminofora nanesenogo na monohromnij ekran Ekrani RGB prodovzhuvali pracyuvati tak samo vikoristovuyuchi vsi promeni vstanovleni v polozhennya uvimkneno dlya formuvannya bilogo koloru Z poyavoyu teletekstu bulo provedeno doslidzhennya yaki osnovni ta dodatkovi kolori ta kombinaciyi krashe pidhodyat dlya cogo novogo nosiya Blakitnij abo zhovtij na chornomu zazvichaj vvazhayutsya optimalnimi z palitri chornogo chervonogo zelenogo zhovtogo sinogo purpurovogo blakitnogo ta bilogo Kontrastnij nabir koloriv kolirna shema temne na svitlomu spochatku bula predstavlena v tekstovih procesorah WYSIWYG dlya imitaciyi chornila na paperi ta stala normoyu U 2018 roci Apple vipustila macOS 10 14 U veresni 2019 roku v iOS 13 i Android 10 z yavilisya temni rezhimi Firefox i Chromium mayut dodatkovu temnu temu Takozh storonni rozrobniki mozhut realizuvati vlasni temni temi U 2019 roci bula stvorena opciya bazhana kolirna shema dlya zovnishnih veb rozrobnikiv kotra ye vlastivistyu CSS yaka signalizuye pro vibir koristuvacha dlya svoyeyi sistemi vikoristovuvati svitlu abo temnu kolirnu temu Spozhivannya energiyiSvitlo na temnih kolirnih shemah vimagaye menshe energiyi dlya vidobrazhennya na OLED displeyah Ce pozitivno vplivaye na termin sluzhbi akumulyatora ta energospozhivannya U toj chas yak OLED spozhivaye priblizno 40 energiyi RK displeya vidobrazhayuchi zobrazhennya yake perevazhno ye chornim vin mozhe vikoristovuvati bilsh nizh u tri razi bilshe energiyi dlya vidobrazhennya zobrazhennya z bilim fonom napriklad dokumenta abo veb sajtu Ce mozhe prizvesti do skorochennya terminu sluzhbi akumulyatora ta spozhivannya energiyi yaksho ne vikoristovuyetsya temna tema Trivale znizhennya energospozhivannya takozh mozhe podovzhiti termin sluzhbi batareyi abo termin sluzhbi displeya j batareyi Energozberezhennya yakogo mozhna dosyagti za dopomogoyu temnoyi temi poyasnyuyetsya tim yak pracyuyut ekrani OLED na ekrani OLED kozhen subpiksel generuye vlasne svitlo i vin spozhivaye energiyu lishe pid chas generuvannya svitla Ce vidriznyayetsya vid togo yak pracyuye RK displej u RK displeyi subpikseli abo blokuyut abo propuskayut svitlo vid postijno vvimknenogo osvitlenogo svitlodiodnogo pidsvichuvannya Shemi koloriv AMOLED Black u yakih vikoristovuyetsya chistij chornij zamist temno sirogo ne obov yazkovo ekonomlyat bilshe energiyi nizh inshi shemi koloriv temna tema u yakih vikoristovuyetsya temno sirij zamist chornogo oskilki spozhivannya elektroenergiyi na ekrani AMOLED zmenshuyetsya proporcijno serednij yaskravosti vidobrazhuvanih pikseliv Hocha ce pravda sho na AMOLED chornij ekonomit bilshe energiyi nizh temno sirij dodatkova ekonomiya energiyi chasto neznachna Chornij AMOLED zabezpechit lishe dodatkovu ekonomiyu energiyi menshe nizh na 1 napriklad porivnyano z temno sirim yakij vikoristovuyetsya v temnij temi dlya oficijnih program Google dlya Android U listopadi 2018 roku Google pidtverdiv sho temnij rezhim na Android ekonomit zaryad batareyi Problemi z InternetomDehto stverdzhuye sho kolirnu shemu zi svitlim tekstom na temnomu tli legshe chitati na ekrani oskilki nizhcha zagalna yaskravist sprichinyaye menshomu stomlennyu ochej Inshi stverdzhuyut protilezhne Zasterezhennya polyagaye v tomu sho bilshist storinok v Interneti stvoreno dlya bilogo fonu Zobrazhennya GIF i PNG z bitami prozorosti zamist alfa kanaliv mayut tendenciyu vidobrazhatisya z nechitkimi konturami a takozh sprichinyati problemi z inshimi grafichnimi elementami U CSS ye media funkciya prefers color scheme shob viznachiti chi vibrav koristuvach svitlu chi temnu kolirnu shemu i nadati zapitanu kolirnu shemu Yiyi mozhna vkazati u nalashtuvanni operacijnoyi sistemi koristuvacha abo agenti koristuvacha Priklad CSS media prefers color scheme dark body color ccc background 222 JavaScript example if window matchMedia prefers color scheme dark matches dark Divitisya takozhAMOLED Blackle Night Shift PZ OLED Solarized kolirna tema Spisok literaturiDark mode is easier on your eyes and battery 21 listopada 2018 Emily Price 11 listopada 2018 Use Dark Mode to Conserve Your Phone s Battery Power Procitovano 20 bereznya 2021 Eisfeld Henriette Kristallovich Felix 2020 The Rise of Dark Mode A qualitative study of an emerging user interface design trend David Murphy Embrace Evil by Enabling Dark Mode in Every App Procitovano 15 listopada 2020 Petterson Rune March 1985 Use of Colors in Teletext and Videotex ResearchGate a href wiki D0 A8 D0 B0 D0 B1 D0 BB D0 BE D0 BD Cite web title Shablon Cite web cite web a Obslugovuvannya CS1 Storinki z parametrom url status ale bez parametra archive url posilannya macOS Mojave Dark Mode Stacks amp More MacRumors angl Procitovano 8 serpnya 2022 How to Enable Dark Mode in iOS 13 MacRumors angl Procitovano 8 serpnya 2022 Here s how to enable the Android 10 dark theme mode Android Authority angl 3 veresnya 2019 Procitovano 8 serpnya 2022 Porter Jon 3 chervnya 2019 Dark mode is coming to iOS 13 The Verge Procitovano 5 chervnya 2019 prefers color scheme CSS Cascading Style Sheets MDN MDN Web Docs Procitovano 18 bereznya 2021 a href wiki D0 A8 D0 B0 D0 B1 D0 BB D0 BE D0 BD Cite web title Shablon Cite web cite web a Obslugovuvannya CS1 Storinki z parametrom url status ale bez parametra archive url posilannya Gottsegen Gordon Using Android s dark mode improves battery life Google confirms CNET Raga Dylan 27 chervnya 2019 No AMOLED Black Does NOT Save More Battery Than Dark Gray XDA Welch Chris 2 listopada 2018 Google confirms dark mode is a huge help for battery life on Android The Verge Love dark mode Here s why you may still want to avoid it Android Authority 29 chervnya 2020 Procitovano 12 veresnya 2020 Clarke Laurie 30 lipnya 2019 Dark mode isn t as good for your eyes as you believe Wired UK ISSN 1357 0978 Procitovano 12 veresnya 2020 Budiu Raluca 2 lyutogo 2020 Dark Mode vs Light Mode Which Is Better nngroup com Walsh David 28 sichnya 2019 prefers color scheme CSS Media Query David Walsh Blog Procitovano 18 bereznya 2021 Window matchMedia Web APIs MDN developer mozilla org Procitovano 18 bereznya 2021 The Window interface s matchMedia method returns a new MediaQueryList object that can then be used to determine if the document matches the media query string as well as to monitor the document to detect when it matches or stops matching that media query a href wiki D0 A8 D0 B0 D0 B1 D0 BB D0 BE D0 BD Cite web title Shablon Cite web cite web a Obslugovuvannya CS1 Storinki z parametrom url status ale bez parametra archive url posilannya