59 lines
1.4 KiB
Vue
59 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import type {CookieRef} from "#app";
|
|
|
|
definePageMeta({
|
|
layout: "dashboard"
|
|
})
|
|
|
|
const colors_list = ref(["Cyan","Red","Green","Blue","Purple"])
|
|
const color = ref("...");
|
|
|
|
const fonts_list = ref(["Public Sans","Space Grotesk", "Geist"])
|
|
const font = ref("...");
|
|
|
|
onMounted(() => {
|
|
color.value = ui_color_cookie().value
|
|
})
|
|
|
|
watch(color, (newVal, oldVal) => {
|
|
ui_color_cookie().value = newVal;
|
|
})
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<DashboardHeader title="Customization" />
|
|
|
|
<UContainer class="mt-4 max-w-full justify-center">
|
|
<UFormField
|
|
label="Main Color"
|
|
orientation="horizontal"
|
|
description="Select the main color of the UI"
|
|
size="lg"
|
|
class="flex justify-between w-full mt-3 mb-3"
|
|
>
|
|
<USelect v-model="color" :items="colors_list" />
|
|
</UFormField>
|
|
<UFormField
|
|
label="Mode"
|
|
orientation="horizontal"
|
|
description="Select if you want Light or Dark mode"
|
|
size="lg"
|
|
class="flex justify-between w-full mt-3 mb-3"
|
|
>
|
|
<UColorModeSelect />
|
|
</UFormField>
|
|
<UFormField
|
|
label="Font"
|
|
orientation="horizontal"
|
|
description="Select which font you want"
|
|
size="lg"
|
|
class="flex justify-between w-full mt-3 mb-3"
|
|
>
|
|
<USelect v-model="font" :items="fonts_list" />
|
|
</UFormField>
|
|
</UContainer>
|
|
</template>
|
|
|