diff --git a/assets/tailwind.css b/assets/tailwind.css
index 3e7d07ed..7b8f598a 100644
--- a/assets/tailwind.css
+++ b/assets/tailwind.css
@@ -12,6 +12,11 @@
--color-primary: 35 35 35;
--color-secondary: 47 48 48;
--color-border: 75 85 89;
+ --color-bg-toggle: 56 56 56;
+ --color-bg-toggle-selected: 81 82 84;
+ --color-track-cursor: 229 231 235;
+ --color-track: 107 114 128;
+ --color-track-buffered: 75 85 99;
--gradient-item-page: linear-gradient(169deg, rgba(0, 0, 0, 0.4) 0%, rgba(55, 56, 56, 1) 80%);
--gradient-audio-player: linear-gradient(169deg, rgba(0, 0, 0, 0) 0%, rgba(38, 38, 38, 1) 80%);
--gradient-minimized-audio-player: linear-gradient(145deg, rgba(38, 38, 38, 0.5) 0%, rgba(38, 38, 38, 0.9) 20%, rgb(38, 38, 38) 60%);
@@ -26,6 +31,11 @@
--color-primary: 222 222 222;
--color-secondary: 246 248 250;
--color-border: 189 191 191;
+ --color-bg-toggle: 222 222 222;
+ --color-bg-toggle-selected: 255 255 255;
+ --color-track-cursor: 101 109 118;
+ --color-track: 189 191 191;
+ --color-track-buffered: 129 131 131;
--gradient-item-page: linear-gradient(169deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 1) 80%);
--gradient-audio-player: linear-gradient(169deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 1) 80%);
--gradient-minimized-audio-player: linear-gradient(145deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.9) 20%, rgb(255, 255, 255) 60%);
diff --git a/components/app/AudioPlayer.vue b/components/app/AudioPlayer.vue
index 5c6e0eb4..3bd04383 100644
--- a/components/app/AudioPlayer.vue
+++ b/components/app/AudioPlayer.vue
@@ -22,10 +22,10 @@
{{ totalTimeRemainingPretty }}
@@ -86,12 +86,12 @@
{{ timeRemainingPretty }}
-
diff --git a/components/readers/ComicReader.vue b/components/readers/ComicReader.vue
index 9742159e..30bdddda 100644
--- a/components/readers/ComicReader.vue
+++ b/components/readers/ComicReader.vue
@@ -2,7 +2,7 @@
-
+
{{ key }}
@@ -23,7 +23,7 @@
-
+
{{ page }} / {{ numPages }}
diff --git a/components/readers/EpubReader.vue b/components/readers/EpubReader.vue
index 7531603e..3260d640 100644
--- a/components/readers/EpubReader.vue
+++ b/components/readers/EpubReader.vue
@@ -2,7 +2,7 @@
-
+
Location {{ currentLocationNum }} of {{ totalLocations }}
{{ progress }}%
diff --git a/components/readers/PdfReader.vue b/components/readers/PdfReader.vue
index 05b154a6..6894083a 100644
--- a/components/readers/PdfReader.vue
+++ b/components/readers/PdfReader.vue
@@ -18,7 +18,7 @@
-
+
{{ page }} / {{ numPages }}
diff --git a/components/readers/Reader.vue b/components/readers/Reader.vue
index bc55fb50..e41d1fe8 100644
--- a/components/readers/Reader.vue
+++ b/components/readers/Reader.vue
@@ -1,20 +1,20 @@
-
+
-
+
@@ -55,31 +55,33 @@
-
-
{{ $strings.HeaderEreaderSettings }}
-
-
-
-
-
-
-
{{ $strings.LabelTheme }}:
+
+
+
{{ $strings.HeaderEreaderSettings }}
+
+
+
+
+
+
+
{{ $strings.LabelTheme }}:
+
+
-
-
-
-
-
{{ $strings.LabelFontScale }}:
+
+
+
{{ $strings.LabelFontScale }}:
+
+
-
-
-
-
-
{{ $strings.LabelLineSpacing }}:
+
+
+
{{ $strings.LabelLineSpacing }}:
+
+
-
@@ -150,7 +152,7 @@ export default {
},
ereaderTheme() {
if (this.isEpub) return this.ereaderSettings.theme
- return 'dark'
+ return document.documentElement.dataset.theme || 'dark'
},
themeItems() {
return [
diff --git a/components/ui/RangeInput.vue b/components/ui/RangeInput.vue
index caee5fa0..40e6c9c5 100644
--- a/components/ui/RangeInput.vue
+++ b/components/ui/RangeInput.vue
@@ -49,7 +49,7 @@ input[type='range']:focus {
/* chromium */
input[type='range']::-webkit-slider-runnable-track {
- background-color: rgb(0 0 0 / 0.25);
+ background-color: rgb(var(--color-track) / 0.5);
border-radius: 9999px;
height: 0.75rem;
}
@@ -58,19 +58,19 @@ input[type='range']::-webkit-slider-thumb {
appearance: none;
margin-top: -0.25rem;
border-radius: 9999px;
- background-color: rgb(255 255 255 / 0.7);
+ background-color: rgb(var(--color-track-cursor));
height: 1.25rem;
width: 1.25rem;
}
input[type='range']:focus::-webkit-slider-thumb {
- border: 1px solid #6b6b6b;
- outline: 3px solid #6b6b6b;
+ border: 1px solid rgb(var(--color-track));
+ outline: 3px solid rgb(var(--color-track));
outline-offset: 0.125rem;
}
/* firefox */
input[type='range']::-moz-range-track {
- background-color: rgb(0 0 0 / 0.25);
+ background-color: rgb(var(--color-track) / 0.5);
border-radius: 9999px;
height: 0.75rem;
}
@@ -78,13 +78,13 @@ input[type='range']::-moz-range-thumb {
border: none;
border-radius: 9999px;
margin-top: -0.25rem;
- background-color: rgb(255 255 255 / 0.7);
+ background-color: rgb(var(--color-track-cursor));
height: 1.25rem;
width: 1.25rem;
}
input[type='range']:focus::-moz-range-thumb {
- border: 1px solid #6b6b6b;
- outline: 3px solid #6b6b6b;
+ border: 1px solid rgb(var(--color-track));
+ outline: 3px solid rgb(var(--color-track));
outline-offset: 0.125rem;
}
\ No newline at end of file
diff --git a/components/ui/ToggleBtns.vue b/components/ui/ToggleBtns.vue
index 2312b26f..5b54684e 100644
--- a/components/ui/ToggleBtns.vue
+++ b/components/ui/ToggleBtns.vue
@@ -1,6 +1,6 @@
-
@@ -10,9 +10,6 @@
export default {
props: {
value: String,
- /**
- * [{ "text", "", "value": "" }]
- */
items: {
type: Array,
default: Object
@@ -52,34 +49,12 @@ export default {
.toggle-btn-wrapper .toggle-btn:not(:first-child) {
margin-left: -1px;
}
-
-.toggle-btn::before {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background-color: rgba(255, 255, 255, 0);
- transition: all 0.1s ease-in-out;
-}
-.toggle-btn:hover:not(:disabled)::before {
- background-color: rgba(255, 255, 255, 0.1);
-}
-.toggle-btn:hover:not(:disabled) {
- color: white;
-}
-
.toggle-btn {
- color: rgba(255, 255, 255, 0.75);
+ background-color: rgb(var(--color-bg-toggle));
+ color: rgb(var(--color-fg) / 0.5);
}
.toggle-btn.selected {
- color: white;
-}
-.toggle-btn.selected::before {
- background-color: rgba(255, 255, 255, 0.1);
-}
-button.toggle-btn:disabled::before {
- background-color: rgba(0, 0, 0, 0.2);
+ background-color: rgb(var(--color-bg-toggle-selected));
+ color: rgb(var(--color-fg));
}
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 7c4885fe..2c6497ea 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -22,6 +22,11 @@ module.exports = {
secondary: 'rgb(var(--color-secondary) / )',
primary: 'rgb(var(--color-primary) / )',
border: 'rgb(var(--color-border) / )',
+ 'bg-toggle': 'rgb(var(--color-bg-toggle) / )',
+ 'bg-toggle-selected': 'rgb(var(--color-bg-toggle-selected) / )',
+ 'track-cursor': 'rgb(var(--color-track-cursor) / )',
+ 'track': 'rgb(var(--color-track) / )',
+ 'track-buffered': 'rgb(var(--color-track-buffered) / )',
accent: '#1ad691',
error: '#FF5252',
info: '#2196F3',