CSS Dark Mode

A dark mode (sötét mód) egyre népszerűbb a webdesignban, mert csökkenti a szem fáradását és modern megjelenést ad az oldalaknak. A CSS segítségével automatikusan vagy manuálisan is beállíthatjuk a világos és sötét témát.

Automatikus dark mode media query-vel

A <prefers-color-scheme> media query lehetővé teszi, hogy a felhasználó rendszerbeállításai alapján automatikusan váltson az oldal világos és sötét mód között.

Ez a példa bemutatja, hogyan alkalmazható a dark mode automatikusan a felhasználó operációs rendszerének beállításai szerint.

Manuális dark mode osztályokkal

Az automatikus váltás mellett lehetőség van manuális megoldásokra is, ahol JavaScript segítségével adunk hozzá vagy távolítunk el osztályokat a body elemhez.

Ebben a példában manuálisan állítható a világos és sötét mód CSS osztályok segítségével.

Tippek a dark mode használatához

A sötét mód implementálásakor figyeljünk arra, hogy a tartalom továbbra is jól olvasható legyen és megfeleljen az akadálymentesítési elveknek.

• Mindig ellenőrizd a szöveg és a háttér kontrasztját.
• Adj lehetőséget a felhasználóknak manuális váltásra is.
• Teszteld a dark mode-ot különböző eszközökön és böngészőkben.