mirror of
https://github.com/solidtime-io/solidtime.git
synced 2026-08-09 08:42:15 +01:00
40 lines
1.4 KiB
Vue
40 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import InputLabel from '../../../packages/ui/src/Input/InputLabel.vue';
|
|
import FormSection from '@/Components/FormSection.vue';
|
|
import { usePreferredColorScheme } from '@vueuse/core';
|
|
import { themeSetting } from '@/utils/theme';
|
|
|
|
const preferredColor = usePreferredColorScheme();
|
|
</script>
|
|
|
|
<template>
|
|
<FormSection>
|
|
<template #title> Theme</template>
|
|
|
|
<template #description> Choose how you want solidtime to look on your device </template>
|
|
|
|
<template #form>
|
|
<div class="col-span-6 sm:col-span-4">
|
|
<InputLabel for="theme" value="Theme" />
|
|
<select
|
|
id="theme"
|
|
v-model="themeSetting"
|
|
name="theme"
|
|
required
|
|
class="mt-1 block w-full border-input-border bg-input-background text-text-primary focus:border-input-border-active rounded-md shadow-sm">
|
|
<option value="system">System</option>
|
|
<option value="light">Light</option>
|
|
<option value="dark">Dark</option>
|
|
</select>
|
|
<p
|
|
v-if="themeSetting === 'system'"
|
|
class="w-full text-sm text-text-tertiary font-medium mt-2">
|
|
System default: {{ preferredColor }}
|
|
</p>
|
|
</div>
|
|
</template>
|
|
</FormSection>
|
|
</template>
|
|
|
|
<style scoped></style>
|