From 4f0399b50b23ec24ded67681f3290a8fbf653920 Mon Sep 17 00:00:00 2001 From: Sutu Sebastian <41998826+SutuSebastian@users.noreply.github.com> Date: Thu, 19 Oct 2023 18:58:10 +0300 Subject: [PATCH] feat: `ThemeModeScript` - avoid page flicker on reload on SSR application (NextJS, Remix) (#1056) * feat: create `ThemeModeScript` to avoid page flicker on reload when dark mode is set; add script to root layout on homepage + docs * refactor: move `ThemeModeScript` into `components` directory --------- Co-authored-by: Sebastian Sutu --- app/layout.tsx | 4 ++ .../ThemeModeScript/ThemeModeScript.tsx | 42 +++++++++++++++++++ src/components/ThemeModeScript/index.ts | 1 + src/index.ts | 1 + 4 files changed, 48 insertions(+) create mode 100644 src/components/ThemeModeScript/ThemeModeScript.tsx create mode 100644 src/components/ThemeModeScript/index.ts diff --git a/app/layout.tsx b/app/layout.tsx index dc7c805da..86852a680 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -5,6 +5,7 @@ import { Inter as InterFont } from 'next/font/google'; import type { FC, PropsWithChildren } from 'react'; import '~/app/docs.css'; import '~/app/style.css'; +import { ThemeModeScript } from '~/src'; const interFont = InterFont({ subsets: ['latin'], @@ -56,6 +57,9 @@ export const metadata: Metadata = { const RootLayout: NextPage = ({ children }) => { return ( + + + {children} diff --git a/src/components/ThemeModeScript/ThemeModeScript.tsx b/src/components/ThemeModeScript/ThemeModeScript.tsx new file mode 100644 index 000000000..a314d5af3 --- /dev/null +++ b/src/components/ThemeModeScript/ThemeModeScript.tsx @@ -0,0 +1,42 @@ +import React from 'react'; +import type { ThemeMode } from '../../helpers/use-theme-mode'; + +export interface ThemeModeScriptProps extends React.ComponentPropsWithoutRef<'script'> { + mode?: ThemeMode; +} + +export const ThemeModeScript = ({ mode, ...others }: ThemeModeScriptProps) => { + return ( +