tethys.backend/resources/js/Components/SectionFullScreen.vue

<script setup>
import { computed } from 'vue';
import { StyleService } from '@/Stores/style.service';
import { gradientBgPurplePink, gradientBgDark, gradientBgPinkRed, gradientBgGreenBlue } from '@/colors';

const props = defineProps({
    bg: {
        type: String,
        required: false,
        validator: (value) => ['purplePink', 'pinkRed', 'greenBlue'].includes(value),
    },
});

const colorClass = computed(() => {
    if (StyleService().darkMode) {
        return gradientBgDark;
    }

    switch (props.bg) {
        case 'purplePink':
            return gradientBgPurplePink;
        case 'pinkRed':
            return gradientBgPinkRed;
        case 'greenBlue':
            return gradientBgGreenBlue;
        default:
            return 'bg-white text-black dark:bg-slate-900/70 dark:text-white';
    }

    // return 'bg-white';
});
</script>

<template>
    <div class="mx-auto md:h-screen flex flex-col justify-center items-center px-6 pt-8 pt:mt-0" :class="colorClass">
        <slot card-class="w-11/12 md:w-7/12 lg:w-6/12 xl:w-4/12 shadow-2xl" />
    </div>
</template>