Join the dark site - Native dark mode voor Tweakers

Tweakers heeft vanaf nu een native dark mode. Je kunt dit thema inschakelen via de weergaveopties in het tandwieltje rechtsboven of, als je ingelogd bent, via je profiel. Standaard worden de instellingen van je apparaat of besturingssysteem overgenomen. Dark mode is beschikbaar voor alle gebruikers op Tweakers, ongeacht of je een abonnement hebt, in-of uitgelogd bent of de hoeveelheid karma die je hebt.

Ook nieuwe light mode

Dark mode is niet het enige dat visueel is veranderd. Het lichte thema van Tweakers is ook in een nieuw jasje gestoken, onlosmakelijk verbonden met de ontwikkeling van dark mode. Om dark mode op een efficiënte manier te kunnen implementeren én in de toekomst twee thema's te kunnen onderhouden, was het immers essentieel dat we kleuren zouden consolideren. Dat betekent dat er kleuren zijn 'samengevoegd' en er veel minder verschillende kleuren worden gebruikt dan voorheen. Door het gebruik van css-variabelen hebben we nu een consistent kleurgebruik over de hele site in bijvoorbeeld tekst en knoppen. Ook de tracker en footer hebben daarom nu dezelfde achtergrondkleur gekregen. De uitstraling is daarmee op sommige pagina's net iets anders geworden, maar met het oog op de toekomst ook veel beter te onderhouden.

Ontwikkeling van dark mode

Aangezien dark mode al jaren de meest gevraagde feature op Tweakers is en er ook al geruime tijd custom-css-snippets voor beschikbaar zijn, is het natuurlijk de vraag waarom de ontwikkeling ervan zo lang op zich heeft laten wachten. Daarvoor moeten we terug in de tijd. In 2012 werd Tweakers 7 gelanceerd. Dit ontwerp bevatte meer witruimte, wat door velen als onprettig werd ervaren. Als reactie hierop kwamen er onder andere instellingen om een achtergrondkleur in te stellen. Vanaf 2016 werd dark mode steeds populairder in software, apps en besturingssystemen, en kwam dit als native instelling beschikbaar in Windows (2016) en macOS (2018). In 2019 volgden Android en iOS.

In die periode werd ook gevraagd om een 'nachtmodus' in een topic dat met 688 thumb-ups tot op de dag van vandaag veruit de populairste feature request is. In eerste instantie hebben we deze ontwikkelingen aangekeken; met de kennis van toen kon dark mode een hype zijn die weer zou overwaaien en bovendien waren we benieuwd naar native ondersteuning vanuit browsers. De uitdaging voor Tweakers was echter ook direct duidelijk; de legacy van oude code en de onderhoudbaarheid ervan maakten dark mode al gauw tot een gigantisch project. Tweakers bestaat uit enorm veel pagina's en elementen, zowel populaire als obscure, die allemaal aangepast moesten worden met een implementatie die ook in de toekomst eenvoudig te onderhouden zou zijn.

Frontendvernieuwing

De introductie van custom-css-snippets in 2019 maakte het mogelijk om eenvoudig custom-css met elkaar te delen. Dit betekende dan ook de geboorte van Tweakers Perfect Dark, nog altijd de populairste snippet. In deze periode waren er wat ontwikkeling betreft andere prioriteiten dan dark mode en ging er veel tijd en aandacht naar bijvoorbeeld de verdere ontwikkeling van de Pricewatch. In 2020 begonnen we met een vernieuwing van de frontend, met als belangrijkste doel om oude code te refactoren en de set-up te moderniseren. Herbruikbare componenten maakten daar deel van uit en we keken ook naar de technische werking van het instellen van verschillende thema's, zoals een donker thema.

Bij de vernieuwing van de frontpage werd dark mode echter buiten de scope gelaten, omdat we geen donkere modus wilden op slechts één pagina van de site. We wilden dark mode pas introduceren zodra het grootste deel van de site vernieuwd zou zijn. Toen de nieuwe frontpage live ging, beseften we echter dat het nog jaren zou duren als we met dark mode moesten wachten op de frontendvernieuwing van de rest van de site. In usabilitytests, enquêtes en de kwartaalonderzoeken die we deden, klonk de roep om dark mode steeds luider, ook als het onderzoek niet-designgerelateerd was. Daarom besloten we begin dit jaar om dark mode los te trekken van de frontendvernieuwing en verder te ontwikkelen in een nieuw project.

Feedback en doorontwikkeling

Dark mode als apart project was het startschot voor het inlossen van 25 jaar aan design- en stylingdebt op Tweakers. Het resultaat hiervan is nu zichtbaar en gebaseerd op wensen vanuit de community (reacties onder .plans en forumposts door de jaren heen), een poll op de frontpage, een voorkeurstest met meer dan 11.000 reacties en een langdurige alfatest onder de crew en HQ. Desondanks kan het zijn dat we ergens iets over het hoofd hebben gezien of dat je wensen of suggesties hebt ten aanzien van de vormgeving. Daarvoor kun je terecht in dit speciale feedbacktopic op het forum.

Tijdens de ontwikkeling van dark mode zijn we tot slot ook aangelopen tegen oude code en elementen die wat ingrijpender zijn om aan te passen. Daarom zitten in deze release nog niet alle verbeteringen die we voor ogen hadden, bijvoorbeeld het vernieuwen van de smileys. Updates daarover kun je volgen in toekomstige development-iteraties.