Svart lógó á gegnsæjum bakgrunni er fullkomið á ljósum flipa en hverfur á dökkum. ICO-sniðið getur ekki aðlagast en SVG-táknmyndin getur það: hún inniheldur CSS-reglu sem skiptir um liti eftir þema vafrans.
Vandinn: ein skrá, tveir bakgrunnar
Þar sem vafrar fylgja nú kerfisþemanu getur flipastikan verið nær hvít hjá einum gesti en nær svört hjá öðrum á sömu síðu. Einlit táknmynd sem er hönnuð fyrir annað verður ólæsileg í hinu.
Margir vefir leysa þetta með því að gefa tákninu ógegnsæjan litaðan bakgrunn. Það virkar en táknið verður að þungum bletti, á meðan stór vörumerki halda sig við tákn án bakgrunns.
Rétta lausnin er að láta vafrann velja og það er hægt án JavaScript eða greiningar á netþjóni.
Svona virkar aðlögunarhæft SVG
SVG-skrá er skjal en ekki flöt mynd: hún getur innihaldið style-tag og þar með miðlafyrirspurnir. Með prefers-color-scheme: dark-reglu í skránni er fyllilit ferlanna breytt þegar vafrinn notar dökkt þema.
Í framkvæmd tilgreinir SVG sjálfgefinn lit fyrir ljósa þemað og síðan reglu sem skiptir honum út í dökkri stillingu. Vafrinn beitir réttu reglunni við birtingu og uppfærir flipann strax ef gesturinn skiptir um þema.
Sami búnaður getur gert meira en að snúa litum við: þú getur birt allt aðra teikningu, til dæmis tákn án bakgrunns í ljósri stillingu og fyllt merki í dökkri stillingu.
Tilgreina SVG samhliða .ico
Tilgreindu SVG með link rel="icon" type="image/svg+xml" href="/favicon.svg". Vafrar sem skilja það velja það umfram annað en hinir nota favicon.ico í rótinni til vara.
Það þarf því engu að eyða: báðar skrár eru til samhliða og hvor nær til þeirra forrita sem hin nær ekki. Þetta er stigvaxandi endurbót á 32 pixla tákni.
Einn fyrirvari: SVG-táknmynd verður að vera sjálfstæð. Ytra letur, fjarmynd eða skrift er ekki sótt við þessar aðstæður. Texta þarf að breyta í ferla.
Hvað dökka stillingin nær ekki yfir
Dökka útgáfan á við táknmynd í tölvuvafra. Hún hefur ekki áhrif á Apple Touch-táknið, sem er föst ógegnsæ PNG-mynd, né tákn vefbirtingarskrárinnar, sem Android birtir á eigin bakgrunni.
Stuðningur er heldur ekki alls staðar: Chromium-vafrar og Firefox lesa aðlögunarhæft SVG en Safari er skemmra á veg komið eftir útgáfu. Það er í lagi því sjálfkrafa er gripið til .ico til vara.
Hannaðu því ljósu táknmyndina sem sjálfgefna útgáfu sem allir gestir geta séð og líttu á dökku útgáfuna sem viðbót fyrir vafra sem skilja hana.
Frumheimildir
Algengar spurningar
Getur favicon.ico stutt dökka stillingu?
Nei. ICO-sniðið geymir fastar punktamyndir og þekkir ekki þemu. Aðeins SVG getur innihaldið miðlafyrirspurn og því eru bæði snið í nútímapakkanum.
Þarf tvær SVG-skrár, eina ljósa og eina dökka?
Nei, ein skrá nægir. Báðar útgáfur eru í sama SVG, aðskildar með prefers-color-scheme-miðlafyrirspurn, svo hvorki þarf aukabeiðni né greiningarkóða.
Hvernig prófa ég birtinguna í dökku þema?
Skiptu um þema stýrikerfisins og endurhladdu svo flipann. Í myndunarverkfærinu eru forskoðanir ljósra og dökkra flipa hlið við hlið, svo þú þarft ekki að skipta fram og til baka.