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

cps/static/css/epub_themes.css

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

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

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

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>