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 shift + 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-hookkia.

Valintapainike

Useimmissa sovelluksissa käyttäjälle on hyvä tarjota mahdollisuus vaihtaa ulkoasutilaa myös itse.

Ulkoasutilan valitsin voidaan sijoittaa:

• alatunnisteeseen,
• ylätunnisteen käyttäjävalikkoon, jos palvelu edellyttää kirjautumista,
• erilliselle asetussivulle, jos palvelu edellyttää kirjautumista ja siinä on muitakin asetuksia,
• mobiilinäkymässä myös avattavaan mobiilinavigaatioon.

Valitsin sijoitetaan johdonmukaisesti samaan paikkaan palvelun kaikilla sivuilla. Esimerkkejä sijoittelusta löytyy mallisivupohjista.

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

Tai ToggleSwitch-komponenttia.