Színrendszer
Ismerd meg, hogyan működik a widget kétrétegű színrendszere — általános színek a csevegéshez és a felület elemeihez, kezdőképernyő színek a nyitóképhez — és hogyan használhatod az automatikus generálást, sablonokat és egyéni felülírásokat.
Áttekintés
A widget minden színe egy futásidőben injektált CSS egyéni tulajdonság, amely a mentett konfigurációdból származik. A színek két csoportba vannak szervezve:
- Általános — a csevegési felületet, üzenetbuborékokat, beviteli mezőket, szegélyeket és szöveget vezérli a widget egészében
- Kezdőlap — a kezdőképernyő fejlécét, háttérdekorációkat, kártyákat és kiemelő akcentusokat vezérli
Mindkét csoportot a widget szerkesztő Megjelenés fülén konfigurálhatod.
Általános színek
Az általános paletta két fő színből indul ki. Minden más szín ezekből származik.
Fő színek
| Szín | Mit vezérel | Alapértelmezett |
|---|---|---|
| Háttér | Widget háttér, panelek és felületek | #FFFFFF |
| Akcentus (UI) | Gombok, linkek, aktív állapotok és interaktív elemek | #083BD9 |
Alszínek (Haladó)
Ezek automatikusan generálódnak a fő színekből, de egyenként felülírhatók. Bontsd ki a Haladó színek részt a szerkesztőben a megtekintésükhöz.
| Szín | Cél | Hogyan generálódik |
|---|---|---|
| Indítógomb | A lebegő csevegés gomb színe | Tükrözi az akcentus színt |
| Tompított háttér | Finom felületváltozat | Háttér 20-al eltolva |
| Halványított háttér | Erősebb felületváltozat | Háttér 40-nel eltolva |
| Szöveg | Elsődleges szövegtörzs | Világos vagy sötét szürke a háttér fényessége alapján |
| Tompított szöveg | Másodlagos szöveg | Kissé világosabb/sötétebb az elsődleges szövegnél |
| Tónusos szöveg | Harmadlagos szöveg | Közepes szürke tónus |
| Halványított szöveg | Legkevésbé hangsúlyos szöveg | Leghalványabb szürke változat |
| Kiemelt szöveg | Legerősebb hangsúlyú szöveg | Fehér sötét háttereken, majdnem fekete világos háttereken |
| UI szöveg | Szöveg akcentus színű felületeken | Fehér vagy fekete az akcentus fényessége alapján |
| Felhasználói buborék | Látogató üzenetbuborékjának háttere | Háttér és akcentus színek keveréke |
| Felhasználói buborék szöveg | Szöveg a látogató buborékjában | Fehér vagy fekete a buborék színe alapján |
| Beviteli háttér | Üzenet beviteli mező | Kissé sötétebb a háttérnél |
| Beviteli szöveg | Szöveg a beviteli mezőben | Fehér vagy fekete a beviteli háttér alapján |
| Szegély | Alapértelmezett szegélyek | Háttér 20-al eltolva |
| Tompított szegély | Finom szegélyek | Háttér 10-zel eltolva |
Kezdőképernyő színek
A kezdőképernyőnek saját színcsoportja van, hogy a nyitóképnek egyedi megjelenést adhass a csevegés többi részéhez képest.
Fő színek
| Szín | Mit vezérel | Alapértelmezett |
|---|---|---|
| Felső fejléc | A fejléc terület háttere logóval és üdvözléssel | #DEE3F9 |
| Fő törzs | A fejléc alatti kártya terület háttere | #DEE3F9 |
| Kiemelés 1 | Bal oldali akcentus a dekorációs mintákban | #F5CAB7 |
| Kiemelés 2 | Jobb oldali akcentus a dekorációs mintákban | #799FE6 |
Alszínek
| Szín | Cél |
|---|---|
| Fejléc szöveg | Szöveg a felső fejléc területen |
| Törzs szöveg | Elsődleges szöveg a kártyákon és tartalomban |
| Tompított szöveg | Másodlagos szöveg a kezdőképernyőn |
| Halványított szöveg | Legkevésbé hangsúlyos szöveg a kezdőlapon |
| Kiemelt szöveg | Legerősebb hangsúly a kezdőképernyőn |
| Tompított háttér | Finom felület a kezdőlap kártyáihoz |
| Halványított háttér | Erősebb felületváltozat |
| Dekorációk | Mintaelemek színe (pontok, vonalak, rácsok) |
Háttérstílusok
A kezdőképernyő kilenc háttérstílust támogat, amelyeket a Háttérstílus legördülő menüből konfigurálhatsz:
| Stílus | Leírás |
|---|---|
| Alapértelmezett | Foltok, rácspont és függőleges vonalak kombinálva |
| Foltok | Csak lágy színes foltok |
| Reflektor | Nagy elmosódott reflektor felülről középről |
| Átmenet | Hárompontos átmenet háló |
| Hullámzás | Koncentrikus körök szín kiemeléssel |
| Rács | Sakktábla minta elmosódott foltokkal |
| Teljes kép | Feltöltött kép kitölti a hátteret csökkentett átlátszósággal |
| Kis kép | Feltöltött kép 300px magasságnál elhalványul |
| Nincs | Csak egyszínű |
A Teljes kép és Kis kép esetén képfájlt (WebP, PNG vagy JPEG) töltesz fel közvetlenül a szerkesztőben.
Sablonok használata
A paletta felépítése helyett válassz az öt beépített sablon közül:
Nyisd meg a sablonválasztót
Kattints a Sablonok gombra a Megjelenés fül Téma vagy Kezdőképernyő részében.
Válassz egy sablont
Válassz a Classic Blue, Midnight Sky, Crimson Night, Twilight Horizon vagy Sunset Sands közül.
Alkalmazd az egyik vagy mindkét csoportra
A rendszer megkérdezi, hogy a sablont csak a jelenlegi színcsoportra vagy mindkét általános és kezdőlap színre alkalmazd-e egyszerre.
Finomhangolás
A sablon alkalmazása után bármelyik színt módosíthatod. Használd az Automatikus generálás gombot az alszínek újraszámításához, ha megváltoztatod a fő színeket.
Élő előnézet
Minden színváltozás valós időben megjelenik a widget előnézetben postMessage segítségével. Pontosan láthatod, hogyan néz ki a palettád a kezdőképernyőn, a csevegésben és más nézeteken a mentés előtt.