145 lines
4.4 KiB
Vue
145 lines
4.4 KiB
Vue
<template>
|
|
<nav class="navbar is-mobile is-dark">
|
|
<div class="navbar-brand pl-5">
|
|
<a class="navbar-item has-tooltip-bottom" :class="config.isConnected ? 'has-text-success' : 'has-text-danger'"
|
|
v-tooltip="config.isConnected ? 'Connected' : 'Connecting'" href="javascript:void(0);">
|
|
<b>YTPTube</b>
|
|
</a>
|
|
</div>
|
|
<div class="navbar-end">
|
|
<div class="navbar-item">
|
|
<button v-tooltip="'Show/Hide Add Form'" class="button is-dark has-tooltip-bottom" @click="$emit('toggleForm')">
|
|
<font-awesome-icon icon="fa-solid fa-plus" />
|
|
</button>
|
|
</div>
|
|
<div class="navbar-item" v-if="config.tasks.length > 0">
|
|
<button v-tooltip="'Show/Hide Tasks'" class="button is-dark has-tooltip-bottom" @click="$emit('toggleTasks')">
|
|
<font-awesome-icon icon="fa-solid fa-tasks" />
|
|
</button>
|
|
</div>
|
|
<div class="navbar-item">
|
|
<button v-tooltip="'Reload window'" class="button is-dark has-tooltip-bottom" @click="$emit('reload')">
|
|
<font-awesome-icon icon="fa-solid fa-rotate-right" />
|
|
</button>
|
|
</div>
|
|
<div class="navbar-item">
|
|
<button v-tooltip="'Switch to Light theme'" class="button is-dark has-tooltip-bottom"
|
|
@click="selectedTheme = 'light'" v-if="selectedTheme == 'dark'">
|
|
<span class="icon is-small is-left has-text-warning">
|
|
<font-awesome-icon icon="fa-solid fa-sun" />
|
|
</span>
|
|
</button>
|
|
<button v-tooltip="'Switch to Dark theme'" class="button is-dark has-tooltip-bottom"
|
|
@click="selectedTheme = 'dark'" v-if="selectedTheme == 'light'">
|
|
<span class="icon is-small is-left">
|
|
<font-awesome-icon icon="fa-solid fa-moon" />
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineProps, defineEmits, watch, onMounted } from 'vue'
|
|
import { useStorage } from '@vueuse/core'
|
|
|
|
const selectedTheme = useStorage('theme', (() => window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')());
|
|
|
|
defineEmits(['toggleForm', 'toggleTasks'])
|
|
|
|
defineProps({
|
|
config: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
const applyPreferredColorScheme = (scheme) => {
|
|
for (var s = 0; s < document.styleSheets.length; s++) {
|
|
for (var i = 0; i < document.styleSheets[s].cssRules.length; i++) {
|
|
try {
|
|
const rule = document.styleSheets[s].cssRules[i];
|
|
if (rule && rule.media && rule.media.mediaText.includes("prefers-color-scheme")) {
|
|
switch (scheme) {
|
|
case "light":
|
|
rule.media.appendMedium("original-prefers-color-scheme");
|
|
if (rule.media.mediaText.includes("light")) {
|
|
rule.media.deleteMedium("(prefers-color-scheme: light)");
|
|
}
|
|
if (rule.media.mediaText.includes("dark")) {
|
|
rule.media.deleteMedium("(prefers-color-scheme: dark)");
|
|
}
|
|
break;
|
|
case "dark":
|
|
rule.media.appendMedium("(prefers-color-scheme: light)");
|
|
rule.media.appendMedium("(prefers-color-scheme: dark)");
|
|
if (rule.media.mediaText.includes("original")) {
|
|
rule.media.deleteMedium("original-prefers-color-scheme");
|
|
}
|
|
break;
|
|
default:
|
|
rule.media.appendMedium("(prefers-color-scheme: dark)");
|
|
if (rule.media.mediaText.includes("light")) {
|
|
rule.media.deleteMedium("(prefers-color-scheme: light)");
|
|
}
|
|
if (rule.media.mediaText.includes("original")) {
|
|
rule.media.deleteMedium("original-prefers-color-scheme");
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
} catch (e) {
|
|
console.debug(e);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
try {
|
|
applyPreferredColorScheme(selectedTheme.value);
|
|
} catch (e) {
|
|
console.debug(e);
|
|
}
|
|
})
|
|
|
|
watch(selectedTheme, (value) => {
|
|
try {
|
|
applyPreferredColorScheme(value);
|
|
} catch (e) {
|
|
console.debug(e);
|
|
}
|
|
})
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.navbar-item {
|
|
display: flex;
|
|
}
|
|
|
|
.navbar,
|
|
.navbar-menu,
|
|
.navbar-start,
|
|
.navbar-end {
|
|
align-items: stretch;
|
|
display: flex;
|
|
padding: 0;
|
|
}
|
|
|
|
.navbar-menu {
|
|
flex-grow: 1;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.navbar-start {
|
|
justify-content: flex-start;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.navbar-end {
|
|
justify-content: flex-end;
|
|
margin-left: auto;
|
|
}
|
|
</style>
|