danvics/ytptube
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Merge theme selector into the settings page.

Browse source
This commit is contained in:
arabcoders 2025-03-26 19:17:04 +03:00
parent 1651cc0eca
commit ed1ec6fc6c
2 changed files with 27 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
ui/components/Settings.vue
View file

@ -9,13 +9,32 @@
</span>
</header>
<div class="card-content">
<div class="field">
<label class="label" for="random_bg">Color scheme</label>
<div class="control">
<label for="auto" class="radio">
<input id="auto" type="radio" v-model="selectedTheme" value="auto">
System Default
</label>
<label for="light" class="radio">
<input id="light" type="radio" v-model="selectedTheme" value="light">
Light
</label>
<label for="dark" class="radio">
<input id="dark" type="radio" v-model="selectedTheme" value="dark">
Dark
</label>
</div>
<p class="help">Select the color scheme for the WebUI.</p>
</div>
<div class="field">
<label class="label" for="random_bg">Backgrounds</label>
<div class="control">
<input id="random_bg" type="checkbox" class="switch is-success" v-model="bg_enable">
<label for="random_bg" class="is-unselectable">&nbsp;Enable</label>
<p class="help">Use random background image from your media backends.</p>
</div>
<p class="help">Use random background image from your media backends.</p>
</div>
<div class="field">
@ -25,8 +44,8 @@
<div class="control">
<input id="random_bg_opacity" style="width: 100%" type="range" v-model="bg_opacity" min="0.50" max="1.00"
step="0.05">
<p class="help">How visible the background image should be.</p>
</div>
<p class="help">How visible the background image should be.</p>
</div>
<div class="field" v-if="bg_enable">
@ -41,10 +60,9 @@
<span>Reload</span>
</span>
</button>
<p class="help">Change the displayed picture.</p>
</div>
<p class="help">Change the displayed picture.</p>
</div>
</div>
</div>
</div>
@ -65,5 +83,6 @@ defineProps({
const bg_enable = useStorage('random_bg', true)
const bg_opacity = useStorage('random_bg_opacity', 0.85)
const selectedTheme = useStorage('theme', 'auto')
</script>

26
ui/layouts/default.vue
View file

@ -59,21 +59,6 @@
</NuxtLink>
</div>
<div class="navbar-item">
<button class="button is-dark has-tooltip-bottom" v-tooltip.bottom="'Switch to Light theme'"
v-if="'auto' == selectedTheme" @click="selectTheme('light')">
<span class="icon has-text-warning"><i class="fas fa-sun" /></span>
</button>
<button class="button is-dark has-tooltip-bottom" v-tooltip.bottom="'Switch to Dark theme'"
v-if="'light' == selectedTheme" @click="selectTheme('dark')">
<span class="icon"><i class="fas fa-moon" /></span>
</button>
<button class="button is-dark has-tooltip-bottom" v-tooltip.bottom="'Switch to auto theme'"
v-if="'dark' == selectedTheme" @click="selectTheme('auto')">
<span class="icon"><i class="fas fa-microchip" /></span>
</button>
</div>
<div class="navbar-item is-hidden-mobile">
<button class="button is-dark" @click="reloadPage">
<span class="icon"><i class="fas fa-refresh"></i></span>
@ -191,6 +176,10 @@ watch(() => config.app.sentry_dsn, dsn => {
onMounted(async () => {
try {
await handleImage(bg_enable.value)
} catch (e) {
}
try {
applyPreferredColorScheme(selectedTheme.value)
} catch (e) {
}
@ -204,13 +193,6 @@ watch(selectedTheme, value => {
const reloadPage = () => window.location.reload()
const selectTheme = theme => {
selectedTheme.value = theme
if ('auto' === theme) {
return reloadPage()
}
}
watch(bg_enable, async v => await handleImage(v))
watch(bg_opacity, v => {
if (false === bg_enable.value) {