0

enter image description here

I am making an epub reader with epub.js, and I intend to give a choice to toggle between various styles. Lets say I want to read the book in dark mode and at a smaller size, so I would first select Dark Mode CSS and then I would select a desired Font Size, but the problem I am facing is that it always picks up the latest style and removes off the previous style. In the above case it scrapes off Dark Mode and just changes the font.
Expected : Dark Mode with smaller font Actual : Small Font with dark mode removed. Not only this but I would like to preserve all the previous styles that the user gave and the user should be able to choose a combination of styles. My JS code that applies style looks like this:

document.getElementById("darkTheme").addEventListener("click", function(){
    rendition.themes.register("dark", "themes.css");
    rendition.themes.select("dark");
});

Here dark is a class that contains dark background and rendition.themes.select selects the class and applies the style present in that class and similarly I have created other classes for various different styles.

Wais Kamal
  • 5,858
  • 2
  • 17
  • 36
Ishank Sharma
  • 52
  • 6
  • If I understand "themes" - you can't have more than one theme at once. So either dark or small font. I don't think trying to accomplish this via themes is the right approach. – James Jun 03 '20 at 17:42
  • Can you suggest a better approach to achieve the same? – Ishank Sharma Jun 03 '20 at 17:44
  • A more low-level CSS approach, so you'd define a class "small-font", and then a class "dark", and you'd be able to set your elements to use `class='dark small-font'` to combine them. – James Jun 03 '20 at 17:45
  • I would apply the dark class on the main container , then background and color can be inherited. – G-Cyrillus Jun 03 '20 at 17:58

0 Answers0