mirror of
https://github.com/unraid/api.git
synced 2026-01-01 06:01:18 -06:00
109 lines
3.2 KiB
Vue
109 lines
3.2 KiB
Vue
<script lang="ts" setup>
|
|
import Input from '~/components/shadcn/input/Input.vue';
|
|
import Label from '~/components/shadcn/label/Label.vue';
|
|
import { defaultColors, useThemeStore, type Theme } from '~/store/theme';
|
|
|
|
const themeStore = useThemeStore();
|
|
const { darkMode } = toRefs(themeStore);
|
|
|
|
const setDarkMode = ref<boolean>(false);
|
|
const setGradient = ref<boolean>(false);
|
|
const setDescription = ref<boolean>(true);
|
|
const setBanner = ref<boolean>(true);
|
|
|
|
const toggleSwitch = (value: boolean) => {
|
|
setDarkMode.value = value;
|
|
};
|
|
const toggleGradient = (value: boolean) => {
|
|
setGradient.value = value;
|
|
};
|
|
const toggleDescription = (value: boolean) => {
|
|
setDescription.value = value;
|
|
};
|
|
const toggleBanner = (value: boolean) => {
|
|
setBanner.value = value;
|
|
};
|
|
|
|
const textPrimary = ref<string>('');
|
|
const textSecondary = ref<string>('');
|
|
const bgColor = ref<string>('');
|
|
|
|
const textPrimaryToSet = computed(() => {
|
|
if (textPrimary.value) {
|
|
return textPrimary.value;
|
|
}
|
|
return darkMode.value
|
|
? defaultColors.dark['--headerTextPrimary']
|
|
: defaultColors.light['--headerTextPrimary'];
|
|
});
|
|
|
|
const textSecondaryToSet = computed(() => {
|
|
if (textSecondary.value) {
|
|
return textSecondary.value;
|
|
}
|
|
return darkMode.value
|
|
? defaultColors.dark['--header-text-secondary']
|
|
: defaultColors.light['--header-text-secondary'];
|
|
});
|
|
|
|
const bgColorToSet = computed(() => {
|
|
if (bgColor.value) {
|
|
return bgColor.value;
|
|
}
|
|
return darkMode.value
|
|
? defaultColors.dark['--header-background']
|
|
: defaultColors.light['--header-background'];
|
|
});
|
|
|
|
watch(
|
|
[
|
|
setDarkMode,
|
|
bgColorToSet,
|
|
textSecondaryToSet,
|
|
textPrimaryToSet,
|
|
setDescription,
|
|
setBanner,
|
|
setGradient,
|
|
],
|
|
(newVal) => {
|
|
console.log(newVal);
|
|
const themeToSet: Theme = {
|
|
banner: setBanner.value,
|
|
bannerGradient: setGradient.value,
|
|
descriptionShow: setDescription.value,
|
|
textColor: textPrimaryToSet.value,
|
|
metaColor: textSecondaryToSet.value,
|
|
bgColor: bgColorToSet.value,
|
|
name: setDarkMode.value ? 'black' : 'light',
|
|
};
|
|
themeStore.setTheme(themeToSet);
|
|
}
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col gap-2 border-solid border-2 p-2 border-r-2">
|
|
<h1 class="text-lg">Color Theme Customization</h1>
|
|
<Label for="header-primary-text">Header Primary Text Color</Label>
|
|
<Input id="header-primary-text" v-model="textPrimary" />
|
|
<Label for="header-secondary-text">Header Secondary Text Color</Label>
|
|
<Input id="header-secondary-text" v-model="textSecondary" />
|
|
<Label for="header-background">Header Background Color</Label>
|
|
<Input id="header-background" v-model="bgColor" />
|
|
<Label for="dark-mode">Dark Mode</Label>
|
|
<Switch id="dark-mode" :checked="setDarkMode" @update:checked="toggleSwitch" />
|
|
<Label for="gradient">Gradient</Label>
|
|
<Switch id="gradient" :checked="setGradient" @update:checked="toggleGradient" />
|
|
<Label for="description">Description</Label>
|
|
<Switch id="description" :checked="setDescription" @update:checked="toggleDescription" />
|
|
<Label for="banner">Banner</Label>
|
|
<Switch id="banner" :checked="setBanner" @update:checked="toggleBanner" />
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="postcss">
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
</style>
|