Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[SSR] Color mode flash

See original GitHub issue

It looks like the changes we made to fix color mode in 1.0.0-rc.3 worked for static generation, but also broke SSR.

See https://personal-react-boilerplate.now.sh/ for an example.

Issue Analytics

State:
Created 3 years ago
Comments:18 (8 by maintainers)

Top GitHub Comments

7reactions

trevorbladescommented, Jan 29, 2021

Update: I turned the technique above into an NPM library to make it simple to implement. You can read more about that effort over here.

import {FlashlessScript, flashless} from 'chakra-ui-flashless';
import {extendTheme} from '@chakra-ui/react';

// 1. extend your theme with `flashless` function
const theme = extendTheme(flashless({...overrides}));

// 2. insert a script tag at the top of your HTML `<body>`
<FlashlessScript theme={theme} />

5reactions

trevorbladescommented, Nov 13, 2020

I was able to accomplish a non-flashing color mode implementation with Chakra using CSS variables and a method like the one in @joshwcomeau’s article on the subject. I defined a bunch of CSS variables based on theme colors in a pre-body script, and changed my Chakra theme to use those variables instead of theme keys.

Here’s a gist with the relevant parts. I’ve added a few comments in there explaining some of the things I do. I poked around Bumbag and noticed they were using color variables in a similar way, from what I could tell.

I can help build this feature if the Chakra team approves of this technique, and it doesn’t negatively affect other uses of the library. It seems pretty straightforward (define CSS variables and use those in the default theme), but I could be missing something. Happy to discuss! 🙂