Колірна схема «світле на темному» — також називається чорним режимом, темним режимом, темною темою, нічним режимом або режимом вимкнення світла — це колірна схема, яка використовує світлий текст, піктограми та елементи графічного інтерфейсу користувача на темному фоні. Його часто обговорюють з погляду дизайну інтерфейсу користувача комп'ютера та веб-дизайну. Багато сучасних веб-сайтів і операційних систем пропонують користувачеві додатковий режим відображення світлого на темному.

Деякі користувачі вважають дисплеї в темному режимі більш привабливими та стверджують, що вони можуть зменшити напруження очей.^[1] Відображення білого на повній яскравості споживає приблизно в шість разів більше енергії, ніж чистий чорний на Google Pixel 2016 року, який має OLED-дисплей.^[2] Однак звичайні світлодіодні дисплеї не можуть виграти від зниженого енергоспоживання.^[3] Більшість сучасних операційних систем підтримують темну тему.^[4]

Попередники сучасних комп'ютерних екранів, такі як електронно-променеві трубки, осцилографи тощо, мали тенденцію будувати графіки та виводити вміст у вигляді яскравих символів на чорному тлі.

З появою комп'ютерних екранів інтерфейси користувача спочатку були сформовані на кінескопах, подібних до тих, що використовуються для осцилографів. Зазвичай люмінофор був дуже темного кольору і яскраво світився, коли на нього потрапляв електронний промінь, виглядаючи білим, зеленим, синім або бурштиновим на чорному фоні, залежно від люмінофора, нанесеного на монохромний екран. Екрани RGB продовжували працювати так само, використовуючи всі промені, встановлені в положення «увімкнено», для формування білого кольору.

З появою телетексту було проведено дослідження, які основні та додаткові кольори та комбінації краще підходять для цього нового носія.^[5] Блакитний або жовтий на чорному зазвичай вважаються оптимальними з палітри чорного, червоного, зеленого, жовтого, синього, пурпурового, блакитного та білого.

Контрастний набір кольорів, колірна схема темне на світлому, спочатку була представлена в текстових процесорах WYSIWYG для імітації чорнила на папері та стала нормою.

У 2018 році Apple випустила macOS 10.14.^[6] У вересні 2019 року в iOS 13 і Android 10 з'явилися темні режими.^[7][8]

Firefox і Chromium мають додаткову темну тему. Також сторонні розробники можуть реалізувати власні темні теми.^[9]

У 2019 році була створена опція «бажана колірна схема» для зовнішніх веб-розробників, котра є властивістю CSS, яка сигналізує про вибір користувача для своєї системи використовувати світлу або темну колірну тему.^[10]

Світло на темних колірних схемах вимагає менше енергії для відображення на OLED -дисплеях. Це позитивно впливає на термін служби акумулятора та енергоспоживання.^[11]

У той час як OLED споживає приблизно 40 % енергії РК-дисплея, відображаючи зображення, яке переважно є чорним, він може використовувати більш ніж у три рази більше енергії для відображення зображення з білим фоном, наприклад документа або веб-сайту. Це може призвести до скорочення терміну служби акумулятора та споживання енергії, якщо не використовується темна тема. Тривале зниження енергоспоживання також може подовжити термін служби батареї або термін служби дисплея й батареї.

Енергозбереження, якого можна досягти за допомогою темної теми, пояснюється тим, як працюють екрани OLED: на екрані OLED кожен субпіксель генерує власне світло, і він споживає енергію лише під час генерування світла. Це відрізняється від того, як працює РК-дисплей: у РК-дисплеї субпікселі або блокують, або пропускають світло від постійно ввімкненого (освітленого) світлодіодного підсвічування .

Схеми кольорів «AMOLED Black» (у яких використовується чистий чорний замість темно-сірого) не обов'язково економлять більше енергії, ніж інші схеми кольорів «темна тема», у яких використовується темно-сірий замість чорного, оскільки споживання електроенергії на екрані AMOLED зменшується пропорційно середній яскравості відображуваних пікселів. Хоча це правда, що на AMOLED чорний економить більше енергії, ніж темно-сірий, додаткова економія енергії часто незначна; Чорний AMOLED забезпечить лише додаткову економію енергії менше ніж на 1 %, наприклад, порівняно з темно-сірим, який використовується в темній темі для офіційних програм Google для Android.^[12] У листопаді 2018 року Google підтвердив, що темний режим на Android економить заряд батареї.^[13]

