homebox/frontend/pages/profile.vue

<script setup lang="ts">
  import { DaisyTheme } from "~~/composables/use-preferences";

  definePageMeta({
    layout: "home",
  });
  useHead({
    title: "Homebox | Profile",
  });

  const { setTheme } = useTheme();

  type ThemeOption = {
    label: string;
    value: DaisyTheme;
  };

  const themes: ThemeOption[] = [
    {
      label: "Garden",
      value: "garden",
    },
    {
      label: "Light",
      value: "light",
    },
    {
      label: "Cupcake",
      value: "cupcake",
    },
    {
      label: "Bumblebee",
      value: "bumblebee",
    },
    {
      label: "Emerald",
      value: "emerald",
    },
    {
      label: "Corporate",
      value: "corporate",
    },
    {
      label: "Synthwave",
      value: "synthwave",
    },
    {
      label: "Retro",
      value: "retro",
    },
    {
      label: "Cyberpunk",
      value: "cyberpunk",
    },
    {
      label: "Valentine",
      value: "valentine",
    },
    {
      label: "Halloween",
      value: "halloween",
    },
    {
      label: "Forest",
      value: "forest",
    },
    {
      label: "Aqua",
      value: "aqua",
    },
    {
      label: "Lofi",
      value: "lofi",
    },
    {
      label: "Pastel",
      value: "pastel",
    },
    {
      label: "Fantasy",
      value: "fantasy",
    },
    {
      label: "Wireframe",
      value: "wireframe",
    },
    {
      label: "Black",
      value: "black",
    },
    {
      label: "Luxury",
      value: "luxury",
    },
    {
      label: "Dracula",
      value: "dracula",
    },
    {
      label: "Cmyk",
      value: "cmyk",
    },
    {
      label: "Autumn",
      value: "autumn",
    },
    {
      label: "Business",
      value: "business",
    },
    {
      label: "Acid",
      value: "acid",
    },
    {
      label: "Lemonade",
      value: "lemonade",
    },
    {
      label: "Night",
      value: "night",
    },
    {
      label: "Coffee",
      value: "coffee",
    },
    {
      label: "Winter",
      value: "winter",
    },
  ];
</script>

<template>
  <BaseContainer>
    <BaseCard>
      <template #title>
        <BaseSectionHeader>
          <Icon name="mdi-fill" class="mr-2 text-base-600" />
          <span class="text-base-600"> Theme Selector </span>

          <template #description>
            Theme settings are stored in your browser's local storage. You can change the theme at any time. If you're
            having trouble setting your theme try refreshing your browser.
          </template>
        </BaseSectionHeader>
      </template>

      <div class="px-4 pb-4">
        <div class="rounded-box grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
          <div
            v-for="theme in themes"
            :key="theme.value"
            class="border-base-content/20 hover:border-base-content/40 outline-base-content overflow-hidden rounded-lg border outline-2 outline-offset-2"
            :data-theme="theme.value"
            :data-set-theme="theme.value"
            data-act-class="outline"
            @click="setTheme(theme.value)"
          >
            <div :data-theme="theme.value" class="bg-base-100 text-base-content w-full cursor-pointer font-sans">
              <div class="grid grid-cols-5 grid-rows-3">
                <div class="bg-base-200 col-start-1 row-span-2 row-start-1"></div>
                <div class="bg-base-300 col-start-1 row-start-3"></div>
                <div class="bg-base-100 col-span-4 col-start-2 row-span-3 row-start-1 flex flex-col gap-1 p-2">
                  <div class="font-bold">{{ theme.label }}</div>
                  <div class="flex flex-wrap gap-1">
                    <div class="bg-primary flex aspect-square w-5 items-center justify-center rounded lg:w-6">
                      <div class="text-primary-content text-sm font-bold">A</div>
                    </div>
                    <div class="bg-secondary flex aspect-square w-5 items-center justify-center rounded lg:w-6">
                      <div class="text-secondary-content text-sm font-bold">A</div>
                    </div>
                    <div class="bg-accent flex aspect-square w-5 items-center justify-center rounded lg:w-6">
                      <div class="text-accent-content text-sm font-bold">A</div>
                    </div>
                    <div class="bg-neutral flex aspect-square w-5 items-center justify-center rounded lg:w-6">
                      <div class="text-neutral-content text-sm font-bold">A</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </BaseCard>
  </BaseContainer>
</template>

<style scoped></style>