fix: page re-render on theme detection (#104)

Author: Valerioageno

Cargo.toml

@@ -8,7 +8,7 @@ name = "tuono"
 path = ".tuono/main.rs"
 
 [dependencies]
-tuono_lib = "0.19.6"
+tuono_lib = "0.19.7"
 glob = "0.3.1"
 time = { version = "0.3", features = ["macros"] }
 serde = { version = "1.0.202", features = ["derive"] }

package.json

@@ -16,13 +16,13 @@
     "@mdx-js/react": "3.1.0",
     "clsx": "2.1.1",
     "modern-normalize": "3.0.1",
-    "next-themes": "0.4.6",
     "posthog-js": "1.215.6",
     "react": "19.0.0",
     "react-aria-components": "1.8.0",
     "react-dom": "19.0.0",
     "remark-gfm": "4.0.1",
-    "tuono": "0.19.6"
+    "tuono": "0.19.7",
+    "usehooks-ts": "3.1.1"
   },
   "devDependencies": {
     "@eslint/js": "9.21.0",

pnpm-lock.yaml

@@ -3,7 +3,7 @@ import type { TuonoLayoutProps } from 'tuono'
 
 import { Navbar } from '@/components/Navbar'
 
-import MdxProvider from '@/components/MdxProvider'
+import { MdxProvider } from '@/contexts/MdxProvider'
 
 import styles from './App.module.scss'
 

src/components/App/App.tsx

@@ -7,8 +7,8 @@ import {
   Breadcrumbs as AriaBreadcrumbs,
 } from 'react-aria-components'
 
-import type { Page } from '@/components/ContentManager/ContentManagerContext'
-import { useContentManager } from '@/components/ContentManager/ContentManagerContext'
+import { useContentManager } from '@/contexts/ContentManager'
+import type { Page } from '@/contexts/ContentManager'
 import { BreadcrumbsDivider } from '@/icons/breadcrumbs-divider'
 
 import styles from './Breadcrumbs.module.scss'

src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -9,9 +9,9 @@ import {
   Button,
 } from 'react-aria-components'
 
-import { useContentManager } from '@/components/ContentManager/ContentManagerContext'
+import { useContentManager } from '@/contexts/ContentManager'
 import { IconArrow } from '@/icons'
-import type { Page } from '@/components/ContentManager/ContentManagerContext'
+import type { Page } from '@/contexts/ContentManager'
 
 import styles from './SideNavigation.module.scss'
 

src/components/MdxProvider/MdxProvider.tsx

@@ -1,37 +1,22 @@
-import { useState, useEffect } from 'react'
 import type { JSX } from 'react'
 
-import { useTheme } from 'next-themes'
 import { Button } from 'react-aria-components'
 
+import { useTheme } from '@/hooks/useTheme'
+
 import styles from './theme-switch.module.scss'
 
 export default function ThemeSwitch(): JSX.Element {
-  const [mounted, setMounted] = useState(false)
-  const { resolvedTheme, setTheme } = useTheme()
-
-  useEffect(() => {
-    setMounted(true)
-  }, [])
-
-  // useTheme will be undefined until mounted on the client. This means if we
-  // try to render UI based on the current theme before mounting on the client,
-  // we will get a hydration mismatch error.
-  // docs: https://www.npmjs.com/package/next-themes
-  if (!mounted) {
-    return <div className={styles['theme-switcher-container']} />
-  }
+  const { toggle } = useTheme()
 
   return (
     <Button
       onPress={() => {
-        setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')
+        toggle()
       }}
       className={styles['theme-switch-button']}
     >
-      <span className="caption bold">
-        {resolvedTheme === 'dark' ? `Light` : `Dark`}
-      </span>
+      <span className="caption bold" />
     </Button>
   )
 }

src/components/MdxProvider/index.ts

@@ -1,3 +1,5 @@
+@use '@/styles/typography' as *;
+
 .theme-switch-button {
   color: var(--content-primary);
   border: none;
@@ -7,13 +9,29 @@
   gap: 8px;
   width: 54px;
   height: 16px;
+  cursor: pointer;
 
   &::before {
     min-width: 10px;
     height: 10px;
     background-color: var(--content-primary);
     border-radius: 50%;
     content: '';
+    margin-left: -7px;
+  }
+
+  &::after {
+    @extend .caption;
+    @extend .semi-bold;
+    margin-left: -8px;
+
+    :root[data-theme='dark'] & {
+      content: 'Ligth';
+    }
+
+    :root[data-theme='light'] & {
+      content: 'Dark';
+    }
   }
 }