Go to Content
Design System
Playroom Storybook
🌹 Graz - George Design System stands in solidarity with the victims and families affected by the tragic school shooting in Graz. Our hearts go out to all those impacted by this senseless act of violence.

Dark mode announcement

Konstantin Demblin, Design System Lead

It is a major milestone, for the George Design System that all of its components for web, both in the code library as well as in the Figma design library, support dark mode!

Announcement cover image
Welcome to the dark side of design

All components have been re-worked to support dark mode.

A George business screen in dark mode

Status quo

Dark mode for GDS Web (React and Figma components) are in a good state but might benefit from polishing here and there.

Credits go to Jan for the implementation in GDS-React, GDS-Docs, Storybook and Playroom; and to Konstantin for the implementation in Figma’s Web libraries.

Honorary mentions go to Aniela, Joana R. and Albin from the design chapter for consulting along the road.

Next steps

HINT This is a big step towards dark mode, but there is still a lot to do to get the feature to its customers in George!

Whilst it is a major mile stone and a big achievement for a design system to support dark mode, it takes quite some additional efforts of all front end teams using GDS to get dark mode to its customers.

  • Designers have to review the components and file improvement tickets where necessary (#GDSWEB-4804)
  • Each frontend team has to go through their implementation and file improvement tickets (especially if custom implementations are in place)
  • Every application using GDS-WEB has to implement user settings to switch and store dark mode settings and hand these settings over to other external pages (e.g. the local George stores)
  • Any other functionality needed to make this work properly for the customer

How to…

… toggle dark mode in the different tools and applications?

Switch to dark mode in GDS-Documentation

Question: How to switch a single example in GDS-Documentation to dark mode? Answer: Move over the example in GDS-Docs and toggle the dark-mode/light-mode switch.

Question: How to switch all examples in GDS-Documentation at once to dark mode? Answer: Open the Settings panel in GDS-Docs and change the value of “Appearance (React)” to “Use Dark Theme”.

Switch to dark mode in Playroom

Question: How to switch an example in Playroom to dark mode? Answer: Change the theme in Playroom to “DARK”.

Switch to dark mode in Storybook

Question: How to switch Storybook to dark mode? Answer: Switch between “Light mode”/”Dark mode”.

Switch to dark mode in Figma

Question: How to switch to dark mode in Figma? Answer: In the Design panel go to “Appearance” and switch the “G-Web-Primitives”’ “🎨-Theme” to “Dark”.

Switch to dark mode in George-FAT

Kudos to Matej for implementing a toggle to George’s test environments.

Question: How to switch George test environments to dark mode? Answer: Switch on “Dark mode” in the settings panel.
In case you have any questions, please do not hesitate to reach out.

Thank you to everyone involved for their outstanding work on dark mode for GDS! 👏