fix(component): fix <DarkThemeToggle> console warning (#1172)

Co-authored-by: Sebastian Sutu <[email protected]>

Author: SutuSebastian

src/components/DarkThemeToggle/DarkThemeToggle.tsx

@@ -4,6 +4,7 @@ import type { ComponentProps, FC } from 'react';
 import type { IconBaseProps } from 'react-icons';
 import { HiMoon, HiSun } from 'react-icons/hi';
 import { twMerge } from 'tailwind-merge';
+import { useIsMounted } from '~/src/hooks/use-is-mounted';
 import { mergeDeep } from '../../helpers/merge-deep';
 import { useThemeMode } from '../../hooks/use-theme-mode';
 import { getTheme } from '../../theme-store';
@@ -31,6 +32,7 @@ export const DarkThemeToggle: FC<DarkThemeToggleProps> = ({
   iconLight: IconLight = HiMoon,
   ...props
 }) => {
+  const isMounted = useIsMounted();
   const { computedMode, toggleMode } = useThemeMode();
 
   const theme = mergeDeep(getTheme().darkThemeToggle, customTheme);
@@ -46,12 +48,12 @@ export const DarkThemeToggle: FC<DarkThemeToggleProps> = ({
     >
       <IconDark
         aria-label="Currently dark mode"
-        data-active={computedMode === 'dark'}
+        data-active={isMounted && computedMode === 'dark'}
         className={twMerge(theme.root.icon, 'hidden dark:block')}
       />
       <IconLight
         aria-label="Currently light mode"
-        data-active={computedMode === 'light'}
+        data-active={isMounted && computedMode === 'light'}
         className={twMerge(theme.root.icon, 'dark:hidden')}
       />
     </button>

src/hooks/use-is-mounted.ts

@@ -0,0 +1,11 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+export function useIsMounted() {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => setMounted(true), []);
+
+  return mounted;
+}