Background information

Welcome to the Dark Side: all there is to know about Digitec Galaxus’s new dark mode

3.10.2023

Translation: Katherine Martin

The Digitec Community has been waiting for this moment for what feels like an eternity. For a long time, it was unclear whether it’d ever happen. Then, a brave team stepped up to the plate. Now, they’re proud to present cue rapturous applause... dark mode.

Digitec Galaxus has unveiled the dark version of its online shops. And let’s just say, implenting the feature took a tad longer than it did to write that sentence. However, we’re now finally able to announce its introduction.

Company news
Digitec and Galaxus now available in dark mode
by Catherine Barth

Naturally, dark mode is now available for you to use. If it hasn’t been activated automatically, you can enable it at the bottom of the page.

But why did it take us so long to make dark mode a reality? And why do we even need a dark version of our online shops? Taking the lead on the dark mode project were Lead UX Designer Leonardo Hauschild and Product Owner Tobias Grundman. In this interview, they explain why «the path to the Dark Side» was so long. After all, we couldn’t simply change all of our shop colours over night.

Dark mode on Digitec.
Source: Michelle Brändle

Dark mode on Galaxus.
Source: Michelle Brändle

Why does Digitec Galaxus need dark mode?

Tobias explains: «It definitely looks cool, but it can also be easier on the eyes. That’s true for evening use, as well as for people with night blindness (page in German). And if you’re using an OLED display, you can actually preserve your battery in dark mode. Of course, it’s also exciting to be able to implement something so rare – hardly any online shops out there have dark mode. In any case, the important thing is that there are enough users interested in it. The Community has been really vocal about it, which also played a crucial role in the decision.»

Dark mode has kicked off a lot of Community discussion.
Source: Michelle Brändle

How did it actually end up being implemented?

Leonardo explains: «We’ve been discussing dark mode internally for a number of years now. Projects like our widescreen initiative went on to lay the foundations. The goal of that project was to display our website correctly and in high resolution, even on large screens. This meant our engineers had to start tinkering with the layout of the website. Despite the scale and complexity of our shops, it gradually became clear that implementing dark mode was doable too.»

Behind the scenes
Galaxus and digitec, now for widescreen
by Alex Hämmerli

Tobias continues: «The project became a sure thing in June 2022. We estimated it’d take about 1,000 working days to implement. In cases like these, you need think carefully about whether it’ll be worth it. We also had to consider whether dark mode would actually be used in the end. There had to be concrete proof of that, so we did an analysis. This was intended to show how many users actually use dark mode on computers and smartphones. It turned out to be a total of 25-40 per cent of our users. So implementing the feature was worth it for a substantial proportion of people. Then, we were faced with the question of what it would take to implement.»

Doesn’t it just mean «reversing» all the colours?

Tobias explains: «It’s not as simple as that, unfortunately. That’s why we have an entire team responsible for the visualisation of our online shops. Our framework team, which we call Team Infinity, mostly consists of frontend developers. They take care of the Digitec Galaxus website’s overall layout. This includes the website header, side columns and the footer. These elements, as well as all the other components of the online shop, need a predefined colour. Grouped together, these predefined colour schemes are referred to as «themes». Digitec and Galaxus use two separate themes that match the colours of their respective logos. Digitec’s theme combines a lot of blue and red and has a blue bar at the top. The bar at the top of the Galaxus website contains multiple colours, while the rest is primarily white, black and grey.»

Digitec’s theme consists of plenty of blue, red and grey.
Source: Michelle Brändle

The Galaxus theme, on the other hand, is a bit more colourful.
Source: Michelle Brändle

There are thousands of areas within our shops’ complex structure where colours are defined. More and more components have been added over time, with each being assigned an appropriate colour in the shop’s code.

It’s not always clear in every single part of the code which component is being referred to. «Background» is self-explanatory, but we’ve certainly got more than a few «buttons». And dark mode doubles that amount. You begin to lose track, and things get far too complex. That’s why we needed a system that could organise and assign colours efficiently.»

Leonardo adds: «During a separate project to develop a design system, we managed to break down a few obstacles, laying a good foundation for the dark mode project.»

Couldn’t we have used a design system like this 10 years ago?

«Sure,» Tobias replies. «But we also would’ve created constraints and complexity that wouldn’t have delivered the desired result. New elements have continuously been added over time, and having to tackle all those colour definitions manually would’ve created way too much capacity for error. So the code needed to be revised in order to automate colour assignment.»

So what was your next step?

Tobias explains: «It was our job to build a system that’d allow us to define colours for dark mode as well as the Galaxus and Digitec sites. From design, to development, to end result, it had to be super efficient – not a word you could use to describe our previous system. The new version was intended to completely replace the old one, allowing us to weed out as many errors as possible. To make sure we didn’t miss anything, the designers had to plough through all the components and determine which colour to use, right down to the very last elements.»

But one thing isn’t quite so easily rendered in dark mode, right?

Leonardo knows exactly what I’m talking about: «We’re an online shop. So obviously, our site consists of a huge number of product images. Each product appears on a white background. This is something we’d been grappling with for a while because this issue is really important to us. If you have a black product on a black background, the item’s contours and shades are difficult to see. The best result in terms of user friendliness is actually a white background. That’s why we’re sticking with this version for now.»

We’ll be keeping product images on a white background for the time being.
Source: Michelle Brändle

Dark mode is here Did making dark mode a reality really take 1,000 days of work?

Tobias stops to think for a moment: «I can’t quite give you a definitive answer on that yet. I think it was round about 700 days, give or take. But we’ve only just come to the most crucial part. We’ve now made dark mode available to our Community. I’m excited to see what they make of it. Virtually turning the display dark at the push of a button is a pretty aggressive change, and mistakes could always creep in. That means Galaxus and Digitec are counting on frank, high-quality feedback from the Community to help us put the finishing touches to dark mode.»

What a great way to wrap things up. Thanks very much to both of you! All I can say is: dark mode awaits!

So, good folks of the Community, it’s your turn now. What do you think of our dark mode? Tobias, Leonardo and everyone in our UX Design and Frontend Development Teams are keen to read your feedback in the comments.

134 people like this article

Michelle Brändle

Editor

Michelle.Braendle@digitecgalaxus.ch

In my world, Super Mario chases Stormtroopers with a unicorn and Harley Quinn mixes cocktails for Eddie and Peter at the beach bar. Wherever I can live out my creativity, my fingers tingle. Or maybe it's because nothing flows through my veins but chocolate, glitter and coffee.

Background information

Interesting facts about products, behind-the-scenes looks at manufacturers and deep-dives on interesting people.

Show all

These articles might also interest you

Background information
A craftsman in a Soviet secret laboratory: preview of "The Lift"
by Philipp Rüegg
Background information
Playing "The Outer Worlds 2": smaller than "Starfield", but with more humour
by Philipp Rüegg
Background information
"Rimworld" was yesterday? This is how "Ascent of Ashes" fares
by Kim Muntinga