Teknike
Ngjyra e temës (theme-color)
Meta etiketa që ngjyros shiritin e shfletuesit në telefon; mjeti jep pikë por nuk prodhon asnjë konstatim.
Çfarë është
<meta name="theme-color"> propozon një ngjyrë për zonën e ndërfaqes së shfletuesit rreth faqes — shiritin e sipërm në Android, shiritin e gjendjes në një aplikacion të instaluar.
Efekti është thjesht pamor: faqja duket sikur vazhdon te ndërfaqja e shfletuesit, në vend që të rrijë brenda një kornize gri.
Etiketa mbështet edhe media, prandaj mund të jepen ngjyra të ndryshme për temën e çelët dhe atë të errët.
Pse ka rëndësi
Kjo nuk ka asnjë ndikim te renditja, te aksesueshmëria apo te performanca. Është zgjedhje dizajni.
Aty ku ka vlerë është te aplikacionet e instaluara dhe te sajtet me identitet të fortë vizual: ndryshimi midis një shiriti gri të parazgjedhur dhe një në ngjyrën e markës është i dukshëm.
Rasti ku ka rëndësi vërtet është tema e errët. Një sajt që mbështet temën e errët por lë shiritin e bardhë prodhon një vijë të ndritshme në krye të një ekrani të errët — bezdisëse në errësirë.
Për faqe të zakonshme informative, mungesa e kësaj etikete nuk kushton asgjë.
Një kujdes praktik që harrohet shpesh: ngjyra e zgjedhur bëhet sfond i shiritit ku sistemi vizaton orën, sinjalin dhe baterinë. Nëse ajo ngjyrë është shumë e afërt me ngjyrën e atyre ikonave, ato zhduken. Kjo është e vërtetë veçanërisht për ngjyra të ndritshme mbi iOS, ku ikonat janë të zeza, dhe për ngjyra shumë të errëta mbi Android, ku janë të bardha. Testoje në të dyja platformat para se ta fiksosh.
Si rregullohet
<meta name="theme-color" content="#1f2933">
<!-- ngjyra të ndryshme sipas temës së pajisjes -->
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#111827" media="(prefers-color-scheme: dark)">Hapat:
- Zgjidh një ngjyrë që përputhet me krye të faqes, jo me logon.
- Jep variante për të dyja temat nëse sajti i mbështet.
- Përsërite te `theme_color` i manifestit për aplikacionin e instaluar.
- Kontrollo kontrastin me ikonat e sistemit në shiritin e gjendjes.
- Formati duhet të jetë një ngjyrë e vlefshme CSS; vlera të pavlefshme shpërfillen në heshtje.
Si e mat ky mjet
PWAAnalyzer::analyze() (services/PWAAnalyzer.php:46) kërkon //meta[@name="theme-color"]. Nëse gjendet, shton 15 pikë nga 100 dhe e ruan vlerën e atributit content te checks.theme_color_value (:50).
Asnjë konstatim nuk prodhohet — as kur etiketa ekziston, as kur mungon. Rezultati shfaqet vetëm si fushë te të dhënat.
Çfarë NUK e mat
Ky kontroll ndikon te nota pa prodhuar asnjë konstatim. Përdoruesi që sheh një notë PWA prej 85 në vend të 100 nuk mëson kurrë se 15 pikë humbën këtu, sepse asnjë rresht nuk e thotë (services/PWAAnalyzer.php:46–51).
Vlera nuk validohet: një content="blu" ose content="#GGGGGG" merr të njëjtat pikë si një ngjyrë e vlefshme, ndonëse shfletuesi do ta shpërfillte.
Variantet me media nuk dallohen — merret vetëm etiketa e parë, prandaj një faqe me dy etiketa për temën e çelët dhe të errët raportohet me vlerën e së parës.
Nuk krahasohet as me theme_color te manifesti, ku mospërputhja është e zakonshme.
Mospërputhje midis tekstit të analizuesit dhe matjes
| Teksti i analizuesit | Çfarë ndodh | Si u mat | Burimi |
|---|---|---|---|
| (asnjë) | theme-color (15 pikë), apple-touch-icon (10 pikë) dhe mobile-web-app-capable (10 pikë) e ndryshojnë notën pa asnjë rresht shpjegues. | Të tri degët shtojnë pikë dhe nuk thërrasin asnjë shtim konstatimi. — matur gjatë 5.10 | services/PWAAnalyzer.php:46 |
Kodi që e kryen matjen
services/PWAAnalyzer.php:46— themeColorservices/PWAAnalyzer.php:50— theme_color_value