Tweakers now has the original dark mode. You can enable this theme through 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 take over. Dark mode is available to all users on Tweakers, regardless of whether you have a subscription, are logged in or out, or how much karma you have.
Also put a new light
Dark mode isn’t the only thing that has changed visually. The light theme for Tweakers has also been given a new look, closely related to the development of the dark mode. After all, in order to efficiently implement the dark mode and keep two versions in the future, it was necessary to merge the colors. This means that the colors have been ‘merged’ and there are far fewer different colors used than before. With CSS variables, we now have a consistent use of colors across the entire site in text and buttons, for example. Thus, the tracker and footer have now received the same background color as well. So the look is a bit different on some pages, but it’s also easier to maintain looking into the future.
Dark mode development
Since dark mode has been the most requested feature on Tweakers for years, and custom CSS snippets have been available for it for quite some time, the question is of course why it took so long to develop. So we have to go back in time. Tweakers 7 was released in 2012. This design contained more white space, which many considered unpleasant. In response, there were settings for setting the background color, among other things. Starting in 2016, dark mode has become increasingly popular in software, apps, and operating systems, and is available as a native setting in Windows (2016) and macOS (2018). Android and iOS followed in 2019.
During that period, a “night mode” was also requested in a thread that, with 688 likes, is the most popular to this day. Request specifications He is. We first looked at these developments. Knowing that time, dark mode could be a buzz that would explode again, and we’re also curious about native support from browsers. However, the challenge facing Tweakers was immediately apparent; The legacy of legacy code and its maintainability quickly turned from dark mode into a giant project. Tweakers consist of a huge number of pages and elements, both common and obscure, all of which must be modified with an application that is also easy to maintain in the future.
Front end update
The introduction of custom CSS snippets in 2019 made it possible to easily share custom CSS with each other. It also meant the birth of Tweakers Perfect Dark, still the most popular snippet. In this period, there were other priorities in terms of development than the dark mode and a lot of time and attention was devoted, for example, to the further development of Pricewatch. In 2020 we started a front-end update, with the main goal of refactoring legacy code and updating setup. Reusable components were part of that, and we also looked at the technicalities of setting up different themes, such as the dark theme.
However, with the front page refresh, dark mode was left out of scope, as we didn’t want dark mode on only one page of the site. We didn’t want to introduce dark mode until most of the site had been updated. However, when the new front page went live, we knew it would take years if we had to wait with dark mode to update the front end of the rest of the site. In our usability tests, surveys, and quarterly studies, the call for dark mode was louder, even if the research wasn’t about design. That is why at the beginning of this year we decided to separate the dark mode from the front-end renovation and develop it into a new project.
Feedback and further development
The dark mode as a separate project was the go-ahead for Tweakers’ 25-year payback and design debt. The outcome of this is now visible and based on community wishes (comments within plans and forum posts over the years), a front page poll, a preference test with over 11,000 reactions and a long term alpha test between crew and headquarters. However, it is possible that we have missed something or that you have wishes or suggestions regarding the design. So you can go to the private comments thread in the forum.
Custom web format language
Are you using custom CSS? Check first if this is not the culprit before reporting the error to us. The custom CSS snippets are created and maintained by the community. With over five hundred clippings available, it’s impossible for us to take that into account. If something is no longer working correctly, you can contact the builder via the CSS snippet page. We have previously reported the most popular snippet generators related to dark mode. Thanks to color mixing and the use of CSS variables, implementing and maintaining custom CSS is now easier.
Finally, during the development of the dark mode, we also encountered outdated code and elements that are a little tighter to adjust. That’s why this version doesn’t yet have all the improvements we had in mind, such as updated smileys. You can stay tuned for updates on this in future development iterations.
