How to change the color of the table of contents (TOC) in react-reader (a react-wrapper for epub.js)?

26 Views Asked by At

I need a little help with the customization of the table of contents for the react-reader. I was able to customize the content using getRendition and themes, but I couldn't find a way to customize the look and feel of the TOC.

This is my current working code:

            <ReactReader
              url={epubLink}
              showToc={true}
              swipeable={true}
              location={location}
              locationChanged={setLocation}
              loadingView={
                <div
                  style={{
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "center",
                    height: "100%",
                  }}
                >
                  <Puff color="grey" />
                </div>
              }
              getRendition={(rendition) => {
                //compatibility fix
                const spine_get = rendition.book.spine.get.bind(
                  rendition.book.spine
                );
                rendition.book.spine.get = function (target) {
                  var t = spine_get(target);
                  if (!t) {
                    t = spine_get(undefined);
                  }
                  return t;
                };
                //customizing theme
                rendition.themes.register("custom", {
                  body: {
                    "font-family": "Helvetica, sans-serif",
                  },
                });
                rendition.themes.select("custom");
              }}
            />
0

There are 0 best solutions below