Proposal: Working with the new dark mode while supporting the old
Term | Definition |
---|---|
Experiment |
The current dark mode experience, which is also referred to as “alpha”. |
Tokenized |
The new dark mode experience. |
Beta |
The first public release of the tokenized dark mode experience. |
Read more about feature management in highlighting feature versions. |
What to do with the current alpha?
One of our challenges with developing a dark mode suitable for GA is how to work alongside the existing alpha, recently renamed to experiment, in the early stages of development.
There are too many users to remove access completely. And the current implementation does not provide a stable foundation for building on because:
- It’s based on a model where primitive variables have their meaning redefined, which can lead to unpredictability. For example, if
red-500
means#cc0000
in light mode, and#cc1866
in dark mode, then we have no stable reference. - The goal of the current appearance was to generally have a dark UI (which was achieved), but it doesn’t adhere to any established design principles for dark UI or accessibility. For example, determining how surfaces and elements react to light, or contrast ratios for color combinations.
Trying to build on this unstable foundation is likely to have the following negative outcomes:
- A mix of existing and new styles will make it harder to visibly identify migration progress.
- A mix of existing and new styles will make it harder to identify source of visual bugs.
- Creating additional workarounds will slow progress on the new experience, as these will need to be created to try and keep the users of the existing experience consistent.
We should find a way to build the dark mode freely using a token driven approach, without disrupting the users of the existing experiment.
At the point we are ready to move dark mode to beta, we can take that option away and migrate users straight to the beta tokenized experience.
While we create tokens for dark mode, we are not expecting major changes to light mode.
Proposal
Are we able to do this using something like the following?
This way, the light and existing experiment experience should stay the same, but we are free to adjust the tokenized experience with no consequences.
Lets take a look in more detail:
Here’s a visual representation of the output:
When we are ready to say goodnight to the existing experiment, we can remove the experiment mode, and remove modes completely on the primitives.
I think this interim support will also work for more complex styles like we’ve been exploring for alert. As long as the current experiment mode mirrors the light mode, then we should have no interruption to users when migrating, and no limitations on what we can do in the tokenized beta.
Consider the following:
Here’s the token breakdown, focusing on the background: