Skip to content

Commit

Permalink
revalidate on theme pref change
Browse files Browse the repository at this point in the history
  • Loading branch information
kentcdodds committed Jun 12, 2023
1 parent 1de6c83 commit b1ad014
Showing 1 changed file with 4 additions and 1 deletion.
5 changes: 4 additions & 1 deletion app/utils/client-hints.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
*/
import * as React from 'react'
import { useRequestInfo } from './request-info.ts'
import { useRevalidator } from '@remix-run/react'

export const clientHints = {
theme: {
Expand Down Expand Up @@ -77,18 +78,20 @@ export function useHints() {
* inaccurate value.
*/
export function ClientHintCheck({ nonce }: { nonce: string }) {
const { revalidate } = useRevalidator()
React.useEffect(() => {
const themeQuery = window.matchMedia('(prefers-color-scheme: dark)')
function handleThemeChange() {
document.cookie = `${clientHints.theme.cookieName}=${
themeQuery.matches ? 'dark' : 'light'
}`
revalidate()
}
themeQuery.addEventListener('change', handleThemeChange)
return () => {
themeQuery.removeEventListener('change', handleThemeChange)
}
}, [])
}, [revalidate])

return (
<script
Expand Down

0 comments on commit b1ad014

Please sign in to comment.