Mörkt läge

Mörkt läge ( mörkt tema , eng.  Dark Mode , "ljus-på-mörker färgschema" [1] ) i användargränssnittsdesign  är ett färgschema som använder ljus text på en mörk bakgrund.

Historik

Föregångarna till moderna datorskärmar, som katodstråleoscilloskop, försökte rita och presentera annat innehåll som glödande spår mot en svart bakgrund.

När datorer användes som en CRT -skärm glödde skärmens mörka fosfor (bakgrund) starkt när en elektronstråle träffade den; RGB-skärmar fungerade på liknande sätt: för att producera vitt måste alla strålar vara inställda på "på".

Det motsatta färgschemat introducerades ursprungligen senare, i WYSIWYG -ordbehandlare , för att simulera bläck på papper.

Fördelar

Fördelarna med mörkt läge är [2] :

Support

Dark Mode stöds av många moderna operativsystem, inklusive Windows (som börjar med Windows 10 Anniversary Update), macOS 10.14 , iOS 13 och Android 10 . Firefox och Chromium webbläsare kan ställas in på mörkt läge.

Sedan 2019 har CSS haft egenskapen "prefers-color-scheme", en användarpreferens för att använda mörkt läge [4] .

[5] [6]

Exempel

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

JavaScript- exempel : [7]

if ( fönster . matchMedia ( '(föredrar-färgschema: mörkt)' ). matchar ) { mörk (); }

Anteckningar

  1. ↑ Ljus-mörkt färgschema . hans vår . Hämtad 2 maj 2022. Arkiverad från originalet 2 maj 2022.
  2. ↑ Så här gör du: Växla till mörkt läge i webbläsare och e-post . esputnik . Hämtad 2 maj 2022. Arkiverad från originalet 16 maj 2022.
  3. ↑ Att använda Androids mörka läge förbättrar batteritiden, bekräftar Google . cnet . Hämtad 2 maj 2022. Arkiverad från originalet 25 februari 2021.
  4. ↑ Porter, Jon Dark mode kommer till iOS 13 . The Verge (3 juni 2019). Hämtad 5 juni 2019. Arkiverad från originalet 7 augusti 2019.
  5. ↑ prefers-color-scheme - CSS: Cascading Style Sheets | MDN . MDN Web Docs . Hämtad 18 mars 2021. Arkiverad från originalet 18 mars 2021.
  6. ↑ Walsh, David prefers-color-scheme: CSS Media Query . David Walsh Blog (28 januari 2019). Hämtad 18 mars 2021. Arkiverad från originalet 17 mars 2021.
  7. ↑ Window.matchMedia() - webb-API:er | MDN . developer.mozilla.org _ - "Window-gränssnittets matchMedia()-metod returnerar ett nytt MediaQueryList-objekt som sedan kan användas för att avgöra om dokumentet matchar mediefrågesträngen, samt för att övervaka dokumentet för att upptäcka när det matchar (eller slutar matcha) den mediefrågan ". Hämtad 18 mars 2021. Arkiverad från originalet 17 mars 2021.