sudoxreboot/audiobookshelf-atv
1
0
Fork 0
mirror of https://github.com/sudoxnym/audiobookshelf-atv.git synced 2026-07-21 03:04:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #1608 from NickSkier/ui_black_theme

Browse source 
Add: UI Black/OLED theme
This commit is contained in:
advplyr 2025-06-20 16:55:41 -05:00 committed by GitHub
commit 6a2f487ed5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 30 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
assets/tailwind.css
View file

@ -22,6 +22,25 @@
--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%);
}
html[data-theme='black'] {
color: white;
--color-bg: 0 0 0;
--color-bg-hover: 0 0 0;
--color-fg: 230 237 243;
--color-fg-muted: 120 126 132;
--color-primary: 0 0 0;
--color-secondary: 0 0 0;
--color-border: 55 62 65;
--color-bg-toggle: 0 0 0;
--color-bg-toggle-selected: 35 35 35;
--color-track-cursor: 229 231 235;
--color-track: 107 114 128;
--color-track-buffered: 75 85 99;
--gradient-item-page: rgb(0, 0, 0);
--gradient-audio-player: rgb(0, 0, 0);
--gradient-minimized-audio-player: rgb(0, 0, 0);
}
html[data-theme='light'] {
color: black;
--color-bg: 255 255 255;

11
components/app/AudioPlayer.vue
View file

@ -4,15 +4,15 @@
<div class="w-full h-full absolute top-0 left-0 pointer-events-none" style="background: var(--gradient-audio-player)" />
<div class="top-4 left-4 absolute cursor-pointer">
<span class="material-symbols text-5xl" :class="{ 'text-black text-opacity-75': coverBgIsLight }" @click="collapseFullscreen">keyboard_arrow_down</span>
<span class="material-symbols text-5xl" :class="{ 'text-black text-opacity-75': coverBgIsLight && theme !== 'black' }" @click="collapseFullscreen">keyboard_arrow_down</span>
</div>
<div v-show="showCastBtn" class="top-6 right-16 absolute cursor-pointer">
<span class="material-symbols text-3xl" :class="coverBgIsLight ? 'text-black' : ''" @click="castClick">{{ isCasting ? 'cast_connected' : 'cast' }}</span>
<span class="material-symbols text-3xl" :class="coverBgIsLight && theme !== 'black' ? 'text-black' : ''" @click="castClick">{{ isCasting ? 'cast_connected' : 'cast' }}</span>
</div>
<div class="top-6 right-4 absolute cursor-pointer">
<span class="material-symbols text-3xl" :class="{ 'text-black text-opacity-75': coverBgIsLight }" @click="showMoreMenuDialog = true">more_vert</span>
<span class="material-symbols text-3xl" :class="{ 'text-black text-opacity-75': coverBgIsLight && theme !== 'black' }" @click="showMoreMenuDialog = true">more_vert</span>
</div>
<p class="top-4 absolute left-0 right-0 mx-auto text-center uppercase tracking-widest text-opacity-75" :class="{ 'text-black text-opacity-75': coverBgIsLight }" style="font-size: 10px">{{ isDirectPlayMethod ? $strings.LabelPlaybackDirect : isLocalPlayMethod ? $strings.LabelPlaybackLocal : $strings.LabelPlaybackTranscode }}</p>
<p class="top-4 absolute left-0 right-0 mx-auto text-center uppercase tracking-widest text-opacity-75" :class="{ 'text-black text-opacity-75': coverBgIsLight && theme !== 'black' }" style="font-size: 10px">{{ isDirectPlayMethod ? $strings.LabelPlaybackDirect : isLocalPlayMethod ? $strings.LabelPlaybackLocal : $strings.LabelPlaybackTranscode }}</p>
</div>
<div v-if="playerSettings.useChapterTrack && playerSettings.useTotalTrack && showFullscreen" class="absolute total-track w-full z-30 px-6">
@ -182,6 +182,9 @@ export default {
}
},
computed: {
theme() {
return document.documentElement.dataset.theme || 'dark'
},
menuItems() {
const items = []
// TODO: Implement on iOS

4
pages/settings.vue
View file

@ -363,6 +363,10 @@ export default {
},
themeOptionItems() {
return [
{
text: this.$strings.LabelThemeBlack,
value: 'black'
},
{
text: this.$strings.LabelThemeDark,
value: 'dark'