How do I to make Material UI `<Pagination>` control respect dark mode?

Question

I am using a ` tag from Material-UI in my website.

The control works great, but it doesn't adapt to dark mode, so I get this:

Tag looks like this:

  <Pagination
    count={Math.ceil(blogProps.totalPosts / POSTS_PER_PAGE)} // Calculate the total number of pages
    page={currentPage}
    onChange={handlePageChange}
    showFirstButton
    showLastButton
    color="primary"
    sx={{ p: 3, mx: "auto" }}
  />

Theme is quite simple:

import { extendTheme } from "@mui/joy/styles";

const theme = extendTheme({
  fontFamily: {
    body: "'Public Sans', var(--joy-fontFamily-fallback)",
  },
});

export default theme;

And the code for my dark/light mode:

import { useColorScheme } from "@mui/joy/styles";
import IconButton from "@mui/joy/IconButton";
import * as React from "react";
import LightModeIcon from "@mui/icons-material/LightMode";
import DarkModeIcon from "@mui/icons-material/DarkMode";

export default function ModeButton() {
  const { mode, setMode } = useColorScheme();
  const [mounted, setMounted] = React.useState<boolean>(false);

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

  if (!mounted) {
    // to avoid layout shift, render a placeholder button
    return (
      <IconButton
        variant="plain"
        color="neutral"
        sx={{ width: 60 }}
        aria-label="Toggle light and dark mode"
      />
    );
  }
  return (
    <IconButton
      variant="plain"
      color="neutral"
      aria-label="Toggle light and dark mode"
      onClick={() => setMode(mode === "dark" ? "light" : "dark")}
    >
      {mode === "dark" ? <LightModeIcon /> : <DarkModeIcon />}
    </IconButton>
  );
}

How do I get the <Pagination> tag to honor the theme?

Answer 1

The correct answer is to carefully and precisely follow all the instructions found on this page:

https://mui.com/joy-ui/guides/using-joy-ui-and-material-ui-together/