Skip to content

Commit

Permalink
feat(theme-provider): Suppress hydration warning and add String.raw
Browse files Browse the repository at this point in the history
This commit suppresses the hydration warning in the browser by adding `suppressHydrationWarning` to the script tag. This is necessary to prevent the browser from throwing a warning about extra attributes from the server, specifically `nonce`.

Additionally, `String.raw` has been added for the manually injected script content. This is used to get the raw string form of template strings, which is useful when you want to avoid processing of escape sequences.
  • Loading branch information
TheAifam5 committed Jul 10, 2024
1 parent 731f9a9 commit 0f1a25e
Showing 1 changed file with 2 additions and 1 deletion.
3 changes: 2 additions & 1 deletion packages/remix-themes/src/theme-provider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ export function ThemeProvider({
return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
}

const clientThemeCode = `
const clientThemeCode = String.raw`
(() => {
const theme = window.matchMedia(${JSON.stringify(prefersLightMQ)}).matches
? 'light'
Expand Down Expand Up @@ -205,6 +205,7 @@ export function PreventFlashOnWrongTheme({
// is finished loading.
dangerouslySetInnerHTML={{__html: clientThemeCode}}
nonce={nonce}
suppressHydrationWarning
/>
)}
</>
Expand Down

0 comments on commit 0f1a25e

Please sign in to comment.