Tmavý režim

Tmavý režim ( dark theme , angl.  Dark Mode , „light-on-dark color scheme“ [1] ) v designu uživatelského rozhraní  je barevné schéma , které používá světlý text na tmavém pozadí.

Historie

Předchůdci moderních počítačových obrazovek, jako jsou katodové osciloskopy, se snažili vykreslit a prezentovat další obsah jako zářící stopy na černém pozadí.

Když byly počítače použity jako CRT displej , tmavý fosfor (pozadí) obrazovky jasně zářil, když na něj zasáhl elektronový paprsek; Obrazovky RGB fungovaly podobným způsobem: pro vytvoření bílé musely být všechny paprsky nastaveny na „zapnuto“.

Opačné barevné schéma bylo původně zavedeno později, v textových procesorech WYSIWYG , aby simulovalo inkoust na papíře.

Výhody

Výhody tmavého režimu jsou [2] :

Podpora

Tmavý režim je podporován mnoha moderními operačními systémy, včetně Windows (počínaje aktualizací Windows 10 Anniversary Update), macOS 10.14 , iOS 13 a Androidem 10 . Prohlížeče Firefox a Chromium lze nastavit do tmavého režimu.

Od roku 2019 má CSS vlastnost „prefers-color-scheme“, uživatelskou preferenci pro použití tmavého režimu [4] .

[5] [6]

Příklad

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

Příklad JavaScriptu : [7]

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

Poznámky

  1. ↑ Světlé a tmavé barevné schéma . jeho _ Získáno 2. května 2022. Archivováno z originálu dne 2. května 2022.
  2. ↑ Jak na to: Přepnutí do tmavého režimu v prohlížečích a poště . esputnik . Získáno 2. května 2022. Archivováno z originálu dne 16. května 2022.
  3. ↑ Používání tmavého režimu Androidu zlepšuje výdrž baterie, potvrzuje Google . cnet . Získáno 2. května 2022. Archivováno z originálu dne 25. února 2021.
  4. ↑ Režim Porter, Jon Dark přichází na iOS 13 . The Verge (3. června 2019). Získáno 5. června 2019. Archivováno z originálu dne 7. srpna 2019.
  5. ↑ prefers-color-scheme - CSS: kaskádové styly | MDN . Webové dokumenty MDN . Získáno 18. března 2021. Archivováno z originálu dne 18. března 2021.
  6. ↑ Walsh, David prefers-color-scheme: CSS Media Query . Blog Davida Walshe (28. ledna 2019). Získáno 18. března 2021. Archivováno z originálu dne 17. března 2021.
  7. ↑ Window.matchMedia() – Webová rozhraní API | MDN . developer.mozilla.org _ - "Metoda matchMedia() rozhraní okna vrací nový objekt MediaQueryList, který lze poté použít k určení, zda dokument odpovídá řetězci mediálního dotazu, a také ke sledování dokumentu, aby zjistil, kdy se shoduje (nebo přestane odpovídat) tomuto mediálnímu dotazu. ". Získáno 18. března 2021. Archivováno z originálu dne 17. března 2021.