Fixed top and bottom observer differences.

src/MetaThemeContext.tsx

@@ -30,12 +30,14 @@ export const MetaThemeContext = createContext<IMetaThemeContext>({
  * ```
  */
 export default function MetaThemeProvider({ children }: PropsWithChildren) {
-  const metaTag = useRef<HTMLMetaElement>(document.querySelector('meta[name="theme-color"'));
-  const currThemeColor = useRef<string | null>(metaTag.current?.getAttribute('content') ?? null);
+  const metaTag = useRef<HTMLMetaElement | null>(null);
+  const currThemeColor = useRef<string | null>(null);
   const [observerTop, setTop] = useState<IntersectionObserver | null>(null);
   const [observerBottom, setBot] = useState<IntersectionObserver | null>(null);
 
   useEffect(() => {
+    metaTag.current = document.querySelector('meta[name="theme-color"]');
+    currThemeColor.current = metaTag.current?.getAttribute('content') ?? null;
     setTop(
       new IntersectionObserver(
         (es) => {
@@ -62,11 +64,15 @@ export default function MetaThemeProvider({ children }: PropsWithChildren) {
           if (!target) return;
           const color = target.getAttribute('data-metathemeswap-color');
           if (!color) return;
-          currThemeColor.current = color;
-          metaTag.current.setAttribute('content', currThemeColor.current);
+          document.body.style.backgroundColor = color;
+          metaTag.current.setAttribute('content', currThemeColor.current + 'fe');
+          const meta = metaTag.current;
+          requestAnimationFrame(() => {
+            meta.setAttribute('content', currThemeColor.current || '');
+          });
         },
         {
-          rootMargin: '-0.05% 0px -99.9% 0px',
+          rootMargin: '-99.9% 0px -0.05% 0px',
         },
       ),
     );