Color Profiles in Reading view

[choyan]

Pocket uses two type of Color Profile. "Inverted" and "Sepia". Implementation of this feature will be great for night time reading.

[babluboy]

Thanks. Looks like a useful feature, can you please provide a link or a screen shot which will give me a better idea

[choyan]

Here are the Screenshots

[Philip-Scott]

I think this depends on #2 but I agree, having different "profiles" would be cool :)

[choyan]

Did you check this project?
https://github.com/michaldaniel/Ebook-Viewer

[babluboy]

Thanks for mentioning the EBook-Viewer project, I can take some good points from the same. Also agree with this suggestion of having different profiles. Once I get the CSS working for the reading view, I can progress on this issue.

[babluboy]

@choyan I have pushed the first version of the code which switches between a Day and Night mode. Will be great if you can check that. Some work is need to change the forward and backward buttons in night mode to white ones (or lighter colored ones). Also the scrollbar needs to be made dark - however its a bit difficult to grab the scrollbar in Webkit 2. I will also add the Sepia mode later as an additional colour profile. Will keep this Issue open till then.

[Philip-Scott]

@babluboy You can force the app to use the dark version of the stylesheet with:
Gtk.Settings.get_default ().gtk_application_prefer_dark_theme = true; :)

[babluboy]

@Philip-Scott Someone else also suggested the same on Google+, so I tried that out:

Gtk.Settings settings = Gtk.Settings.get_default();
settings.set_property("gtk-application-prefer-dark-theme", true);

The result was that not all widets were forced to dark (see screen shot and the lower part of the library view in white) and the library view also went dark which was not my intention (just wanted to put the reading view to dark), the scrollbar did not go to dark which is an issue and lastly when I add more colour profiles I nayway have to do that in CSS - so I feel CSS is the way forward for the profile theme. Thoughts?

Here is a screen shot of how the look went when I applied the gtk dark theme

[Philip-Scott]

@babluboy Could this be the problem: https://github.com/babluboy/bookworm/blob/master/data/com.github.babluboy.bookworm.app.css

I would try to include the least amount of custom CSS with your app, as you can get problems like this (And with people using diferent themes)

[babluboy]

@Philip-Scott You were spot on. I commented out the css and the white area on the footer were gone in the dark theme. However, the webview looks an issue - I have to set the background to black and the font color to white to make the night view work. Have you seen this issue in Notes Up or any pointers on aligning the webview with the gtk theme.

I also see that the default background of the Webview is not the same grey-white like the rest of the widegts and is a full white. Similarly, the background in night mode has a difference in the shade of black between the widgets and the webview. I can fix this with the right hex code applied to the webview, but thought I should mention this in case you have an idea on why this is happening.

screen shots of the app after removing the CSS and the colour over-rides on the widegts. I will need to change the contents widget and the selection widget to look better in night mode

[babluboy]

Made some changes for the button images and converted the Night Mode to a Switch

[choyan]

@babluboy It's great to see the full feature working awesomely. Thanks for your great work!
I would like to propose some design related suggestion. Currently, the viewer related settings are divided into two parts. Font size and color profile. I think it would be great to combine them together in a single option. Perdon me. I have no experience in wireframing. Please have a look.

[babluboy]

@choyan good suggestion. someone else also suggested something on the similar line based on the firefox reader on Google + here

[m-delvalle]

@babluboy that's nice! From a user POV, I think a simple "theme selector" is more useful. Evernote's "Clearly" plugin uses this approach, and has another "window" to customize your own theme ("personalizado" in the picture), if you have that particular need. But I believe most users would benefit from a few pre-designed options, 1 or 2 mouse clicks away :)

[babluboy]

@m-delvalle Thanks for the design suggestion. That will be helpful when I can add more Personalization options. At the moment I have just got Night and Day modes but as I add more profiles and font options this kind of UX will definitely be good than choosing from a dialog....I agree its more tighter to have a pop up menu for color profiles, font, etc from the Header Bar and then a separate dialog for more complicated settings from the Preferences gear icon

[babluboy]

Added a pop over menu for preferences based on the above suggestions. At this time it has the zoom and the light/dark options, however I can use it as the container to add more preferences like the border and font chooser.
If this is fine, then I can close this Issue, otherwise feel free to give suggestions.