mirrors/calibre-web
1
0
Fork 0
mirror of https://github.com/janeczku/calibre-web synced 2024-12-18 14:10:30 +00:00
Code Issues Releases Wiki Activity

Added basic theming to the epub reader

Browse Source
This commit is contained in:
Bharat KNV 2021-12-12 18:40:44 +05:30
parent f78d2245aa
commit 0693cb1ddb
4 changed files with 77 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
cps/static/css/epub_themes.css Normal file
View File

@ -0,0 +1,14 @@
.lightTheme {
background: #fff;
color: #000;
}
.darkTheme {
background: #000;
color: #fff
}
.sepiaTheme {
background: #ece1ca;
color: #000;
}

25
cps/static/css/main.css
View File

@ -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);

4
cps/static/js/reading/epub.js
View File

@ -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"));

34
cps/templates/read.html
View File

@ -69,6 +69,14 @@
<div class="modal md-effect-1" id="settings-modal">
<div class="md-content">
<h3>{{_('Settings')}}</h3>
<div class="themes" id="themes">
Choose a theme below: <br />
<!-- Hardcoded a tick in the light theme button because it is the "default" theme. Need to find a way to do this dynamically on startup-->
<button type="button" id="lightTheme" class="lightTheme" onclick="selectTheme(this.id)"><span id="lightSelected">✓</span>{{_('Light')}}</button>
<button type="button" id="darkTheme" class="darkTheme" onclick="selectTheme(this.id)"><span id="darkSelected"> </span>{{_('Dark')}}</button>
<button type="button" id="sepiaTheme" class="sepiaTheme" onclick="selectTheme(this.id)"><span id="sepiaSelected"> </span>{{_('Sepia')}}</button>
</div>
<div>
<p>
<input type="checkbox" id="sidebarReflow" name="sidebarReflow">{{_('Reflow text when sidebars are open.')}}
@ -90,6 +98,32 @@
bookmark: "{{ bookmark.bookmark_key if bookmark != None }}",
useBookmarks: "{{ g.user.is_authenticated | tojson }}"
};
function selectTheme(id) {
tickSpans = document.getElementById("themes").querySelectorAll("span");
// Remove tick mark from all theme buttons
for(var i = 0; i < tickSpans.length; i++) {
document.getElementById(tickSpans[i].id).textContent = "";
}
// Add tick mark to the button corresponding to the currently selected theme
document.getElementById(id).querySelector("span").textContent = "✓";
// Apply theme to epubjs iframe
reader.rendition.themes.select(id);
// Apply theme to rest of the page. TODO - Do this smarter
if (id == "darkTheme") {
document.getElementById("main").style.backgroundColor = "black";
}
else if (id == "lightTheme") {
document.getElementById("main").style.backgroundColor = "white";
}
else if (id == "sepiaTheme") {
document.getElementById("main").style.backgroundColor = "#ece1ca";
}
}
</script>
<script src="{{ url_for('static', filename='js/libs/screenfull.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/libs/reader.min.js') }}"></script>