There is any way to change background and text color?

[paulocoutinhox]

Hi,

There is any way to change background and text color?

Thanks.

[paulocoutinhox]

I have made a simple code to do it, but we can make something more specific on API to change this settings.

func passSettingsToJavaScript() {
    // muda configurações
    let dict = EPubSettings.shared.dictionary()
    var settings = Util.convertDictToStringJSON(dict: dict)
    
    if settings.characters.count > 0 {
        settings = String(format: "ReadiumSDK.reader.updateSettings(%@)", settings)
        executeJavaScript(javascript: settings)
    }
    
    // muda o thema
    var backgroundColor = ""
    var textColor = ""
    
    if EPubSettings.shared.theme == EPubSettings.ThemeDefault {
        backgroundColor = "#ffffff"
        textColor = "#000000"
    } else if EPubSettings.shared.theme == EPubSettings.ThemeDark {
        backgroundColor = "#000000"
        textColor = "#ffffff"
    } else if EPubSettings.shared.theme == EPubSettings.ThemeSepia {
        backgroundColor = "#E9E7D0"
        textColor = "#000000"
    }
    
    let js = "" +
        "var styles = [" +
        "    { selector: 'body', declarations: { backgroundColor: '" + backgroundColor + "', color: '" + textColor + "' } }" +
        "];" +
        "" +
        "ReadiumSDK.reader.clearBookStyles();" +
        "ReadiumSDK.reader.setBookStyles(styles);" +
        "document.body.style.background = '" + backgroundColor + "';"
    
    executeJavaScript(javascript: js)
}

[paulocoutinhox]

Anyone have a better implementation?

[danielweck]

That's exactly how it works :)
See the ReadiumJS "cloud / web reader" / Chrome extension:
https://github.com/readium/readium-js-viewer/blob/develop/src/js/ReaderSettingsDialog.js#L14
bookStyles is an array of CSS declarations,
applied using reader.setBookStyles(bookStyles) and optionally applied to the apps' own chrome UI ($('#my_div').css(bookStyles[0].declarations);)
https://github.com/readium/readium-js-viewer/blob/develop/src/js/ReaderSettingsDialog.js#L48

[paulocoutinhox]

Yes, but the book styles can be removed with "clearBookStyles" backing to original, correct?
The problem is with "setStyles", i cant apply background color to "container" using "setStyles", because this i make "document.body.style.background". How can i use "setStyles" to paint the book container?

[danielweck]

clearBookStyles() works:
https://github.com/readium/readium-shared-js/blob/develop/js/views/reader_view.js#L1085

...or set backgroundColor and color to empty strings, see usage of isAuthorTheme in getBookStyles():
https://github.com/readium/readium-js-viewer/blob/develop/src/js/ReaderSettingsDialog.js#L14

[danielweck]

...and yes, there is setBookStyles() for the actual EPUB content, and setStyles() for the "UI chrome" that surrounds the content viewports. Same with clearBookStyles() and clearStyles():
https://github.com/readium/readium-shared-js/blob/develop/js/views/reader_view.js#L1085

[paulocoutinhox]

Yes, but my question is about the "setStyles", i tried set the viewport background color with it, but i can. I see that your web viewer change the background, but i didnt see how, and i do it using "document.body.style.background".

I tried it:

var styles = [
    { selector: 'body', declarations: { backgroundColor: '#000000', color: '#ffffff' } }
];

ReadiumSDK.reader.setStyles(styles);

But it dont change nothing :(

[danielweck]

I guess it depends on your app setup.
There is a similar approach in the cloud reader:
https://github.com/readium/readium-js-viewer/blob/develop/src/js/ReaderSettingsDialog.js#L49
$('#reading-area').css(bookStyles[0].declarations);

[paulocoutinhox]

Ok, i will try it here and leave comments here.

[paulocoutinhox]

Hi,

The code is not working, i already tried change "$('#reading-area')", without success. And
$('#reading-area').css(bookStyles[0].declarations); is not working. See the results:

[danielweck]

'reading-area' is a div specific to the cloud reader.