Dark mode színek: miért nem elég mindent egyszerűen invertálni?
Sötét felületen megváltozik a luminancia, a vizuális súly és a telített színek érzete. Építs külön szerepkiosztást, ne automatikus negatív képet.
Röviden
A dark mode nem egyszerű színinverzió. A surface-eket, szövegszinteket, accenteket és állapotokat külön kell hangolni, miközben a szemantikus szerepek ugyanazok maradhatnak.
Light és dark primary külön hangolható
Ne csak nézd — manipuláld
Light primary
Picker megnyitása ↗
Dark primary
Picker megnyitása ↗
PROJECT OVERVIEW
Szerepek maradnak, értékek változnak.
A background, surface, text és primary token ugyanazt jelenti mindkét témában, de nem kell ugyanazt a HEX értéket használnia.
Folytatás
Az invertálás megtartja a kódot, de nem a vizuális minőséget
Egy világos témára optimalizált erős kék vagy zöld sötét háttéren túl vibráló lehet. A fekete–fehér szélsőségek pedig fárasztóbb, keményebb kontrasztot okozhatnak a teljes felületen.
A surface-ekkel építs mélységet
Sötét témában a háttér és kártyafelületek közötti finom világosságkülönbség sokszor természetesebb, mint erős border minden elem körül. A rendszer ugyanúgy hierarchiát épít, csak más luminanciatartományban.
A szemantikus tokenek itt fizetődnek ki
Ha a komponens background, surface, text és primary tokeneket használ, témaváltáskor ezekhez rendelsz más értékeket. A komponens funkciója nem változik.
Light és dark mode két vizuális megvalósítás ugyanarra a szemantikus rendszerre.
A dark mode nem egyszerű színinverzió
Ha a világos témát mechanikusan invertálod, könnyen túl erős kontrasztokat, vibráló telített színeket és rosszul rétegzett surface-eket kapsz. A sötét téma saját vizuális környezet, amelyben ugyanazok a szemantikus szerepek más konkrét értékeket kaphatnak.
A tiszta háttér és szöveg sok esetben túl kemény lehet hosszabb olvasásnál, míg egy enyhén világosított sötét background és törtfehér text finomabb hierarchiát adhat. Ettől még a kontrasztminimumokat ugyanúgy ellenőrizni kell.
Brand színek újrahangolása sötét témában
Egy light mode-ban jól működő középsötét kék sötét háttéren könnyen elveszhet. Gyakran világosabb vagy kevésbé telített változatra van szükség ahhoz, hogy ugyanazt a primary szerepet betöltse.
Ez jó példa arra, miért hasznos a szemantikus token: a `primary` szerep marad, miközben a mögöttes konkrét szín témánként változhat.
Világosabb és sötétebb rokon árnyalatok kereséséhez használd a színadatbázist.
Sötét témában a surface-rétegek finom különbségei fontosabbá válnak
Világos témában árnyék és fehér/szürke felület könnyen létrehoz rétegzettséget. Sötét témában a túl erős box-shadow kevésbé természetes, ezért gyakran enyhén világosabb surface-színek vagy finom borderek választják el a kártyákat a háttértől.
A cél nem az, hogy minden réteg látványosan eltérjen, hanem hogy a szerkezet érzékelhető maradjon. Ehhez érdemes több sötét neutral lépcsőt definiálni, nem csak egyetlen `#111` hátteret.
A telített színek sötét háttéren erősebbnek tűnhetnek
Egy élénk kék vagy lila, amely fehér háttéren kiegyensúlyozott, sötét környezetben neonhatásúvá válhat. Emiatt dark mode-ban nem csak a lightness, hanem a saturation csökkentése is indokolt lehet.
A megfelelő dark token ezért gyakran nem egyszerűen a light token világosabb változata. Külön hangolás kell ahhoz, hogy megtartsa a brand karakterét, de ne vibráljon a sötét surface mellett.
Téma választás és rendszerpreferencia
Ha a termék támogat dark mode-ot, technikailag figyelembe veheted a felhasználó rendszerbeállítását, és adhatsz manuális választót is. UX szempontból fontos, hogy a választás ne csak egyszeri vizuális trükk legyen: minden komponensnek, diagramnak, illusztrációnak és állapotnak legyen sötét témára validált változata.
A semantic tokenstruktúra itt térül meg igazán, mert a témaváltás központi értékcserévé válik ahelyett, hogy komponensenként külön CSS-felülírásokat halmoznál.
A tokenlogikát a szerepalapú színrendszer leckében részletesen is felépítjük.
Gyakori kérdések
A dark mode háttér legyen #000000?
Lehet, de nem kötelező. Sok felületen enyhén világosabb, színezett sötét háttérrel könnyebb surface-hierarchiát és kényelmesebb összhatást kialakítani.
Gyakorold tovább
Használd a saját szín- és palettaeszközöket
Az elmélet akkor rögzül, amikor konkrét árnyalatokon és kombinációkon is kipróbálod. Ezek a kapcsolódó ByBence oldalak ugyanennek a tananyagnak a gyakorlati folytatásai.
Források és további olvasnivaló
A webes színmodelleknél és accessibility részeknél szabványokra és elsődleges dokumentációra támaszkodj. A konkrét palettadöntéseket pedig mindig a saját felületeden, valódi komponenseken teszteld.