Add:Black/oled theme for epub reader

components/readers/EpubReader.vue

@@ -2,7 +2,7 @@
   <div id="epub-frame" class="w-full">
     <div id="viewer" class="h-full w-full"></div>
 
-    <div class="fixed left-0 h-8 w-full px-4 flex items-center" :class="isLightTheme ? 'bg-white text-black' : 'bg-[#232323] text-white/80'" :style="{ bottom: isPlayerOpen ? '120px' : '0px' }">
+    <div class="fixed left-0 h-8 w-full px-4 flex items-center" :class="isLightTheme ? 'bg-white text-black' : isDarkTheme ? 'bg-[#232323] text-white/80' : 'bg-[#000000] text-white/80'" :style="{ bottom: isPlayerOpen ? '120px' : '0px' }">
       <p v-if="totalLocations" class="text-xs text-slate-600">Location {{ currentLocationNum }} of {{ totalLocations }}</p>
       <div class="flex-grow" />
       <p class="text-xs">{{ progress }}%</p>
@@ -105,17 +105,21 @@ export default {
     isLightTheme() {
       return this.ereaderSettings.theme === 'light'
     },
+    isDarkTheme() {
+      return this.ereaderSettings.theme === 'dark'
+    },
     themeRules() {
       const isDark = this.ereaderSettings.theme === 'dark'
-      const fontColor = isDark ? '#fff' : '#000'
+      const isBlack = this.ereaderSettings.theme === 'black'
-      const backgroundColor = isDark ? 'rgb(35 35 35)' : 'rgb(255, 255, 255)'
+      const fontColor = isDark ? '#fff' : isBlack ? '#fff' : '#000'
+      const backgroundColor = isDark ? 'rgb(35 35 35)' : isBlack ? 'rgb(0 0 0)' : 'rgb(255, 255, 255)'
 
       return {
         '*': {
           color: `${fontColor}!important`,
           'background-color': `${backgroundColor}!important`,
           'line-height': this.ereaderSettings.lineSpacing + '%!important',
-          '-webkit-text-stroke': this.ereaderSettings.textStroke/100 + 'px ' + fontColor + '!important'
+          '-webkit-text-stroke': this.ereaderSettings.textStroke / 100 + 'px ' + fontColor + '!important'
         },
         a: {
           color: `${fontColor}!important`
@@ -427,7 +431,7 @@ export default {
       document.removeEventListener('orientationchange', this.screenOrientationChange)
     }
     window.removeEventListener('resize', this.screenOrientationChange)
-  },
+  }
 }
 </script>
 

components/readers/Reader.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="show" :data-theme="ereaderTheme" class="group fixed top-0 left-0 right-0 layout-wrapper w-full z-40 pt-8 data-[theme=dark]:bg-[#232323] data-[theme=dark]:text-white data-[theme=light]:bg-white data-[theme=light]:text-black" :class="{ 'reader-player-open': isPlayerOpen }">
+  <div v-if="show" :data-theme="ereaderTheme" class="group fixed top-0 left-0 right-0 layout-wrapper w-full z-40 pt-8 data-[theme=black]:bg-black data-[theme=black]:text-white data-[theme=dark]:bg-[#232323] data-[theme=dark]:text-white data-[theme=light]:bg-white data-[theme=light]:text-black" :class="{ 'reader-player-open': isPlayerOpen }">
     <!-- toolbar -->
     <div class="h-32 pt-10 w-full px-2 fixed top-0 left-0 z-30 transition-transform bg-bg text-fg" :class="showingToolbar ? 'translate-y-0' : '-translate-y-32'" :style="{ boxShadow: showingToolbar ? '0px 8px 8px #11111155' : '' }" @touchstart.stop @mousedown.stop @touchend.stop @mouseup.stop>
       <div class="flex items-center mb-2">
@@ -238,6 +238,10 @@ export default {
     },
     themeItems() {
       return [
+        {
+          text: this.$strings.LabelThemeBlack,
+          value: 'black'
+        },
         {
           text: this.$strings.LabelThemeDark,
           value: 'dark'

strings/en-us.json

@@ -252,6 +252,7 @@
   "LabelTag": "Tag",
   "LabelTags": "Tags",
   "LabelTheme": "Theme",
+  "LabelThemeBlack": "Black",
   "LabelThemeDark": "Dark",
   "LabelThemeLight": "Light",
   "LabelTimeRemaining": "{0} remaining",