Using mantine and next-theme | Mantine | Page 1

I want to use mantine and next-theme together, is this possible? I wanted to use next-theme because of it's simplicity in toggling between dark-mode and light-mode and I wanted to use mantine because of the beautiful components.

I suppose I was expecting these two to be compatible, but I'm not sure how to make them compatible and I'm not sure what I'm doing wrong. I've attached a picture so you can see what happens.

The code below is my layout.tsx

import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import { ThemeProvider } from "next-themes";
import Header from "./components/layout/header";
import "@mantine/core/styles.css";
import {
  ColorSchemeScript,
  MantineProvider,
  mantineHtmlProps,
} from "@mantine/core";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" {...mantineHtmlProps}>
      <ColorSchemeScript />
      <ThemeProvider attribute={"class"}>
        <MantineProvider>
          <body
            className={`${geistSans.variable} ${geistMono.variable} dark:bg-neutral-800 dark:text-neutral-200`}
          >
            <Header />
            {children}
          </body>
        </MantineProvider>
      </ThemeProvider>
    </html>
  );
}

And this is my theme-button.tsx (the button that switches from dark to light mode)

"use client";

import { Button, Modal, useMantineTheme } from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import { useTheme } from "next-themes";
import { useEffect, useState } from "react";
import { FaMoon, FaSun } from "react-icons/fa6";

export default function ThemeButton() {
  const [mounted, setMounted] = useState(false);
  const { resolvedTheme, theme, setTheme } = useTheme();
  const [opened, { open, close }] = useDisclosure(false);
  const mantineTheme = useMantineTheme();

  const Icon = theme === "light" ? FaSun : FaMoon;

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    return null;
  }

  const handleClick = () => {
    setTheme(resolvedTheme === "light" ? "dark" : "light");
  };

  return (
    <>
      <Modal opened={opened} onClose={close} title="Authentication">
        <p>This is just another test for fun!</p>
      </Modal>

      <Button variant="default" onClick={open}>
        Open modal
      </Button>

      <button
        onClick={handleClick}
        className="rounded p-1.5 text-xl text-sky-700 transition hover:bg-sky-700 hover:text-white dark:text-cyan-400 dark:hover:bg-cyan-400 dark:hover:text-neutral-800"
      >
        <Icon />
      </button>
    </>
  );
}

#Using mantine and next-theme