Tumma tila

Yleistä

Tumman tilan tarkoituksena on tarjota käyttäjille vaihtoehtoinen ulkoasu, jossa tausta on pääosin tumma ja teksti vaaleaa. Tumma tila voi parantaa luettavuutta tilanteissa, joissa ympäristön valaistus on vähäistä. Lisäksi monet käyttäjät kokevat tumman ulkoasun miellyttävämmäksi vaihtoehdoksi silmille.

Tutustu ohjeeseen värien käytöstä tummassa tilassa.

KDS:n tumma tila

Kela Design System tukee tummaa tilaa versiosta 15.0.0 alkaen.

Ottaaksesi KDS:n tumman tilan käyttöön Kelan tai Kannan sovelluksessa, on käyttöön ladattava teemakohtainen tumman tilan tyylitiedosto. Tämän jälkeen tila aktivoituu lisättäessä html-elementille luokka kds-dark. Tarkemmat ohjeet löydät käyttöönotto-sivulta.

KDS:n tumma tila noudattaa samoja typografisia ja visuaalisia periaatteita kuin vaalea tila, jotta käyttökokemus on yhtenäinen ja johdonmukainen.

Kela Design Systemin dokumentaatiossa voit vaihtaa tumman ja vaalean tilan välillä ylätunnisteesta löytyvällä painikkeella tai näppäinkomennolla ctrl + alt + x.

Ulkoasutilan asettaminen ja vaihtaminen

Tumma tai vaalea ulkoasutila voidaan asettaa automaattisesti tunnistamalla käyttäjän järjestelmän asetus. Tilan asettaminen automaattisesti on suositeltavaa, mikäli molemmat ulkoasutilat ovat tuettuna sovelluksen kaikissa sisällöissä.

Käyttäjän järjestelmän ulkoasutilan tunnistaminen:

// Detect system mode
const systemMode = window.matchMedia(`(prefers-color-scheme: dark)`).matches ? "dark" : "light";

React-sovelluksissa ulkoasutilan tunnistamiseen ja vaihtamiseen voidaan hyödyntää KDS:n useMode-hookia.

Valintapainike

Useimmissa sovelluksissa ulkoasutilan hallintaan on perusteltua tarjota myös valintapainike. Painikkeen toteutustapa ja sijoittelu jää sovelluksen vastuulle. Tavallisesti painike pyritään sijoittamaan palvelun ylätunnisteeseen.

Valintapainikkeen toteutuksessa voi hyödyntää KDS:n käyttöliittymäkuvakkeiden aurinko- ja kuu-ikonia.