Tumma tila

Tumma tila ( tumma teema , eng.  Dark Mode , "vaalea tummalla värimalli" [1] ) käyttöliittymäsuunnittelussa  on värimaailma , joka käyttää vaaleaa tekstiä tummalla taustalla.

Historia

Nykyaikaisten tietokonenäyttöjen edelläkävijät, kuten katodisädeoskilloskoopit, pyrkivät piirtämään ja esittämään muuta sisältöä hehkuvina jälkinä mustaa taustaa vasten.

Kun tietokoneita käytettiin CRT -näytönä, näytön tumma fosfori (tausta) hehkui kirkkaasti, kun elektronisäde osui siihen; RGB-näytöt toimivat samalla tavalla: valkoisen tuottamiseksi kaikki säteet oli asetettava "päälle".

Vastakkainen värimaailma otettiin alun perin käyttöön myöhemmin WYSIWYG -tekstinkäsittelyohjelmissa musteen simuloimiseksi paperilla.

Edut

Tumman tilan edut ovat [2] :

Tuki

Tummaa tilaa tukevat monet nykyaikaiset käyttöjärjestelmät, mukaan lukien Windows (alkaen Windows 10 Anniversary Updatesta), macOS 10.14 , iOS 13 ja Android 10 . Firefox- ja Chromium - selaimet voidaan asettaa pimeään tilaan.

Vuodesta 2019 lähtien CSS :llä on ollut "prefers-color-scheme" -ominaisuus, joka on käyttäjän mieltymys pimeän tilan käyttöön [4] .

[5] [6]

Esimerkki

@ media ( suosii värimallia : tumma ) { body { color : #ccc ; tausta : #222 ; } }

JavaScript- esimerkki : [7]

if ( ikkuna . matchMedia ( '(prefers-color-scheme: dark)' ). vastaa ) { tumma (); }

Muistiinpanot

  1. ↑ Vaalea-tumma värimaailma . hänen . Haettu 2. toukokuuta 2022. Arkistoitu alkuperäisestä 2. toukokuuta 2022.
  2. ↑ Ohjeet: Siirtyminen pimeään tilaan selaimissa ja sähköpostissa . esputnik . Haettu 2. toukokuuta 2022. Arkistoitu alkuperäisestä 16. toukokuuta 2022.
  3. ↑ Androidin pimeän tilan käyttö parantaa akun käyttöikää, Google vahvistaa . cnet . Haettu 2. toukokuuta 2022. Arkistoitu alkuperäisestä 25. helmikuuta 2021.
  4. ↑ Porter, Jon Dark -tila on tulossa iOS 13:een . The Verge (3. kesäkuuta 2019). Haettu 5. kesäkuuta 2019. Arkistoitu alkuperäisestä 7. elokuuta 2019.
  5. ↑ prefers-color-scheme - CSS: Cascading Style Sheets | MDN . MDN Web Docs . Haettu 18. maaliskuuta 2021. Arkistoitu alkuperäisestä 18. maaliskuuta 2021.
  6. ↑ Walsh, David suosii värimallia: CSS Media Query . David Walsh -blogi (28. tammikuuta 2019). Haettu 18. maaliskuuta 2021. Arkistoitu alkuperäisestä 17. maaliskuuta 2021.
  7. ↑ Window.matchMedia() - Verkkosovellusliittymät | MDN . developer.mozilla.org _ - "Ikkunan käyttöliittymän matchMedia() -menetelmä palauttaa uuden MediaQueryList-objektin, jota voidaan sitten käyttää määrittämään, vastaako asiakirja mediakyselymerkkijonoa, sekä valvomaan asiakirjaa havaitakseen, milloin se vastaa (tai lakkaa vastaamasta) mediakyselyyn. ". Haettu 18. maaliskuuta 2021. Arkistoitu alkuperäisestä 17. maaliskuuta 2021.