Pocket-lint stöds av sina läsare. När du köper via länkar på vår webbplats kan vi tjäna en affiliate provision. Läs mer

Denna sida har översatts med AI och maskininlärning.

(Pocket-lint) - Mörkt läge har fram till nyligen varit reserven för utvecklare och professionella reklam som fotografer och filmskapare.

Men under 2019 förändrades det. Ett antal företag från Apple till Google till Facebook anammade alla tanken att inte allt skulle vara vitt hela tiden och började erbjuda användarna möjlighet att välja en alternativ färgpalett som var lättare för ögonen sent på kvällen.

Vi är glada att kunna säga att du nu kan lägga till Pocket-lint till listan över företag som erbjuder ett mörkt läge när du surfar på webbplatsen, och från och med idag kan du läsa dina favoritnyheter, recensioner, funktioner, köpguider och mer i båda ljusen läge eller mörkt läge på vår webbplats.

Men varför har vi valt att lägga till mörkt läge i Pocket-lint, vilka är fördelarna och hur kan du njuta av det själv?

Varför bli mörk?

Det finns ett antal fördelar med att använda mörkt läge, allt från att vara lättare för ögonen - särskilt sent på kvällen, få bilder att sticka ut mer, förbättra batteriets livslängd och viktigast av allt att förbättra tillgängligheten.

Google säger att de fann att en av de största fördelarna med mörkt läge efter att ha implementerat det på den senaste versionen av Android (10) är att det kan leda till förbättrad batteritid.

Apple citerar inte vinster för batteriprestanda men har tidigare sagt till Pocket-lint att anledningen till att omfamna mörkt läge beror på många kreativa proffs som begär att företaget anammar upplevelsen att ta bort distraktioner.

AppleOmdesign Pocket-lint för mörkt läge Varför hur och de utmaningar du möter med att ta din webbplats Dark image 2

För Pocket-lint var beslutet att bli "mörkt" en kombination av alla dessa skäl, men också på grund av en begäran från teamet att det var något de ville ha och var säkra på att våra läsare också ville ha.

Att arbeta i en rad miljöer från ett kontor under dagen eller ett flyg som flyger över Atlanten till ett evenemang i en avlägsen plats någonstans runt om i världen, det är förståeligt. Team Pocket-lint spenderar mycket mycket tid inte bara på att stirra på en skärm på en telefon, surfplatta eller dator utan också på Pocket-lint.

Mörkt läge begärdes och utmaningen att implementera det började.

Hur det fungerar

Vi kommer att täcka designprocessen på ett ögonblick, men det är värt att notera hur det fungerar och hur du kan aktivera mörkt läge.

Det som var klart från början var att mörkt läge inte är något som är lämpligt för alla miljöer och alla applikationer. Det är därför inte något som automatiskt ska tvingas på besökare oavsett om de vill ha det eller inte. Och så är det tillvägagångssättet vi har tagit på Pocket-lint. Du kan helt ignorera Pocket-lints mörka läge om du vill och fortsätta använda ljusläget som normalt. Det var viktigt.

Mörkt läge och nu motsvarande ljusläge bör vara en användarpreferens framför att njuta av innehållet och inte något du inte har något val om.

Vissa älskar tanken på mörka bakgrunder, ljus text och allt som kommer med mörkt läge, medan andra tycker att det är för polariserande och för skurrande jämfört med hur de är vana att se webbplatser.

Med detta i åtanke erbjuder vi mörkt läge på tre olika sätt:

  1. Bestäms via enhetens operativsystem
  2. Aktiveras via en vippbrytare högst upp på platsen i masthuvudet
  3. Styrs via tid på dagen

Den första är logisk. Om du kör mörkt läge över hela systemet eftersom du har valt via systeminställningarna för den enhet du använder är chansen att du vill se Pocket-lint i mörkt läge.

Den andra är utformad för att låta dig stänga av mörkt läge om du inte gillar det, men också för att aktivera det om du inte kör mörkt läge på systemnivå.

Det tredje, tror vi, försöker förstå användarens behov utan att de själva behöver oroa sig för det. Mörkt läge avnjutas bäst när det är mörkt ute - dvs. på natten - och så har vi valt att slå på det automatiskt från 22:00 till 07:00 även om dina systeminställningar är inställda på ljusläge. Vi kan göra detta genom att förstå vilken tidszon användaren befinner sig i och ställa in den därefter. Naturligtvis kan du åsidosätta inställningen om du önskar det via den viktiga vippomkopplaren.

Designa för mörkt läge

Mörkt läge handlar inte bara om att invertera färgerna från svart till vitt och vitt till svart.

På Pocket-lint tittade vi på ett antal mörka lägespaletter för att analysera vad som är bäst ur en tillgänglighetssynpunkt utan också ur en läsbarhetssynpunkt.

Dokumentation på webben är fortfarande mycket i sin linda och medan vissa paletter är bra i vissa miljöer fungerar de inte i andra.

Gå "helt svart" och långa artiklar med massor av ord blir tröttsamma att läsa, medan du väljer för ljus grå betyder att effekterna i mörkt läge går förlorade. Du måste också ta hänsyn till teckensnitts- och teckensnittsfärger, teckensnittsavstånd när det gäller kerning och ledning, liksom element som hyperlänkar, bildtexter, bildkrediter och andra "teckensnittsmöbler" runt sidan.

colorhuntOmdesign Pocket-lint för mörkt läge Varför hur och de utmaningar du möter med att ta din webbplats mörk bild 3

Slutresultatet var att välja en färgpalett med starkt blågrå och turkos inflytande, vilket vi tror, ett mörkt läge som är tillgängligt på ett antal nivåer samt klara ett antal tillgänglighetsprov för användbarhet och läsbarhet.

