Join Dark Site – Native Dark Mode for Tweakers – IT Pro – .Plans

Tweakers now has a native dark mode. You can activate this theme via the display options in the gear icon at the top right or, if you are logged in, via your profile. By default, your device or operating system settings are taken over. Dark Mode is available to all Tweakers users, whether you have a subscription, are logged in or out, or have karma.

Also new lighting mode

Dark mode isn’t the only thing that has changed visually. The bright theme of Tweakers has also had a makeover, inextricably linked to the development of dark mode. After all, to effectively implement dark mode and maintain two themes in the future, it was essential to consolidate the colors. This means that the colors have been “blended” and there are far fewer different colors used than before. By using CSS variables, we now have a consistent use of color across the site in text and buttons, for example. The tracker and the footer have therefore now also received the same background color. The appearance has therefore become slightly different on some pages, but looking ahead, it is also much easier to maintain.

Dark mode development

Given that Dark Mode has been the most requested feature on Tweakers for years and custom CSS snippets have been available for quite some time, the question is of course why it took so long to develop. For that, you have to go back in time. Tweakers 7 was launched in 2012. This design contained more white space, which was perceived as unpleasant by many. In response to this, there were settings to set a background color, among other things. Starting in 2016, dark mode has become increasingly popular across software, apps, and operating systems, becoming available as a native setting in Windows (2016) and macOS (2018). Android and iOS followed in 2019.

During this period, a “night mode” was also requested in a subject which, with 688 raised inches, is by far the most popular to date. feature request East. We first looked at these developments; with the knowledge of that time dark mode might be hype exploding again and we were also curious about native browser support. However, the challenge for Tweakers was immediately clear; the legacy of old code and its maintainability quickly turned dark mode into a gigantic project. Tweakers consists of a large number of pages and elements, both popular and obscure, all of which had to be modified with an implementation that would also be easy to maintain in the future.

Interface refresh

The introduction of custom CSS snippets in 2019 made it easy to share custom CSS with each other. It also meant the birth of Tweakers Perfect Dark, still the most popular snippet. During this period, there were other development priorities than dark mode and a lot of time and attention was spent, for example, on the further development of the Pricewatch. In 2020, we launched a refresh of the interface, with the main goal of refactoring the old code and modernizing the configuration. Reusable components were one of them, and we also looked at the technical aspects of setting up different themes, like a dark theme.

However, with the homepage refresh, dark mode was left out of reach, as we didn’t want dark mode on a single page of the site. We didn’t want to introduce dark mode until most of the site had been updated. However, when the new homepage went live, we realized that it would take years if we had to wait with dark mode for the interface of the rest of the site to refresh. In the usability tests, surveys, and quarterly studies we did, the call for dark mode was growing louder, even if the research wasn’t related to the design. That’s why we decided at the beginning of this year to separate the dark mode from the interface renewal and develop it further in a new project.

Feedback and further development

Dark Mode as a separate project was the go-to signal to redeem 25 years of design and styling debt on Tweakers. The result of this one is now visible and based on the wishes of the community (comments under .plans and forum posts over the years), a front-page poll, a preference test with more than 11,000 reactions and a long-term alpha testing among crew and HQ. Nevertheless, it is possible that we have forgotten something or that you have wishes or suggestions regarding the design. For that, you can go to this special forum comments topic.

Finally, while developing dark mode, we also encountered some old code and more drastic things to tweak. That’s why this version does not yet contain all the improvements we had in mind, such as the update of the smileys. You can follow updates on this in future development iterations.