Fix hydration error (via AI)

fileformat · fileformat · commit 9ed6e9dfe616 · 2026-06-09T11:41:35.000-04:00
diff --git a/app/components/ui/color-mode.tsx b/app/components/ui/color-mode.tsx
@@ -13,9 +13,20 @@ export function ColorModeProvider(props: ColorModeProviderProps) {
   )
 }
 
+function useHasMounted() {
+  const [hasMounted, setHasMounted] = React.useState(false)
+
+  React.useEffect(() => {
+    setHasMounted(true)
+  }, [])
+
+  return hasMounted
+}
+
 export function useColorMode() {
+  const hasMounted = useHasMounted()
   const { resolvedTheme, setTheme } = useTheme()
-  const colorMode = resolvedTheme === "dark" ? "dark" : "light"
+  const colorMode = hasMounted && resolvedTheme === "dark" ? "dark" : "light"
   const toggleColorMode = () => {
     setTheme(colorMode === "light" ? "dark" : "light")
   }
@@ -28,8 +39,9 @@ export function useColorMode() {
 }
 
 export function useColorModeValue<T>(light: T, dark: T) {
+  const hasMounted = useHasMounted()
   const { resolvedTheme } = useTheme()
-  return resolvedTheme === "dark" ? dark : light
+  return hasMounted && resolvedTheme === "dark" ? dark : light
 }
 
 export function ColorModeIcon() {
diff --git a/app/root.tsx b/app/root.tsx
@@ -15,7 +15,7 @@ export const links: LinksFunction = () => [{ rel: "stylesheet", href: appStylesH
 
 function MyLayout({ children }: { children: React.ReactNode }) {
     return (
-        <html lang="en">
+        <html lang="en" suppressHydrationWarning>
             <head>
                 <meta charSet="utf-8" />
                 <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -89,7 +89,7 @@ export function ErrorBoundary() {
     }
 
     return (
-        <html lang="en">
+        <html lang="en" suppressHydrationWarning>
             <head>
                 <meta charSet="utf-8" />
                 <meta name="viewport" content="width=device-width, initial-scale=1" />
diff --git a/app/routes/view[.]html/IconList.tsx b/app/routes/view[.]html/IconList.tsx
@@ -13,6 +13,7 @@ function IconCard({ imageCss, size, url }: ICardProps) {
     <div className="flex flex-col items-center lg:items-end">
       <img
         alt={`${size} for ${url}`}
+        crossOrigin="anonymous"
         src={url}
         style={{ ...imageCss, width: `${size}pt`, height: `${size}pt` }}
       />
diff --git a/app/routes/view[.]html/route.tsx b/app/routes/view[.]html/route.tsx
@@ -237,6 +237,7 @@ export default function ViewPage() {
           ) : (
             <img
               alt={url}
+              crossOrigin="anonymous"
               src={url}
               style={{
                 objectFit: "cover",

Original file line number	Diff line number	Diff line change
`@@ -13,9 +13,20 @@ export function ColorModeProvider(props: ColorModeProviderProps) {`
`13`	`13`	`)`
`14`	`14`	`}`
`15`	`15`
	`16`	`+function useHasMounted() {`
	`17`	`+ const [hasMounted, setHasMounted] = React.useState(false)`
	`18`	`+`
	`19`	`+ React.useEffect(() => {`
	`20`	`+ setHasMounted(true)`
	`21`	`+ }, [])`
	`22`	`+`
	`23`	`+ return hasMounted`
	`24`	`+}`
	`25`	`+`
`16`	`26`	`export function useColorMode() {`
	`27`	`+ const hasMounted = useHasMounted()`
`17`	`28`	`const { resolvedTheme, setTheme } = useTheme()`
`18`		`- const colorMode = resolvedTheme === "dark" ? "dark" : "light"`
	`29`	`+ const colorMode = hasMounted && resolvedTheme === "dark" ? "dark" : "light"`
`19`	`30`	`const toggleColorMode = () => {`
`20`	`31`	`setTheme(colorMode === "light" ? "dark" : "light")`
`21`	`32`	`}`
`@@ -28,8 +39,9 @@ export function useColorMode() {`
`28`	`39`	`}`
`29`	`40`
`30`	`41`	`export function useColorModeValue<T>(light: T, dark: T) {`
	`42`	`+ const hasMounted = useHasMounted()`
`31`	`43`	`const { resolvedTheme } = useTheme()`
`32`		`- return resolvedTheme === "dark" ? dark : light`
	`44`	`+ return hasMounted && resolvedTheme === "dark" ? dark : light`
`33`	`45`	`}`
`34`	`46`
`35`	`47`	`export function ColorModeIcon() {`