From 0693cb1ddb394faac5abacc4505e32d04e5f9873 Mon Sep 17 00:00:00 2001
From: Bharat KNV <bharatknv@gmail.com>
Date: Sun, 12 Dec 2021 18:40:44 +0530
Subject: [PATCH 1/2] 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 @@
       <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>

From 9efd644360ef8eefc02363ba1109151773f6301c Mon Sep 17 00:00:00 2001
From: Bharat KNV <bharatknv@gmail.com>
Date: Sun, 6 Mar 2022 15:56:54 +0530
Subject: [PATCH 2/2] Change dark theme from black to dark gray and add a black
 theme

---
 cps/static/css/epub_themes.css | 7 ++++++-
 cps/static/css/main.css        | 7 ++++++-
 cps/static/js/reading/epub.js  | 1 +
 cps/templates/read.html        | 6 +++++-
 4 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/cps/static/css/epub_themes.css b/cps/static/css/epub_themes.css
index 4f686681..16c27805 100644
--- a/cps/static/css/epub_themes.css
+++ b/cps/static/css/epub_themes.css
@@ -4,11 +4,16 @@
 }
 
 .darkTheme {
-	background: #000;
+	background: #202124;
 	color: #fff
 }
 
 .sepiaTheme {
 	background: #ece1ca;
 	color: #000;
+}
+
+.blackTheme {
+	background: #000;
+	color: #fff
 }
\ No newline at end of file
diff --git a/cps/static/css/main.css b/cps/static/css/main.css
index 84f03229..03cb0a01 100644
--- a/cps/static/css/main.css
+++ b/cps/static/css/main.css
@@ -578,7 +578,7 @@ input:-moz-placeholder { color: #454545; }
 }
 
 .md-content .themes button.darkTheme {
-  background-color: black;
+  background-color: #202124;
   color: white;
 }
 
@@ -592,6 +592,11 @@ input:-moz-placeholder { color: #454545; }
   color: black;
 }
 
+.md-content .themes button.blackTheme {
+  background-color: black;
+  color: white;
+}
+
 /* 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 5e674812..79f74b74 100644
--- a/cps/static/js/reading/epub.js
+++ b/cps/static/js/reading/epub.js
@@ -16,6 +16,7 @@ var reader;
     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");
+    reader.rendition.themes.register("blackTheme", "/static/css/epub_themes.css");
 
     if (calibre.useBookmarks) {
         reader.on("reader:bookmarked", updateBookmark.bind(reader, "add"));
diff --git a/cps/templates/read.html b/cps/templates/read.html
index ed33e850..7f473d1f 100644
--- a/cps/templates/read.html
+++ b/cps/templates/read.html
@@ -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="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="blackTheme" class="blackTheme" onclick="selectTheme(this.id)"><span id="blackSelected"> </span>{{_('Black')}}</button>
               </div>
               <div>
                   <p>
@@ -115,7 +116,7 @@
 
             // Apply theme to rest of the page. TODO - Do this smarter
             if (id == "darkTheme") {
-              document.getElementById("main").style.backgroundColor = "black";
+              document.getElementById("main").style.backgroundColor = "#202124";
             }
             else if (id == "lightTheme") {
               document.getElementById("main").style.backgroundColor = "white";
@@ -123,6 +124,9 @@
             else if (id == "sepiaTheme") {
               document.getElementById("main").style.backgroundColor = "#ece1ca";
             }
+            else if (id == "blackTheme") {
+              document.getElementById("main").style.backgroundColor = "black";
+            }
           }
       </script>
       <script src="{{ url_for('static', filename='js/libs/screenfull.min.js') }}"></script>