Refactor app configuration and styles: remove unused color variables, enhance AppHeader theme switching, and update AppVisitors badge styling.

app/app.config.ts

@@ -5,28 +5,7 @@ export default defineAppConfig({
     },
     colors: {
       primary: 'neutral',
-      white: 'white',
-      black: 'black',
       neutral: 'neutral',
-      red: 'red',
-      green: 'green',
-      blue: 'blue',
-      yellow: 'yellow',
-      purple: 'purple',
-      pink: 'pink',
-      indigo: 'indigo',
-      cyan: 'cyan',
-      teal: 'teal',
-      gray: 'gray',
-      orange: 'orange',
-      amber: 'amber',
-      lime: 'lime',
-      emerald: 'emerald',
-      rose: 'rose',
-      sky: 'sky',
-      violet: 'violet',
-      fuchsia: 'fuchsia',
-      lightBlue: 'lightBlue',
     },
   },
 })

app/app.vue

@@ -18,8 +18,11 @@ useHead({
 </template>
 
 <style scoped>
+@reference "@/assets/css/main.css";
+
 body {
   font-family: 'DM Sans', sans-serif;
+  @apply text-red-200;
 }
 
 .sofia {

app/assets/css/main.css

@@ -3,12 +3,32 @@
 
 @plugin "@tailwindcss/typography";
 
+@theme static {
+  --animate-wave: wave 3s infinite
+}
+
 :root {
     --ui-white: #ffffff;
+    --ui-bg-white: #f8f8f8;
     --ui-black: #000000;
+    --ui-bg-black: #1a1a1a;
 }
 
 .dark {
     --ui-white: #ffffff;
     --ui-black: #000000;
-}
+    --ui-bg-white: #f8f8f8;
+    --ui-bg-black: #1a1a1a;
+}
+
+@keyframes wave {
+    0%,
+    50%,
+    100% {
+      transform: rotate(-12deg);
+    }
+    25%, 75% {
+      transform: rotate(3deg) scale(1.5);
+    }
+  }
+

app/components/AppBackground.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 const points = useState(() => Array.from({ length: 45 }).fill(0).map(() => [Math.random(), Math.random()]))
-const poly = computed(() => points.value.map(([x, y]) => `${x * 100}% ${y * 100}%`).join(', '))
+const poly = computed(() => points.value.map(([x, y]) => `${x! * 100}% ${y! * 100}%`).join(', '))
 
 function jumpVal(val: number) {
   return Math.random() > 0.5 ? val + (Math.random() - 0.5) / 2 : Math.random()

app/components/AppHeader.vue

@@ -2,10 +2,46 @@
 import { socials } from '~~/types'
 
 const colorMode = useColorMode()
-const isDark = ref(colorMode.value === 'dark')
-watch(isDark, () => {
-  colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
-})
+const nextTheme = computed(() => (colorMode.value === 'dark' ? 'light' : 'dark'))
+
+function switchTheme() {
+  colorMode.preference = nextTheme.value
+}
+
+function startViewTransition(event: MouseEvent | { clientX: number, clientY: number }) {
+  if (!document.startViewTransition) {
+    switchTheme()
+    return
+  }
+
+  const x = event.clientX
+  const y = event.clientY
+  const endRadius = Math.hypot(
+    Math.max(x, window.innerWidth - x),
+    Math.max(y, window.innerHeight - y),
+  )
+
+  const transition = document.startViewTransition(() => {
+    switchTheme()
+  })
+
+  transition.ready.then(() => {
+    const duration = 500
+    document.documentElement.animate(
+      {
+        clipPath: [
+          `circle(0px at ${x}px ${y}px)`,
+          `circle(${endRadius}px at ${x}px ${y}px)`,
+        ],
+      },
+      {
+        duration,
+        easing: 'cubic-bezier(.76,.32,.29,.66)',
+        pseudoElement: '::view-transition-new(root)',
+      },
+    )
+  })
+}
 
 const navs = [
   {
@@ -56,17 +92,6 @@ const navs = [
   },
 ]
 
-async function toggleTheme() {
-  document.body.style.animation = 'switch-on .5s'
-  await new Promise(resolve => setTimeout(resolve, 500))
-
-  isDark.value = !isDark.value
-  document.body.style.animation = 'switch-off .5s'
-
-  await new Promise(resolve => setTimeout(resolve, 500))
-  document.body.style.animation = ''
-}
-
 const { locale, setLocale, locales, t } = useI18n()
 const currentLocale = computed(() => locales.value.filter(l => l.code === locale.value)[0])
 const lang = ref(locale.value)
@@ -87,7 +112,7 @@ const openSelectMenu = ref(false)
 const openContactDrawer = ref(false)
 const router = useRouter()
 defineShortcuts({
-  t: () => toggleTheme(),
+  t: () => startViewTransition({ clientX: window.innerWidth, clientY: 0 }),
   l: () => openSelectMenu.value = !openSelectMenu.value,
   c: () => openContactDrawer.value = !openContactDrawer.value,
   backspace: () => router.back(),
@@ -175,12 +200,12 @@ const socialsList = [
           :delay-duration="4"
         >
           <UButton
-            :icon="isDark ? 'i-ph-moon-duotone' : 'i-ph-sun-duotone'"
+            :icon="nextTheme === 'dark' ? 'i-ph-moon-duotone' : 'i-ph-sun-duotone'"
             color="neutral"
             aria-label="switch theme"
             size="sm"
             variant="ghost"
-            @click="toggleTheme()"
+            @click="startViewTransition"
           />
         </UTooltip>
         <UTooltip

app/components/AppVisitors.vue

@@ -6,7 +6,7 @@ const { visitors } = useVisitors()
   <UBadge
     color="green"
     variant="outline"
-    class="shadow-xl fixed bottom-4 right-4 rounded-full px-1.5 py-0.5"
+    class="shadow-xl fixed bottom-4 right-4 rounded-full px-1.5 py-0.5 bg-white ring ring-green-400 dark:bg-neutral-950 dark:ring-green-600"
   >
     <div class="flex items-center gap-1">
       <p class="text-neutral-500">

app/components/home/CatchPhrase.vue

@@ -33,15 +33,3 @@ const { t } = useI18n({
   }
 }
 </i18n>
-
-<style scoped>
-@keyframes wave {
-    0%,
-    100% {
-      transform: rotate(-3deg) scale(1);
-    }
-    50% {
-      transform: rotate(3deg) scale(1.1);
-    }
-  }
-</style>

tailwind.config.ts

@@ -1,55 +0,0 @@
-import type { Config } from 'tailwindcss'
-import typography from '@tailwindcss/typography'
-
-export default <Partial<Config>>{
-  content: [
-    './components/**/*.{vue,js,ts}',
-    './layouts/**/*.vue',
-    './pages/**/*.vue',
-    './composables/**/*.{js,ts}',
-    './plugins/**/*.{js,ts}',
-    './utils/**/*.{js,ts}',
-    './App.{js,ts,vue}',
-    './app.{js,ts,vue}',
-    './Error.{js,ts,vue}',
-    './error.{js,ts,vue}',
-    './app.config.{js,ts}',
-    'content/**/*.md',
-  ],
-  theme: {
-    extend: {
-      animation: {
-        wave: 'wave 3s infinite',
-        slide: 'slide 3s infinite',
-      },
-      keyframes: {
-        wave: {
-          '0%, 50%, 100%': {
-            transform: 'rotate(-12deg)',
-          },
-          '25%, 75%': {
-            transform: 'rotate(12deg) scale(1.5)',
-          },
-        },
-        slide: {
-          '0%, 100%': {
-            transform: 'translateX(0) translateY(0)',
-          },
-          '20%': {
-            transform: 'translateX(10px)',
-          },
-          '40%': {
-            transform: 'translateY(-10px) translateX(10px)',
-          },
-          '60%': {
-            transform: 'translateY(10px) translateX(-10px)',
-          },
-          '80%': {
-            transform: 'translateY(-10px)',
-          },
-        },
-      },
-    },
-  },
-  plugins: [typography],
-}