Дехто стверджує, що колірну схему зі світлим текстом на темному тлі легше читати на екрані, оскільки нижча загальна яскравість спричиняє меншому стомленню очей. Інші^[14][15][16] стверджують протилежне. Застереження полягає в тому, що більшість сторінок в Інтернеті створено для білого фону; Зображення GIF і PNG з бітами прозорості замість альфа-каналів мають тенденцію відображатися з нечіткими контурами, а також спричиняти проблеми з іншими графічними елементами.

У CSS є медіа-функція prefers-color-scheme, щоб визначити, чи вибрав користувач світлу чи темну колірну схему, і надати запитану колірну схему. Її можна вказати у налаштуванні операційної системи користувача або агенті користувача .^[10][17]

Приклад CSS:

@media (prefers-color-scheme: dark) {
    body {
        color: #ccc;
        background: #222;
    }
}

JavaScript example:^[18]

if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    dark();
}

• AMOLED
• Blackle
• Night Shift (ПЗ)
• OLED
• Solarized (колірна тема)

1. ↑ Dark mode is easier on your eyes and battery. 21 листопада 2018.
2. ↑ Emily Price (11 листопада 2018). Use Dark Mode to Conserve Your Phone's Battery Power. Lifehacker. Процитовано 20 березня 2021.
3. ↑ Eisfeld, Henriette; Kristallovich, Felix (2020). The Rise of Dark Mode : A qualitative study of an emerging user interface design trend.
4. ↑ David Murphy. Embrace Evil by Enabling Dark Mode in Every App. Lifehacker. Процитовано 15 листопада 2020.
5. ↑ Petterson, Rune (March 1985). Use of Colors in Teletext and Videotex. ResearchGate.{{cite web}}: Обслуговування CS1: Сторінки з параметром url-status, але без параметра archive-url (посилання)
6. ↑ macOS Mojave: Dark Mode, Stacks, & More. MacRumors (англ.). Процитовано 8 серпня 2022.
7. ↑ How to Enable Dark Mode in iOS 13. MacRumors (англ.). Процитовано 8 серпня 2022.
8. ↑ Here's how to enable the Android 10 dark theme mode. Android Authority (англ.). 3 вересня 2019. Процитовано 8 серпня 2022.
9. ↑ Porter, Jon (3 червня 2019). Dark mode is coming to iOS 13. The Verge. Процитовано 5 червня 2019.
10. ↑ ^{а б} prefers-color-scheme - CSS: Cascading Style Sheets | MDN. MDN Web Docs. Процитовано 18 березня 2021.{{cite web}}: Обслуговування CS1: Сторінки з параметром url-status, але без параметра archive-url (посилання)
11. ↑ Gottsegen, Gordon. Using Android's dark mode improves battery life, Google confirms. CNET.
12. ↑ Raga, Dylan (27 червня 2019). No, "AMOLED Black" Does NOT Save More Battery Than Dark Gray. XDA.
13. ↑ Welch, Chris (2 листопада 2018). Google confirms dark mode is a huge help for battery life on Android. The Verge.
14. ↑ Love dark mode? Here’s why you may still want to avoid it. Android Authority. 29 червня 2020. Процитовано 12 вересня 2020.
15. ↑ Clarke, Laurie (30 липня 2019). Dark mode isn't as good for your eyes as you believe. Wired UK. ISSN 1357-0978. Процитовано 12 вересня 2020.
16. ↑ Budiu, Raluca (2 лютого 2020). Dark Mode vs. Light Mode: Which Is Better?. nngroup.com.
17. ↑ Walsh, David (28 січня 2019). prefers-color-scheme: CSS Media Query. David Walsh Blog. Процитовано 18 березня 2021.
18. ↑ 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{{cite web}}: Обслуговування CS1: Сторінки з параметром url-status, але без параметра archive-url (посилання)