Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Theme flashing v0.3.0 #281

Open
andrew-arkhipov opened this issue Apr 1, 2024 · 6 comments
Open

Theme flashing v0.3.0 #281

andrew-arkhipov opened this issue Apr 1, 2024 · 6 comments

Comments

@andrew-arkhipov
Copy link

andrew-arkhipov commented Apr 1, 2024 •
edited

Exact same issue as in #85 is being seen on v0.3.0. Users have complained that changing from dark mode to light mode causes rapid flashing between the two (as seen in the video above), and the only fix is closing the browser. Sometimes it also occurs randomly - the user doesn't click or interact with anything and all of a sudden the theme starts flashing back and forth. Most of the reports are coming from users who are using the new Arc browser, so perhaps there's some conflict between next-themes' and Arc's implementations.

I haven't been able to reproduce locally, but please see #85 to understand what it looks like. I'm using the resolvedTheme variable to determine which theme to show.

Usage below:

const MyApp: NextComponentType<AppContext, AppInitialProps, AppLayoutProps> = ({
  Component,
  pageProps,
}: AppLayoutProps) => {
  return (
    <ThemeProvider enableSystem={false} attribute="class" disableTransitionOnChange>
      <Component {...pageProps} />
    </ThemeProvider>
  )
}
@andrew-arkhipov andrew-arkhipov changed the title Theme flashing Theme flashing v0.3.0 Apr 2, 2024
@andrew-arkhipov
Copy link
Author

cropped_flashing_bug.mp4

@pacocoursey here's a reproduction. Any ideas on what this can be? Thank you!

@peteretelej
Copy link

are you using a custom ThemeProvider component that wraps the next-themes ThemeProvider in a "use client" client side component? This was a previous workaround that's no longer needed on v.0.3.0, if you still have it I suspect it's causing this.

You can directly import { ThemeProvider } from "next-themes"; directly in your main layout

@andrew-arkhipov
Copy link
Author

are you using a custom ThemeProvider component that wraps the next-themes ThemeProvider in a "use client" client side component? This was a previous workaround that's no longer needed on v.0.3.0, if you still have it I suspect it's causing this.

You can directly import { ThemeProvider } from "next-themes"; directly in your main layout

@peteretelej I am not, but thanks for the suggestion. For reference, here's my implementation:

import '@/styles/globals.css'
import '@radix-ui/themes/styles.css'

import React from 'react'
import Head from 'next/head'
import dynamic from 'next/dynamic'
import type { NextComponentType } from 'next'
import { AppContext, AppInitialProps, AppLayoutProps } from 'next/app'
import { Inter } from 'next/font/google'
import { Theme } from '@radix-ui/themes'
import { ThemeProvider } from 'next-themes'
import { AuthProvider } from '@propelauth/react'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

import RouteProgressBar from '@/components/common/RouteProgressBar'
import { AUTH_URL } from '@/constants/env'
import { withAuth } from '@/helpers/auth'

const DynamicSidebar = dynamic(() => import(`@/components/common/Sidebar`), {
  ssr: false,
})
const DynamicToast = dynamic(() => import('@/components/common/Toast'), {
  ssr: false,
})

const inter = Inter({ subsets: ['latin'] })
const queryClient = new QueryClient()

const MyApp: NextComponentType<AppContext, AppInitialProps, AppLayoutProps> = ({
  Component,
  pageProps,
}: AppLayoutProps) => {
  const AuthComponent = withAuth(Component)
  return (
    <>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      </Head>
      <ThemeProvider attribute="class" disableTransitionOnChange>
        <AuthProvider authUrl={AUTH_URL}>
          <QueryClientProvider client={queryClient}>
            <Theme className={inter.className}>
              <RouteProgressBar />
              <AuthComponent {...pageProps} />
              <DynamicSidebar />
              <DynamicToast />
            </Theme>
          </QueryClientProvider>
        </AuthProvider>
      </ThemeProvider>
    </>
  )
}

export default MyApp

@lodado
Copy link

lodado commented May 2, 2024 •
edited

Are you using the Content Security Policy (CSP) option? It worked when I turned off the options.

@andrew-arkhipov
Copy link
Author

Are you using the Content Security Policy (CSP) option? It worked when I turned off the options.

@lodado I’m not sure if I am, but that seems like something that’s only configurable by a given user at the browser level, and if this is happening for multiple users, it doesn’t seem like an actual fix. Thanks for the suggestion, though, and please correct me if I’m misunderstanding!

@patelvivekdev
Copy link

I am experiencing a similar issue with Next Themes. When I deploy my project to production and enable dark mode, the page initially loads in light mode before switching to dark mode after a hard refresh.

patelvivek.dev.mp4

I have provided the following links for reference:
Link to my website: https://patelvivek.dev/
Repository link: https://github.com/patelvivekdev/patelvivek.dev

Additional information:
I am using Next.js Canary with Partial Page Rendering (PPR) enabled.

I would greatly appreciate any assistance in resolving this issue.

@patelvivekdev patelvivekdev mentioned this issue May 5, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@peteretelej @lodado @patelvivekdev @andrew-arkhipov