first commit

src/composables/useTheme.ts

@@ -0,0 +1,61 @@
+import { useThemeStore } from '~/store/theme'
+import { ColorsTheme } from '~~/types'
+
+export const useTheme = () => {
+  const { getColor } = useThemeStore()
+
+  const getThemeTextColor = computed(() => {
+    switch (getColor.value) {
+      case ColorsTheme.BLUE:
+        return 'text-blue-500'
+      case ColorsTheme.ROSE:
+        return 'text-rose-500'
+      case ColorsTheme.ORANGE:
+        return 'text-orange-500'
+      case ColorsTheme.CYAN:
+        return 'text-cyan-500'
+      case ColorsTheme.GREEN:
+        return 'text-green-500'
+      case ColorsTheme.PURPLE:
+        return 'text-purple-500'
+      case ColorsTheme.RED:
+        return 'text-red-500'
+      case ColorsTheme.YELLOW:
+        return 'text-yellow-500'
+      case ColorsTheme.BLACK:
+        return 'text-black dark:text-white'
+      case ColorsTheme.WHITE:
+        return 'text-black dark:text-white'
+    }
+  })
+
+  const getThemeBackgroundColor = computed(() => {
+    switch (getColor.value) {
+      case ColorsTheme.BLUE:
+        return 'bg-blue-500'
+      case ColorsTheme.ROSE:
+        return 'bg-rose-500'
+      case ColorsTheme.ORANGE:
+        return 'bg-orange-500'
+      case ColorsTheme.CYAN:
+        return 'bg-cyan-500'
+      case ColorsTheme.GREEN:
+        return 'bg-green-500'
+      case ColorsTheme.PURPLE:
+        return 'bg-purple-500'
+      case ColorsTheme.RED:
+        return 'bg-red-500'
+      case ColorsTheme.YELLOW:
+        return 'bg-yellow-500'
+      case ColorsTheme.BLACK:
+        return 'bg-black dark:(bg-white text-black) text-white'
+      case ColorsTheme.WHITE:
+        return 'bg-black dark:(bg-white text-black) text-white'
+    }
+  })
+
+  return {
+    getThemeBackgroundColor,
+    getThemeTextColor,
+  }
+}

src/pages/index.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { useThemeStore } from '~/store/theme'
+import { ColorsTheme } from '~~/types'
+
+const { getColor, getTheme, nextColor, nextTheme } = useThemeStore()
+const { getThemeTextColor, getThemeBackgroundColor } = useTheme()
+</script>
+
+<template>
+  <section>
+    <h1 :class="`text-sm ${getThemeTextColor}`">
+      Main page
+    </h1>
+    <h1 :class="`${getThemeBackgroundColor}`">
+      Main Page
+    </h1>
+    <div>
+      Current color : {{ getColor }}
+    </div>
+    <div>
+      Theme Name : {{ getTheme.name }}
+    </div>
+    <div>
+      Theme colors : {{ getTheme.colors.map((color) => color.charAt(0).toUpperCase() + color.slice(1)).join(', ') }}
+    </div>
+    <div @click="nextColor()">
+      setNextColor()
+    </div>
+    <div @click="nextTheme()">
+      setNextTheme()
+    </div>
+  </section>
+</template>

src/plugins/trpc.ts

@@ -0,0 +1,20 @@
+import SuperJSON from 'superjson'
+import { createTRPCNuxtClient, httpBatchLink } from 'trpc-nuxt/client'
+import type { AppRouter } from '~/server/trpc/routers'
+
+export default defineNuxtPlugin(() => {
+  const trpc = createTRPCNuxtClient<AppRouter>({
+    transformer: SuperJSON,
+    links: [
+      httpBatchLink({
+        url: '/api/trpc',
+      }),
+    ],
+  })
+
+  return {
+    provide: {
+      trpc,
+    },
+  }
+})

src/server/api/trpc/[trpc].ts

@@ -0,0 +1,8 @@
+import { createNuxtApiHandler } from 'trpc-nuxt'
+import { createContext } from '~/server/trpc/context'
+import { appRouter } from '~/server/trpc/routers'
+
+export default createNuxtApiHandler({
+  createContext,
+  router: appRouter,
+})

src/server/prisma.ts

@@ -0,0 +1,11 @@
+import { PrismaClient } from '@prisma/client'
+
+const globalForPrisma = globalThis as unknown as { prisma: PrismaClient }
+
+export const prisma = globalForPrisma.prisma
+ || new PrismaClient({
+   log: process.env.NODE_ENV === 'development' ? ['query', 'error', 'warn'] : ['error'],
+ })
+
+if (process.env.NODE_ENV !== 'production')
+  globalForPrisma.prisma = prisma

src/server/trpc/context.ts

@@ -0,0 +1,11 @@
+import type { inferAsyncReturnType } from '@trpc/server'
+import type { H3Event } from 'h3'
+import { prisma } from '~/server/prisma'
+
+export function createContext(_event: H3Event) {
+  return {
+    prisma,
+  }
+}
+
+export type Context = inferAsyncReturnType<typeof createContext>

src/server/trpc/routers/index.ts

@@ -0,0 +1,7 @@
+import { router } from '~/server/trpc/trpc'
+
+export const appRouter = router({
+
+})
+
+export type AppRouter = typeof appRouter

src/server/trpc/trpc.ts

@@ -0,0 +1,12 @@
+import { initTRPC } from '@trpc/server'
+import SuperJSON from 'superjson'
+import type { Context } from '~/server/trpc/context'
+
+const trpc = initTRPC.context<Context>().create({
+  transformer: SuperJSON,
+})
+
+export const publicProcedure = trpc.procedure
+export const router = trpc.router
+export const middleware = trpc.middleware
+export const mergeRouters = trpc.mergeRouters

src/store/theme.ts

@@ -0,0 +1,39 @@
+import { defineStore } from 'pinia'
+import type { ColorsTheme, Theme } from '~~/types'
+import { THEMES, Themes } from '~~/types'
+
+export const useThemeStore = defineStore(
+  'theme',
+  () => {
+    const currentTheme = ref<Theme>(Themes[THEMES.RainbowTheme])
+    const currentColor = ref<ColorsTheme>(currentTheme.value.colors[0])
+
+    const nextTheme = () => {
+      const themes = Object.values(Themes)
+      const currentIndex = themes.findIndex(theme => theme.name === currentTheme.value.name)
+      const nextIndex = (currentIndex + 1) % themes.length
+      currentTheme.value = themes[nextIndex]
+      currentColor.value = currentTheme.value.colors[0]
+    }
+
+    const nextColor = () => {
+      const colors = currentTheme.value.colors
+      const currentIndex = colors.indexOf(currentColor.value)
+      const nextIndex = (currentIndex + 1) % colors.length
+      currentColor.value = colors[nextIndex]
+    }
+
+    const getTheme = computed(() => currentTheme)
+    const getColor = computed(() => currentColor)
+
+    return {
+      getTheme,
+      getColor,
+      nextTheme,
+      nextColor,
+    }
+  },
+  {
+    persist: true,
+  },
+)