Flashing with styled-components

[talohana]

I am using styled-components and use-dark-mode with default config, both the plugin and the hook itself. When dark mode is enabled and I refresh the page I still get colors flashing.

I have a Layout.tsx component that includes:

const GlobalStyles = createGlobalStyle`
    body {
        transition: all 0.5s linear;

        &.dark-mode {
          background-color: #1f1f1f;
          color: #dfe6e9;
        }

        &.light-mode {
          background-color: #ecf0f1;
          color: #1f1f1f;
        }
    }
`

which is then included in the layout component:

export const Layout = ({ children }) => {
    <div>
        <GlobalStyles />
        {children}
    </div>
}

[AlfieJones]

Hi, I'm having a similar issue. How did you fix it?

[talohana]

Hi, I'm having a similar issue. How did you fix it?

Honestly, I can't remember. I migrated to tailwind css which have dark mode support.