palantir/blueprint

`auto` option for light/dark theme (CSS, media-queries)

Open

#5814 opened on Dec 28, 2022

View on GitHub
 (1 comment) (0 reactions) (0 assignees)TypeScript (20,263 stars) (2,167 forks)batch import
P2Package: coreType: enhancementhelp wanted

Description

Problem

If you change body class on client-side with JS, to determine theme automatically, you'll get flickering.

Something like this, as an example:

dark-mode-flash

Which means: white by default, dark only when page will let JS do its work.

Instead of JS, it should be done with CSS media queries. This will remove flickering forever.

Solution

Good example how it's done is Github Primer CSS, look here:

https://primer.style/css/support/theming

They have options: dark, light, and auto, – first two forcing the style, say, when you need to set it from user preferences. The last one will let browser determine it automatically... FROM CSS, using media queries, – that's important one again, because it will save you from getting flickering bug when browser tries to automatically set proper theme. Automatic theming shouldn't be done JS-way. Should be done CSS-way.

Similar issues

Another similar issue (solving this one will solve his use-case too):

Contributor guide

Tech stack
cssreacttypescript
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
CSS media queriesbasic CSS themingfamiliarity with React components
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
65
Research direction
Investigate Blueprint's current theming approach in files like `src/common/theme.ts` or `src/*.scss`. Study the Primer CSS theming pattern (https://primer.style/css/support/theming). Implement an 'auto' option that uses the `prefers color scheme` media query to automatically set the theme without JavaScript flickering, ensuring compatibility with existing `dark` and `light` classes.