Custom Theme is not SSR? App styles flicker on page load. #286

eleazareramos · 2022-02-15T14:45:41Z

eleazareramos
Feb 15, 2022

Hi there, after following the documentation on creating a custom theme, it seems like the theme is not injected into the document server side. It is served with the default theme, and then when loaded on the client, it converts to the new theme.

See in this video how it starts with the default primary blue for a quick second, and then the custom theme kicks in changing it to the desired brand color.
https://user-images.githubusercontent.com/25910203/154084143-c1af33d2-6b0f-4b8d-b0d9-ef6993a2b2fd.mov

Here is my code:

pages/_app.js

import theme from '../styles/theme'
import { NextUIProvider } from '@nextui-org/react'

function App({ Component, pageProps }) {
  return (
    <NextUIProvider theme={theme}>
      <Component {...pageProps} />
    </NextUIProvider>
  )
}

export default App

pages/_document.js

import Document, { Html, Head, Main, NextScript } from 'next/document'
import { CssBaseline } from '@nextui-org/react'

class AppDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return {
      ...initialProps,
      styles: <>{initialProps.styles}</>,
    }
  }

  render() {
    return (
      <Html lang="en">
        <Head>{CssBaseline.flush()}</Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default AppDocument

styles/theme.js

import { createTheme } from '@nextui-org/react'

export default createTheme({
  type: 'light',
  theme: {
    colors: {
      primary: '#3f5765'
    }
  },
})

In other UI frameworks, such as styled-components, there is a provided method to produce a ServerStyleSheet and load it into pages/_document.js (docs here) but it seems like that concept isn't present with NextUI.

Am I missing something?

Answered by jrgarciadev

Feb 16, 2022

Hey @eleazareramos I was looking into this subject and you are right NextUI has a flash theme switch when you set custom values, in the meanwhile, you can use next-themes for fixing it as follows:

// _app.js

import { createTheme, NextUIProvider } from "@nextui-org/react";
import { ThemeProvider as NextThemesProvider } from "next-themes";

const customTheme = createTheme({
    type: "dark",
    theme: {
        colors: {
	   primary: "#AAFFEC",
        },
    },
});

function App({ Component, pageProps }) {
  return (
    <NextThemesProvider
	  defaultTheme="system"
	  attribute="class"
	  value={{
	    dark: customTheme.className,
	  }}
    >
	<NextUIProvider>
           <Component {...p…

View full answer

jrgarciadev · 2022-02-16T12:40:12Z

jrgarciadev
Feb 16, 2022
Maintainer

Hey @eleazareramos I was looking into this subject and you are right NextUI has a flash theme switch when you set custom values, in the meanwhile, you can use next-themes for fixing it as follows:

// _app.js

import { createTheme, NextUIProvider } from "@nextui-org/react";
import { ThemeProvider as NextThemesProvider } from "next-themes";

const customTheme = createTheme({
    type: "dark",
    theme: {
        colors: {
	   primary: "#AAFFEC",
        },
    },
});

function App({ Component, pageProps }) {
  return (
    <NextThemesProvider
	  defaultTheme="system"
	  attribute="class"
	  value={{
	    dark: customTheme.className,
	  }}
    >
	<NextUIProvider>
           <Component {...pageProps} />
	</NextUIProvider>
    </NextThemesProvider>
  );
}

export default App;

We will try to fix this as soon as possible 👍🏻

3 replies

eleazareramos Feb 16, 2022
Author

Great. Thank you!!!

devbravo Feb 19, 2022

Got this error after adding your solution. It did solve the flickering problem: Do not add <script> tags using next/head (see inline <script>). Use next/script instead.

antoinelin May 5, 2022

Hi, actually this fix is not working for me, the default colors and styles keeps flashing at the first render before changes to the custom ones, any idea?

devbravo · 2022-02-19T03:56:14Z

devbravo
Feb 19, 2022

Great. It worked! Question I'm in a team that's building a startup and decided to use nextui for ui. We could've chosen material ui or bootstrap, but decided to go with nextui because it looks good and it's backed by Vercel I believe, although it's still in beta, we still decided to give it a try. As a startup we dont want to much overhead regarding the technologies we use. So my question is how long will it nextui stay in beta?? When will there be a stable release

1 reply

zvictor Aug 11, 2022

Nextui is not backed by Vercel.

jansedlon · 2022-05-13T15:11:25Z

jansedlon
May 13, 2022

That is awesome, this solution even works for Remix.run!

0 replies

tjwds · 2022-06-12T15:54:19Z

tjwds
Jun 12, 2022

Is there a matching issue for this question? I also ran into this problem, and I was helped by a contributor on the Discord who pointed me here, but I'd like to not need the additional next-themes dependency. :-)

0 replies

leogilmour · 2022-10-04T17:02:24Z

leogilmour
Oct 4, 2022

This hasn't fully fixed the flash for me. (it is a less noticeable, but still there)

package.json:

"next-themes": "^0.2.1",
"@nextui-org/react": "1.0.0-beta.10",

_app.tsx

import type { ReactElement, ReactNode } from "react";
import type { NextPage } from "next";
import type { AppProps } from "next/app";
import { NextUIProvider } from "@nextui-org/react";
import myTheme from "../styles/defaultTheme";
import { ThemeProvider as NextThemesProvider } from "next-themes";

export type NextPageWithLayout<P = Record<string, never>, IP = P> = NextPage<
  P,
  IP
> & {
  getLayout?: (page: ReactElement) => ReactNode;
};

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout;
};

function MyApp({ Component, pageProps }: AppPropsWithLayout) {
  // Use the layout defined at the page level, if available
  const getLayout = Component.getLayout ?? ((page) => page);

  return (
    <NextThemesProvider
      defaultTheme="light"
      attribute="class"
      enableSystem={false}
      themes={["light"]}
      value={{
        light: myTheme.className,
      }}
    >
      <NextUIProvider>{getLayout(<Component {...pageProps} />)}</NextUIProvider>
    </NextThemesProvider>
  );
}

export default MyApp;

defaultTheme.tsx

import { createTheme } from "@nextui-org/react";

const myTheme = createTheme({
  type: "light", 
  theme: {
    colors: {
      primary: "#4D46FF", // purple
      ...
  }}
});

export default myTheme;

Any help would be GREAT -- maybe I've missed something / implemented next-themes incorrectly

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Custom Theme is not SSR? App styles flicker on page load. #286

{{title}}

Replies: 5 comments 4 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Custom Theme is not SSR? App styles flicker on page load. #286

Replies: 5 comments · 4 replies

jrgarciadev Feb 16, 2022 Maintainer

eleazareramos Feb 16, 2022 Author

Replies: 5 comments 4 replies

jrgarciadev
Feb 16, 2022
Maintainer

eleazareramos Feb 16, 2022
Author