Custom css
<template>
<div style='height: 100vh'>
<vue-reader url='/vue-book-reader/files/啼笑因缘.epub' :getRendition="getRendition" />
</div>
</template>
<script setup>
import { VueReader } from 'vue-book-reader'
const getRendition = (rendition) => {
rendition.renderer.setStyles([
`html {
background: #000;
color: #fff;
}`,
])
}
</script>
<style scoped>
:deep(.readerArea) {
background: #000 !important;
}
:deep(.readerArea .titleArea) {
color: #ccc !important;
}
:deep(.readerArea .arrow) {
color: white !important;
}
:deep(.tocArea) {
color: #ccc !important;
background: #111 !important;
}
:deep(.tocButtonExpanded) {
background: #222 !important;
}
:deep(.tocButtonBar) {
background: #fff !important;
}
:deep(.tocButton) {
color: white !important;
}
</style>