Dark Mode, Fullscreen scale and reading modes

[kr3t3n]

Hi, many thanks for the awesome app, works like a charm!

Do you plan on creating a Dark Mode for it?

Also, on mobile, the fullscreen doesn't really scale the book contents. It just expands the window but the book remains same size, same position.

Do you plan on adding reading modes? The current navigation with the left/right arrows works fine but having a scrollable "infinite" chapter (slide or press arrow on chapter end) is a neat feature too.

[sharvan-capsitech]

Use themes for dark mode - E.g.

book.rendition.themes.register("black", { "body": { "background-color": "#111111" }, "html": { "-webkit-filter": "invert(1) hue-rotate(180deg)", "filter": "invert(1) hue-rotate(180deg)" }, "img": { "-webkit-filter": "invert(1) hue-rotate(180deg)", "filter": "invert(1) hue-rotate(180deg)" } });

[csantanu]

This works great. But after light to dark mode switch, observed that chapter transition shows flashes of the book's default background color. Even if you set it to none, it shows flashes of white and so moving between chapters in the dark mode becomes very straining for the eye, as it flashes white.

[sharvan-capsitech]

Change the main DIV color (book's default background color) during change the theme. ex. If Lightmode $('#main').css("background", "#ffffff"); If DarkMode $('#main').css("background", "#000000");

[csantanu]

Thanks for the suggestion. I am trying to use in an ionic project, so I may not be doing it right. The above code is not taking any effect. There is a book.scss file which has a #book iframe component where the default background is set. How to set that while applying the theme and change the background based on theme color? Thanks in advance again.

[sharvan-capsitech]

May this help you

const themeWrapper = document.querySelector('body'); themeWrapper.style.setProperty('--primaryColor', StyleService.primary.medium); themeWrapper.style.setProperty('--primaryLightColor', StyleService.primary.light); themeWrapper.style.setProperty('--primaryDarkColor', StyleService.primary.dark);

[csantanu]

This worked by changing the background color of the "book" div in the runtime, like this -

this.el = document.querySelector('#book'); switch(theme) { case "black": this.el.style.setProperty('background', "#000000");

Thanks for the pointers.

[YehorKanaiev]

Hey! I was trying to implement "Dark Mode" and had an issue. When you select your custom theme (dark), and after that you try to open 'default' theme or custom light theme, you got an issue with the background. It doesn't change until you open a new chapter (NavItem). If you have the same issue, you can try to add "rendition.start()" after you changed the theme. I don't know if it is the correct way, maybe I used something wrong, but it works).