From 0693cb1ddb394faac5abacc4505e32d04e5f9873 Mon Sep 17 00:00:00 2001 From: Bharat KNV Date: Sun, 12 Dec 2021 18:40:44 +0530 Subject: [PATCH] Added basic theming to the epub reader --- cps/static/css/epub_themes.css | 14 ++++++++++++++ cps/static/css/main.css | 25 +++++++++++++++++++++++++ cps/static/js/reading/epub.js | 4 ++++ cps/templates/read.html | 34 ++++++++++++++++++++++++++++++++++ 4 files changed, 77 insertions(+) create mode 100644 cps/static/css/epub_themes.css diff --git a/cps/static/css/epub_themes.css b/cps/static/css/epub_themes.css new file mode 100644 index 00000000..4f686681 --- /dev/null +++ b/cps/static/css/epub_themes.css @@ -0,0 +1,14 @@ +.lightTheme { + background: #fff; + color: #000; +} + +.darkTheme { + background: #000; + color: #fff +} + +.sepiaTheme { + background: #ece1ca; + color: #000; +} \ No newline at end of file diff --git a/cps/static/css/main.css b/cps/static/css/main.css index adbfbfdf..84f03229 100644 --- a/cps/static/css/main.css +++ b/cps/static/css/main.css @@ -567,6 +567,31 @@ input:-moz-placeholder { color: #454545; } font-size: 0.8em; } +.md-content .themes button { + display: inline-block; + border: none; + text-align: center; + text-decoration: none; + margin-top: 5%; + margin-right: 1%; + font-size: 16px; +} + +.md-content .themes button.darkTheme { + background-color: black; + color: white; +} + +.md-content .themes button.whiteTheme { + background-color: white; + color: black; +} + +.md-content .themes button.sepiaTheme { + background-color: #ece1ca; + color: black; +} + /* Effect 1: Fade in and scale up */ .md-effect-1 .md-content { -webkit-transform: scale(0.7); diff --git a/cps/static/js/reading/epub.js b/cps/static/js/reading/epub.js index edafa82c..5e674812 100644 --- a/cps/static/js/reading/epub.js +++ b/cps/static/js/reading/epub.js @@ -13,6 +13,10 @@ var reader; bookmarks: calibre.bookmark ? [calibre.bookmark] : [] }); + reader.rendition.themes.register("lightTheme", "/static/css/epub_themes.css"); + reader.rendition.themes.register("darkTheme", "/static/css/epub_themes.css"); + reader.rendition.themes.register("sepiaTheme", "/static/css/epub_themes.css"); + if (calibre.useBookmarks) { reader.on("reader:bookmarked", updateBookmark.bind(reader, "add")); reader.on("reader:unbookmarked", updateBookmark.bind(reader, "remove")); diff --git a/cps/templates/read.html b/cps/templates/read.html index 3d2566e0..ed33e850 100644 --- a/cps/templates/read.html +++ b/cps/templates/read.html @@ -69,6 +69,14 @@