Next.js and React Bootstrap accessibility component to change font and font size

I am trying to create a component for accessibility and have the option to change settings such as dark mode, higher contrast, font size, etc.

I've made a component as a bootstrap modal where settings for accessibility can be changed. Dark mode and higher contrast are implemented and working.

The problem I am running into is changing font sizes. I want to be able to dynamically set the font size to a smaller or larger size. My idea was to add a class to the <body> tag since there are some articles out there showing how to set classes in the body tag dynamically in _document.js.

I cannot figure out a good way to implement this and might be looking at it the complete wrong way.

For a better view of what's done so far I have setup a CodeSandbox with the complete code: https://codesandbox.io/s/nextjs-react-bootstrap-accessibility-exndhh

As of now the accessibility component looks like this:

import { useState, useEffect } from "react";

import { useTheme } from "next-themes";

import { Button, Modal, Form } from "react-bootstrap";

import { UniversalAccess } from "./Icons";

const Accessibility = () => {
  // A11Y - Accessibility modal
  const [show, setShow] = useState(false);
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  // A11Y - Accessibility themes
  const [mounted, setMounted] = useState(false);
  const { theme, setTheme, resolvedTheme } = useTheme();
  // When mounted on client, now we can show the UI
  useEffect(() => setMounted(true), []);
  if (!mounted) return null;
  return (
    <>
      <Button
        variant="warning"
        className="px-4 py-2 ms-lg-3 d-flex align-items-center"
        onClick={handleShow}
      >
        <UniversalAccess className="me-2" />
        Accessibility
      </Button>

      <Modal show={show} onHide={handleClose} centered>
        <Modal.Header closeButton>
          <Modal.Title>Accessibility settings</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <p className="h5">Colors</p>
          <Form.Check
            type="switch"
            id="dark-mode"
            label="Dark mode"
            onChange={() => setTheme(theme === "dark" ? "light" : "dark")}
            checked={resolvedTheme === "dark"}
          />
          <Form.Check
            type="switch"
            id="contrast-mode"
            label="Higher contrast"
            onChange={() =>
              setTheme(theme === "contrast" ? "light" : "contrast")
            }
            checked={resolvedTheme === "contrast"}
          />

          <div className="my-4">
            <p className="h5">Font size/type</p>
            <div className="d-flex mb-1 align-items-end">
              <div className="d-flex flex-column align-items-center">
                <Button
                  className="rounded-pill d-flex align-items-center justify-content-center"
                  variant="outline-primary"
                  style={{ width: "30px", height: "30px" }}
                >
                  <span style={{ fontSize: "0.7rem" }}>A</span>
                </Button>
                <p>Small</p>
              </div>
              <div className="d-flex flex-column align-items-center">
                <Button
                  className="mx-3 rounded-pill d-flex align-items-center justify-content-center"
                  variant="outline-primary"
                  style={{ width: "40px", height: "40px" }}
                  // Should be active because default font size
                  active
                >
                  <span style={{ fontSize: "1rem" }}>A</span>
                </Button>
                <p>Default</p>
              </div>
              <div className="d-flex flex-column align-items-center">
                <Button
                  className="rounded-pill d-flex align-items-center justify-content-center"
                  variant="outline-primary"
                  style={{ width: "50px", height: "50px" }}
                >
                  <span style={{ fontSize: "1.5rem" }}>A</span>
                </Button>
                <p>Large</p>
              </div>
            </div>
            <Form.Check
              type="switch"
              id="dyslexia-mode"
              label="Dyslexia font"
            />
          </div>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
};

export default Accessibility;

Eventually I'd like to have the option to changes fonts dynamically as well any suggestions here are more tan welcome!

The goal here is not to become fully WCAG compliant but at least have some of it.

Perhaps there's one of those handy dandy react libraries out there and have not found it yet.