tethys.backend/resources/js/Pages/Admin/Settings.vue
2023-03-03 16:54:28 +01:00

53 lines
1.8 KiB
Vue

<script setup>
import { ref, computed } from 'vue';
import { StyleService } from '@/Stores/style.js';
import {
mdiContrastCircle,
mdiInformation,
mdiCheckCircle,
mdiAlert,
mdiAlertCircle,
mdiOpenInNew,
mdiClose,
mdiReload,
mdiTrendingUp,
} from '@mdi/js';
import SectionMain from '@/Components/SectionMain.vue';
import CardBox from '@/Components/CardBox.vue';
// import BaseButtons from '@/Components/BaseButtons.vue';
import BaseButton from '@/Components/BaseButton.vue';
// import NotificationBar from "@/components/NotificationBar.vue";
// import BaseDivider from "@/components/BaseDivider.vue";
// import CardBoxModal from "@/components/CardBoxModal.vue";
import SectionTitle from "@/Components/SectionTitle.vue";
// import FormField from "@/components/FormField.vue";
// import FormCheckRadioGroup from "@/components/FormCheckRadioGroup.vue";
import LayoutAuthenticated from "@/Layouts/LayoutAuthenticated.vue";
// import SectionTitleLineWithButton from "@/components/SectionTitleLineWithButton.vue";
// import CardBoxComponentEmpty from "@/components/CardBoxComponentEmpty.vue";
// import CardBoxComponentTitle from "@/components/CardBoxComponentTitle.vue";
// import PillTag from "@/components/PillTag.vue";
// const modalOneActive = ref(false);
// const modalTwoActive = ref(false);
// const modalThreeActive = ref(false);
// const notificationSettingsModel = ref([]);
const styleService = StyleService();
</script>
<template>
<LayoutAuthenticated>
<SectionTitle first>Dark mode</SectionTitle>
<SectionMain>
<CardBox class="md:w-7/12 lg:w-5/12 xl:w-4/12 shadow-2xl md:mx-auto">
<div class="text-center py-24 lg:py-12 text-gray-500 dark:text-slate-400">
<BaseButton label="Toggle" color="contrast" @click="styleService.setDarkMode()" />
</div>
</CardBox>
</SectionMain>
</LayoutAuthenticated>
</template>