mirror/advplyr.audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-07-29 15:24:50 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

Add 'sepia' theme to EpubReader

Browse source
This commit is contained in:
Michael Vinci 2025-07-25 16:47:34 -05:00
parent a5fb0d9cdb
commit c9eaf2db2d
3 changed files with 26 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

24
client/components/readers/EpubReader.vue
View file

@ -99,22 +99,32 @@ export default {
return `/api/items/${this.libraryItemId}/ebook` return `/api/items/${this.libraryItemId}/ebook`
}, },
themeRules() { themeRules() {
const isDark = this.ereaderSettings.theme === 'dark' const theme = this.ereaderSettings.theme
const fontColor = isDark ? '#fff' : '#000' const isDark = theme === 'dark'
const backgroundColor = isDark ? 'rgb(35 35 35)' : 'rgb(255, 255, 255)' const isSepia = theme === 'sepia'
const fontColor = isDark
? '#fff'
: isSepia
? '#5b4636'
: '#000'
const backgroundColor = isDark
? 'rgb(35 35 35)'
: isSepia
? 'rgb(244, 236, 216)'
: 'rgb(255, 255, 255)'
const lineSpacing = this.ereaderSettings.lineSpacing / 100 const lineSpacing = this.ereaderSettings.lineSpacing / 100
const fontScale = this.ereaderSettings.fontScale / 100 const fontScale = this.ereaderSettings.fontScale / 100
const textStroke = this.ereaderSettings.textStroke / 100 const textStroke = this.ereaderSettings.textStroke / 100
return { return {
'*': { '*': {
color: `${fontColor}!important`, color: `${fontColor}!important`,
'background-color': `${backgroundColor}!important`, 'background-color': `${backgroundColor}!important`,
'line-height': lineSpacing * fontScale + 'rem!important', 'line-height': `${lineSpacing * fontScale}rem!important`,
'-webkit-text-stroke': textStroke + 'px ' + fontColor + '!important' '-webkit-text-stroke': `${textStroke}px ${fontColor}!important`
}, },
a: { a: {
color: `${fontColor}!important` color: `${fontColor}!important`

8
client/components/readers/Reader.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div v-if="show" id="reader" :data-theme="ereaderTheme" class="group absolute top-0 left-0 w-full z-60 data-[theme=dark]:bg-primary data-[theme=dark]:text-white data-[theme=light]:bg-white data-[theme=light]:text-black" :class="{ 'reader-player-open': !!streamLibraryItem }"> <div v-if="show" id="reader" :data-theme="ereaderTheme" class="group absolute top-0 left-0 w-full z-60 data-[theme=dark]:bg-primary data-[theme=dark]:text-white data-[theme=light]:bg-white data-[theme=light]:text-black data-[theme=sepia]:bg-[rgb(244,236,216)] data-[theme=sepia]:text-[#5b4636]" :class="{ 'reader-player-open': !!streamLibraryItem }">
<div class="absolute top-4 left-4 z-20 flex items-center"> <div class="absolute top-4 left-4 z-20 flex items-center">
<button v-if="isEpub" @click="toggleToC" type="button" aria-label="Table of contents menu" class="inline-flex opacity-80 hover:opacity-100"> <button v-if="isEpub" @click="toggleToC" type="button" aria-label="Table of contents menu" class="inline-flex opacity-80 hover:opacity-100">
<span class="material-symbols text-2xl">menu</span> <span class="material-symbols text-2xl">menu</span>
@ -27,7 +27,7 @@
<!-- TOC side nav --> <!-- TOC side nav -->
<div v-if="tocOpen" class="w-full h-full overflow-y-scroll absolute inset-0 bg-black/20 z-20" @click.stop.prevent="toggleToC"></div> <div v-if="tocOpen" class="w-full h-full overflow-y-scroll absolute inset-0 bg-black/20 z-20" @click.stop.prevent="toggleToC"></div>
<div v-if="isEpub" class="w-96 h-full max-h-full absolute top-0 left-0 shadow-xl transition-transform z-30 group-data-[theme=dark]:bg-primary group-data-[theme=dark]:text-white group-data-[theme=light]:bg-white group-data-[theme=light]:text-black" :class="tocOpen ? 'translate-x-0' : '-translate-x-96'" @click.stop.prevent> <div v-if="isEpub" class="w-96 h-full max-h-full absolute top-0 left-0 shadow-xl transition-transform z-30 group-data-[theme=dark]:bg-primary group-data-[theme=dark]:text-white group-data-[theme=light]:bg-white group-data-[theme=light]:text-black group-data-[theme=sepia]:bg-[rgb(244,236,216)] group-data-[theme=sepia]:text-[#5b4636]" :class="tocOpen ? 'translate-x-0' : '-translate-x-96'" @click.stop.prevent>
<div class="flex flex-col p-4 h-full"> <div class="flex flex-col p-4 h-full">
<div class="flex items-center mb-2"> <div class="flex items-center mb-2">
<button @click.stop.prevent="toggleToC" type="button" aria-label="Close table of contents" class="inline-flex opacity-80 hover:opacity-100"> <button @click.stop.prevent="toggleToC" type="button" aria-label="Close table of contents" class="inline-flex opacity-80 hover:opacity-100">
@ -181,6 +181,10 @@ export default {
text: this.$strings.LabelThemeDark, text: this.$strings.LabelThemeDark,
value: 'dark' value: 'dark'
}, },
{
text: this.$strings.LabelThemeSepia,
value: 'sepia'
},
{ {
text: this.$strings.LabelThemeLight, text: this.$strings.LabelThemeLight,
value: 'light' value: 'light'

1
client/strings/en-us.json
View file

@ -656,6 +656,7 @@
"LabelTheme": "Theme", "LabelTheme": "Theme",
"LabelThemeDark": "Dark", "LabelThemeDark": "Dark",
"LabelThemeLight": "Light", "LabelThemeLight": "Light",
"LabelThemeSepia": "Sepia",
"LabelTimeBase": "Time Base", "LabelTimeBase": "Time Base",
"LabelTimeDurationXHours": "{0} hours", "LabelTimeDurationXHours": "{0} hours",
"LabelTimeDurationXMinutes": "{0} minutes", "LabelTimeDurationXMinutes": "{0} minutes",