För att komma igång använde vi colorhunt.co . Den enkla att använda webbplatsen låter dig se olika färgpaletter och hur färgerna kompletterar varandra. Det är en fantastisk resurs oavsett ditt behov för mörkt läge.

När vi väl hade valt en palett som vi ville arbeta med satte vi igång att översätta dessa färger till Pocket-lints design.

Vi använde den mörkaste färgen i paletten som vår standardbakgrund med den näst mörkaste som en överstrykningspenna till den bakgrunden.

Du kommer att se dessa färger mest framträdande på våra nydesignade navsidor . Användningen av färg lyfter här vår "kort" -design från sidan och förbättrar läsbarheten avsevärt. Vi använde också färgen för de horisontella reglerna runt webbplatsen för att bryta upp listor på till exempel hemsidan.

Tarmreaktionen skulle vara att använda den turkosa färgen i paletten för hyperlänkar, på en ljus bakgrund som fungerar bra, men detta är ett av de vanligaste misstagen när det gäller mörkt läge. Färgad text på en mörk bakgrund fungerar inte.

Pocket-lintOmdesign Pocket-lint för mörkt läge Varför hur och de utmaningar du möter med att ta din webbplats mörk bild 4

För att bekämpa detta har vi ändrat Pocket-lint-hyperlänkstil till en tjock understrykning som framhäver på svävar snarare än att färga det länkade ordet eller frasen. Att ta detta tillvägagångssätt gör det mycket lättare för ögat, och vi har till och med antagit det i vårt ljuslägetema också framöver.

För att förbättra läsbarheten har vi valt att färga texten på sidan en off-white / ljusgrå, den slutliga färgen i vår valda palett, snarare än att välja "full white". Detta skapar en mycket mjukare upplevelse, och en som vi tror är mycket lättare för ögat när det gäller läsning.

Ja, mörkt läge handlar om kontraster, men du vill inte ha det för kontrasterande. Svartvitt kan verkligen vara väldigt tufft sida vid sida.

När vi väl hade slutfört mörkt läge vände vi oss till att uppdatera vårt nu nya ljusläge. Tidigare det enda läget, för att behålla en konsekvent designstil och etos var det också tvungen att ändra för att matcha samma tillvägagångssätt och övertygelser.

För Pocket-lint betyder det en ny hyperlänkstil och en ny teckensnittsfärg - den mörkaste färgen i vår nya palett, samt några justeringar och ändringar någon annanstans för att hålla sakerna konsekventa.

Tillgänglighet

Medan många bara ser mörkt läge som något som är "coolt" finns det ett antal viktiga skäl till varför det faktiskt är bra även när det gäller tillgänglighet. Det var något vi ville se till att det var en av fördelarna med att implementera mörkt läge på Pocket-lint.

Det finns ett antal verktyg som du kan använda för att testa kontrasterande färger. World Wide Web Consortium är den viktigaste internationella standardorganisationen för World Wide Web och har ett antal riktlinjer för att göra webben till en mer tillgänglig plats.

a11yOmdesign Pocket-lint för mörkt läge Varför hur och de utmaningar du möter med att ta din webbplats mörk bild 6

Riktlinjer för tillgänglighet för webbinnehåll (WCAG) 2.1 täcker särskilt ett brett utbud av rekommendationer för att göra webbinnehåll mer tillgängligt.

Det var av yttersta vikt att se till att både de ljusa och mörka lägena som introducerades av Pocket-lint klarade dessa tester.

Bästa VPN 2021: De 10 bästa VPN -erbjudandena i USA och Storbritannien

Och så har vi arbetat med riktlinjerna för att använda kontrasterande färger för att få allt att fungera så bra vi kan.

Designutmaningar

När vi väl hade tagit fram en färgpalett är det ganska enkelt att översätta det till webbplatsen men tidskrävande.

Pocket-lint har körts i 16 år och det här var en bra tid att städa upp och förbättra koden i master CSS-filen. CSS-filen är filen som hanterar alla stilar och layouter för artiklar och sidor på webbplatsen så det är ett stort jobb.

Under åren med många utvecklare att lägga till och ändra koden har det varit en tendens att lägga till stilar baserat på hur de ser ut - inklusive deras färg. Det är ett stort nej-nej när det gäller att implementera en mörk och ljus design och är något som, när du har en positiv och en negativ färgpalett, måste ändras.

Pocket-lintOmdesign Pocket-lint för mörkt läge Varför hur och de utmaningar du möter med att ta din webbplats mörk bild 5

Den andra utmaningen vi hade var att besluta om en enhetlig ikon som skulle användas över hela webbplatsen för att representera för läsarna att de kunde växla mellan ljusläge och mörkt läge när de ville.

Med mörkt läge fortfarande i sin linda finns det ännu inte en enhetlig ikon som används över nätet. De som har implementerat ett mörkt läge har valt en rad olika ikoner och formuleringar för att symbolisera att det finns ett val. Månar, solar, glödlampor och ord används alla med liten omsorg eller uppmärksamhet.

Efter att ha testat ett antal olika ikoner med medlemmar i teamet, familjen och vännerna har vi bestämt oss för en halvmåne-ikon som antingen är fast eller tom beroende på om mörkt läge är på eller av. Vi tror att detta var mest meningsfullt och lätt att förstå oavsett var du är eller vilket språk du talar.

Nästa steg

Nu har vi implementerat mörkt läge på Pocket-lint. Vi planerar att fortsätta att övervaka hur det används av läsarna och om något av våra designval orsakar några problem eller problem när det är tillgängligt för en mycket bredare publik.

Skriva av Stuart Miles. Ursprungligen publicerad den 19 December 2019.