mirrors/calibre-web
1
0
Fork 0
mirror of https://github.com/janeczku/calibre-web synced 2025-10-31 07:13:02 +00:00
Code Issues Releases Wiki Activity

Change dark theme from black to dark gray and add a black theme

Browse Source
This commit is contained in:
Bharat KNV
2022-03-06 15:56:54 +05:30
parent 0693cb1ddb
commit 9efd644360
4 changed files with 18 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
cps/static/css/epub_themes.css
View File

@@ -4,7 +4,7 @@
} }
.darkTheme { .darkTheme {
background: #000; background: #202124;
color: #fff color: #fff
} }
@@ -12,3 +12,8 @@
background: #ece1ca; background: #ece1ca;
color: #000; color: #000;
} }
.blackTheme {
background: #000;
color: #fff
}

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

@@ -578,7 +578,7 @@ input:-moz-placeholder { color: #454545; }
} }
.md-content .themes button.darkTheme { .md-content .themes button.darkTheme {
background-color: black; background-color: #202124;
color: white; color: white;
} }
@@ -592,6 +592,11 @@ input:-moz-placeholder { color: #454545; }
color: black; color: black;
} }
.md-content .themes button.blackTheme {
background-color: black;
color: white;
}
/* Effect 1: Fade in and scale up */ /* Effect 1: Fade in and scale up */
.md-effect-1 .md-content { .md-effect-1 .md-content {
-webkit-transform: scale(0.7); -webkit-transform: scale(0.7);

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

@@ -16,6 +16,7 @@ var reader;
reader.rendition.themes.register("lightTheme", "/static/css/epub_themes.css"); reader.rendition.themes.register("lightTheme", "/static/css/epub_themes.css");
reader.rendition.themes.register("darkTheme", "/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"); reader.rendition.themes.register("sepiaTheme", "/static/css/epub_themes.css");
reader.rendition.themes.register("blackTheme", "/static/css/epub_themes.css");
if (calibre.useBookmarks) { if (calibre.useBookmarks) {
reader.on("reader:bookmarked", updateBookmark.bind(reader, "add")); reader.on("reader:bookmarked", updateBookmark.bind(reader, "add"));

6
cps/templates/read.html
View File

@@ -76,6 +76,7 @@
<button type="button" id="lightTheme" class="lightTheme" onclick="selectTheme(this.id)"><span id="lightSelected">✓</span>{{_('Light')}}</button> <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="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> <button type="button" id="sepiaTheme" class="sepiaTheme" onclick="selectTheme(this.id)"><span id="sepiaSelected"> </span>{{_('Sepia')}}</button>
<button type="button" id="blackTheme" class="blackTheme" onclick="selectTheme(this.id)"><span id="blackSelected"> </span>{{_('Black')}}</button>
</div> </div>
<div> <div>
<p> <p>
@@ -115,7 +116,7 @@
// Apply theme to rest of the page. TODO - Do this smarter // Apply theme to rest of the page. TODO - Do this smarter
if (id == "darkTheme") { if (id == "darkTheme") {
document.getElementById("main").style.backgroundColor = "black"; document.getElementById("main").style.backgroundColor = "#202124";
} }
else if (id == "lightTheme") { else if (id == "lightTheme") {
document.getElementById("main").style.backgroundColor = "white"; document.getElementById("main").style.backgroundColor = "white";
@@ -123,6 +124,9 @@
else if (id == "sepiaTheme") { else if (id == "sepiaTheme") {
document.getElementById("main").style.backgroundColor = "#ece1ca"; document.getElementById("main").style.backgroundColor = "#ece1ca";
} }
else if (id == "blackTheme") {
document.getElementById("main").style.backgroundColor = "black";
}
} }
</script> </script>
<script src="{{ url_for('static', filename='js/libs/screenfull.min.js') }}"></script> <script src="{{ url_for('static', filename='js/libs/screenfull.min.js') }}"></script>