Mørk tilstand

Dark mode ( mørkt tema , eng.  Dark Mode , "light-on-dark color scheme" [1] ) i brugergrænsefladedesign  er et farveskema , der bruger lys tekst på en mørk baggrund.

Historie

Forløberne for moderne computerskærme, såsom katodestråleoscilloskoper, søgte at tegne og præsentere andet indhold som glødende spor mod en sort baggrund.

Når computere blev brugt som en CRT -skærm , lyste skærmens mørke fosfor (baggrund) klart, når en elektronstråle ramte den; RGB-skærme fungerede på samme måde: For at producere hvid skulle alle stråler indstilles til "on".

Det modsatte farveskema blev oprindeligt introduceret senere, i WYSIWYG tekstbehandlingsprogrammer , for at simulere blæk på papir.

Fordele

Fordelene ved mørk tilstand er [2] :

Support

Dark Mode understøttes af mange moderne operativsystemer, herunder Windows (startende med Windows 10 Anniversary Update), macOS 10.14 , iOS 13 og Android 10 . Firefox- og Chromium - browsere kan indstilles til mørk tilstand.

Siden 2019 har CSS haft en egenskab "prefers-color-scheme", en brugerpræference for at bruge mørk tilstand [4] .

[5] [6]

Eksempel

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

JavaScript- eksempel : [7]

if ( vindue . matchMedia ( '(foretrækker-farveskema: mørk)' ). matcher ) { mørk (); }

Noter

  1. ↑ Lys-mørk farveskema . hans vores . Hentet 2. maj 2022. Arkiveret fra originalen 2. maj 2022.
  2. ↑ Sådan gør du: Skift til mørk tilstand i browsere og mail . esputnik . Hentet 2. maj 2022. Arkiveret fra originalen 16. maj 2022.
  3. ↑ Brug af Androids mørke tilstand forbedrer batterilevetiden, bekræfter Google . cnet . Hentet 2. maj 2022. Arkiveret fra originalen 25. februar 2021.
  4. ↑ Porter, Jon Dark mode kommer til iOS 13 . The Verge (3. juni 2019). Hentet 5. juni 2019. Arkiveret fra originalen 7. august 2019.
  5. ↑ foretrækker-farveskema - CSS: Cascading Style Sheets | MDN . MDN Web Docs . Hentet 18. marts 2021. Arkiveret fra originalen 18. marts 2021.
  6. ↑ Walsh, David foretrækker-farve-skema: CSS Media Query . David Walsh Blog (28. januar 2019). Hentet 18. marts 2021. Arkiveret fra originalen 17. marts 2021.
  7. ↑ Window.matchMedia() - Web API'er | MDN . developer.mozilla.org _ - "Window-grænsefladens matchMedia()-metode returnerer et nyt MediaQueryList-objekt, som derefter kan bruges til at bestemme, om dokumentet matcher medieforespørgselsstrengen, samt til at overvåge dokumentet for at opdage, hvornår det matcher (eller stopper med at matche) den medieforespørgsel ". Hentet 18. marts 2021. Arkiveret fra originalen 17. marts 2021.