Dark theme in NextJS 13 app dir with next-intl

[aXenDeveloper]

Hi,
When I start writing, I want to thanks for this awesome lib for i18n in nextjs 13 app dir! @amannn you doing amazing job!

I'm working on my new portfolio, but I have one problem with dark theme when I use next-intl.

I use simple script for apply theme="dark" in html tag:

(function () {
  const checkDark =
    window.matchMedia &&
    window.matchMedia('(prefers-color-scheme: dark)').matches;

  if (
    (checkDark && !localStorage.getItem('aXenDev_theme_manual')) ||
    localStorage.getItem('aXenDev_theme') === 'dark'
  ) {
    document.documentElement.setAttribute('theme', 'dark');
  }
})();

My repo with code: https://github.com/aXenDeveloper/web-axendev/tree/axendev_2
Demo: https://web-axendev-git-axendev2-axendeveloper.vercel.app/

I use example project from here for not refreshing page when change the language: https://github.com/amannn/next-intl/tree/feat/next-13-rsc/examples/example-next-13

My problem is when I change language, all attributes in html tag will be remove.
Theme system should be dark.

Before change the language:

After change the language:

I tried with useEffect change tag in html, but this solution have issue with flash effect.

 const locale = useLocale();

  useEffect(() => {
    const checkDark =
      window.matchMedia &&
      window.matchMedia('(prefers-color-scheme: dark)').matches;

    if (
      (checkDark && !localStorage.getItem('aXenDev_theme_manual')) ||
      localStorage.getItem('aXenDev_theme') === 'dark'
    ) {
      document.documentElement.setAttribute('theme', 'dark');
    }
  }, [locale]);

Any idea how can I resolve this problem?

[josiah-0208]

anyone who knows the answer of this issue
comment plz,,,
when we navigate the website, next-intl recommend using Link component
and Link component gets, parses, re-renders the page so dark mode tag disappears
but i don't know how fix to it

[josiah-0208]

@aXenDeveloper
Oh when i saw your https://web-axendev-git-axendev2-axendeveloper.vercel.app/ site
you have found answer to this issue
can you tell me how did you resolve this issue?:(

[aXenDeveloper]

https://github.com/pacocoursey/next-themes

[josiah-0208]

@aXenDeveloper thanks for sharing:)
i'll try it!!