From d1b9447caa09ca02df007d0c772cc16203c84e76 Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Sat, 15 Jun 2024 15:42:48 -1000
Subject: [PATCH] feat: :sparkles: Allow primary color changes through Tailwind
 config

---
 components/LoginInput.vue                    |  2 +-
 components/buttons/primary.vue               |  2 +-
 components/composer/button.vue               |  2 +-
 components/composer/composer.vue             |  6 ++--
 components/composer/emoji-suggestbox.vue     |  9 +++---
 components/composer/file-uploader.vue        |  2 +-
 components/errors/ErrorBoundary.vue          |  2 +-
 components/inputs/label.vue                  |  4 +--
 components/inputs/text.vue                   |  2 +-
 components/loading.vue                       |  2 +-
 components/notifications/Renderer.vue        |  3 +-
 components/sidebars/navigation.vue           |  8 +++---
 components/social-elements/notes/mention.vue |  2 +-
 components/social-elements/notes/note.vue    |  6 ++--
 components/social-elements/users/Account.vue |  4 +--
 components/social-elements/users/Badge.vue   |  8 +++---
 layouts/app.vue                              |  2 +-
 pages/[username]/[uuid].vue                  |  2 +-
 pages/about/apps.vue                         |  4 +--
 pages/oauth/authorize.vue                    |  4 +--
 pages/oauth/code.vue                         |  2 +-
 pages/oauth/consent.vue                      |  8 +++---
 pages/oauth/reset.vue                        |  2 +-
 pages/register/index.vue                     |  6 ++--
 tailwind.config.ts                           | 30 +++++++++++---------
 25 files changed, 64 insertions(+), 60 deletions(-)

diff --git a/components/LoginInput.vue b/components/LoginInput.vue
index 1d4a3e3..637753d 100644
--- a/components/LoginInput.vue
+++ b/components/LoginInput.vue
@@ -3,7 +3,7 @@
         <label class="block text-sm font-medium leading-6 text-gray-50">{{ label }}</label>
     </div>
     <div class="mt-2">
-        <input v-bind="$attrs" :class="['block disabled:opacity-70 disabled:hover:cursor-wait w-full bg-dark-500 rounded-md border-0 py-1.5 text-gray-50 shadow-sm ring-1 ring-inset ring-white/10 placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-pink-600 sm:text-sm sm:leading-6',
+        <input v-bind="$attrs" :class="['block disabled:opacity-70 disabled:hover:cursor-wait w-full bg-dark-500 rounded-md border-0 py-1.5 text-gray-50 shadow-sm ring-1 ring-inset ring-white/10 placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6',
             isInvalid && '!ring-red-600 ring-2']">
     </div>
 </template>
diff --git a/components/buttons/primary.vue b/components/buttons/primary.vue
index 5e85a69..6c17760 100644
--- a/components/buttons/primary.vue
+++ b/components/buttons/primary.vue
@@ -1,6 +1,6 @@
 <template>
     <ButtonsBase :loading="loading"
-        class="[--btn-border:theme(colors.pink.950/90%)] [--btn-bg:theme(colors.pink.600)] [--btn-hover-overlay:theme(colors.white/5%)] [--btn-icon:theme(colors.pink.400)] active:[--btn-icon:theme(colors.pink.300)] hover:[--btn-icon:theme(colors.pink.300)] after:shadow-[shadow:inset_0_1px_theme(colors.white/15%)] border border-white/5"
+        class="[--btn-border:theme(colors.primary.950/90%)] [--btn-bg:theme(colors.primary.600)] [--btn-hover-overlay:theme(colors.white/5%)] [--btn-icon:theme(colors.primary.400)] active:[--btn-icon:theme(colors.primary.300)] hover:[--btn-icon:theme(colors.primary.300)] after:shadow-[shadow:inset_0_1px_theme(colors.white/15%)] border border-white/5"
         v-bind="$props">
         <slot />
     </ButtonsBase>
diff --git a/components/composer/button.vue b/components/composer/button.vue
index bd1e75c..5b18a5d 100644
--- a/components/composer/button.vue
+++ b/components/composer/button.vue
@@ -1,6 +1,6 @@
 <template>
     <button v-bind="$props"
-        :class="['rounded text-gray-300 hover:bg-dark-900/70 p-2 flex items-center justify-center duration-200', toggled && 'bg-pink-500/70 hover:bg-pink-900/70']">
+        :class="['rounded text-gray-300 hover:bg-dark-900/70 p-2 flex items-center justify-center duration-200', toggled && 'bg-primary-500/70 hover:bg-primary-900/70']">
         <slot />
     </button>
 </template>
diff --git a/components/composer/composer.vue b/components/composer/composer.vue
index 2cdfc2a..40c9f45 100644
--- a/components/composer/composer.vue
+++ b/components/composer/composer.vue
@@ -2,7 +2,7 @@
     <div v-if="respondingTo" class="mb-4" role="region" aria-label="Responding to">
         <OverlayScrollbarsComponent :defer="true" class="max-h-72 overflow-y-auto">
             <LazySocialElementsNotesNote :note="respondingTo" :small="true" :disabled="true"
-                class="!rounded-none !bg-pink-500/10" />
+                class="!rounded-none !bg-primary-500/10" />
         </OverlayScrollbarsComponent>
     </div>
     <div class="px-6 pb-4 pt-5">
@@ -128,7 +128,7 @@ const handlePaste = (event: ClipboardEvent) => {
     }
 };
 
-watch(Control_Alt, () => {
+watch(Control_Alt as ComputedRef<boolean>, () => {
     chosenSplash.value = splashes[Math.floor(Math.random() * splashes.length)];
 });
 
@@ -190,7 +190,7 @@ onMounted(() => {
 });
 
 watchEffect(() => {
-    if (Control_Enter.value || Command_Enter.value) {
+    if (Control_Enter?.value || Command_Enter?.value) {
         send();
     }
 });
diff --git a/components/composer/emoji-suggestbox.vue b/components/composer/emoji-suggestbox.vue
index 2d2b41d..db52d83 100644
--- a/components/composer/emoji-suggestbox.vue
+++ b/components/composer/emoji-suggestbox.vue
@@ -2,7 +2,7 @@
     <ComposerSuggestbox class="max-h-40 overflow-auto !w-auto !flex-row">
         <div v-for="(emoji, index) in topEmojis" :key="emoji.shortcode" @click="emit('autocomplete', emoji.shortcode)"
             :ref="el => { if (el) emojiRefs[index] = el as Element }" :title="emoji.shortcode"
-            :class="['flex', 'justify-center', 'shrink-0', 'items-center', 'p-2', 'size-12', 'hover:bg-dark-900/70', { 'bg-pink-500': index === selectedEmojiIndex }]">
+            :class="['flex', 'justify-center', 'shrink-0', 'items-center', 'p-2', 'size-12', 'hover:bg-dark-900/70', { 'bg-primary-500': index === selectedEmojiIndex }]">
             <img :src="emoji.url" class="w-full h-full object-contain"
                 :alt="`Emoji with shortcode ${emoji.shortcode}`" />
         </div>
@@ -10,7 +10,6 @@
 </template>
 
 <script lang="ts" setup>
-import type { LysandClient } from "@lysand-org/client";
 import { distance } from "fastest-levenshtein";
 import type { CustomEmoji } from "~/composables/Identities";
 const props = defineProps<{
@@ -48,7 +47,7 @@ watchEffect(() => {
             .slice(0, 20);
     else topEmojis.value = null;
 
-    if (ArrowRight.value && topEmojis.value !== null) {
+    if (ArrowRight?.value && topEmojis.value !== null) {
         selectedEmojiIndex.value = (selectedEmojiIndex.value ?? -1) + 1;
         if (selectedEmojiIndex.value >= topEmojis.value.length) {
             selectedEmojiIndex.value = 0;
@@ -59,7 +58,7 @@ watchEffect(() => {
         });
     }
 
-    if (ArrowLeft.value && topEmojis.value !== null) {
+    if (ArrowLeft?.value && topEmojis.value !== null) {
         selectedEmojiIndex.value =
             (selectedEmojiIndex.value ?? topEmojis.value.length) - 1;
         if (selectedEmojiIndex.value < 0) {
@@ -71,7 +70,7 @@ watchEffect(() => {
         });
     }
 
-    if ((Tab.value || Enter.value) && topEmojis.value !== null) {
+    if ((Tab?.value || Enter?.value) && topEmojis.value !== null) {
         const emoji = topEmojis.value[selectedEmojiIndex.value ?? 0];
         if (emoji) emit("autocomplete", emoji.shortcode);
     }
diff --git a/components/composer/file-uploader.vue b/components/composer/file-uploader.vue
index 53431dd..86b273c 100644
--- a/components/composer/file-uploader.vue
+++ b/components/composer/file-uploader.vue
@@ -22,7 +22,7 @@
                     {{ formatBytes(data.file.size) }}
                     <!-- Loader spinner -->
                     <iconify-icon v-if="data.progress < 1.0" icon="tabler:loader-2" width="none"
-                        class="size-4 animate-spin text-pink-500" />
+                        class="size-4 animate-spin text-primary-500" />
                 </div>
                 <button class="absolute top-1 right-1 p-1 bg-dark-800 text-white text-xs rounded size-6" role="button"
                     tabindex="0" @pointerup="removeFile(data.id)" @keydown.enter="removeFile(data.id)">
diff --git a/components/errors/ErrorBoundary.vue b/components/errors/ErrorBoundary.vue
index e945cf3..3109f73 100644
--- a/components/errors/ErrorBoundary.vue
+++ b/components/errors/ErrorBoundary.vue
@@ -2,7 +2,7 @@
     <slot name="error" v-if="error" v-bind="{ error }">
         <div id="error" class="grid min-h-screen place-items-center px-6 py-24 sm:py-32 lg:px-8">
             <div class="text-center prose prose-invert">
-                <p class="text-base font-semibold text-pink-400">404</p>
+                <p class="text-base font-semibold text-primary-400">404</p>
                 <h1 class="mt-4 text-3xl font-bold tracking-tight text-gray-100 sm:text-5xl">{{ error.title }}
                 </h1>
                 <p class="mt-6 text-base leading-7 text-gray-400" v-html="error.message"></p>
diff --git a/components/inputs/label.vue b/components/inputs/label.vue
index 71f749f..0a5d257 100644
--- a/components/inputs/label.vue
+++ b/components/inputs/label.vue
@@ -11,10 +11,10 @@
 <script lang="ts" setup>
 import type { LabelHTMLAttributes } from "vue";
 
-interface Props extends /* @vue-ignore */ LabelHTMLAttributes { }
+interface Props extends /* @vue-ignore */ LabelHTMLAttributes {}
 
 defineOptions({
     inheritAttrs: false,
-})
+});
 const props = defineProps<Props>();
 </script>
\ No newline at end of file
diff --git a/components/inputs/text.vue b/components/inputs/text.vue
index f6b1dd1..e6c7075 100644
--- a/components/inputs/text.vue
+++ b/components/inputs/text.vue
@@ -1,5 +1,5 @@
 <template>
-    <input :class="['block disabled:opacity-70 disabled:hover:cursor-wait w-full bg-dark-500 rounded-md border-0 py-1.5 text-gray-50 shadow-sm ring-1 ring-inset ring-white/10 placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-pink-600 sm:text-sm sm:leading-6',
+    <input :class="['block disabled:opacity-70 disabled:hover:cursor-wait w-full bg-dark-500 rounded-md border-0 py-1.5 text-gray-50 shadow-sm ring-1 ring-inset ring-white/10 placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6',
         isInvalid && '!ring-red-600 ring-2']">
 </template>
 
diff --git a/components/loading.vue b/components/loading.vue
index ab86d7d..5262335 100644
--- a/components/loading.vue
+++ b/components/loading.vue
@@ -1,7 +1,7 @@
 <template>
     <div v-if="loading" class="fixed inset-0 bg-black z-[500] flex items-center justify-center">
         <!-- Progress bar stuck to top -->
-        <div class="fixed top-0 left-0 right-0 h-1.5 bg-pink-500" :style="{ width: `${progress}%` }"></div>
+        <div class="fixed top-0 left-0 right-0 h-1.5 bg-primary-500" :style="{ width: `${progress}%` }"></div>
         <div class="flex flex-col items-center justify-center gap-8">
             <img src="/logo.webp" class="size-20 animate-pulse" role="presentation" />
         </div>
diff --git a/components/notifications/Renderer.vue b/components/notifications/Renderer.vue
index f9a5291..c2bf835 100644
--- a/components/notifications/Renderer.vue
+++ b/components/notifications/Renderer.vue
@@ -20,7 +20,8 @@
                                     <iconify-icon v-else-if="notification.type === 'error'" icon="tabler:alert-triangle"
                                         height="none" class="h-6 w-6 text-red-400" aria-hidden="true" />
                                     <iconify-icon v-else-if="notification.type === 'progress'" icon="tabler:loader"
-                                        height="none" class="h-6 w-6 text-pink-500 animate-spin" aria-hidden="true" />
+                                        height="none" class="h-6 w-6 text-primary-500 animate-spin"
+                                        aria-hidden="true" />
                                 </div>
                                 <div class="ml-3 w-0 flex-1 pt-0.5">
                                     <p class="text-sm font-semibold text-gray-50">{{ notification.title }}</p>
diff --git a/components/sidebars/navigation.vue b/components/sidebars/navigation.vue
index 3f8470d..91ae84d 100644
--- a/components/sidebars/navigation.vue
+++ b/components/sidebars/navigation.vue
@@ -38,7 +38,7 @@
                 class="font-semibold text-gray-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
                 Posts</h3>
             <ButtonsBase v-if="identity" @click="compose" title="Open composer (shortcut: n)"
-                class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10 bg-gradient-to-tr from-pink-300 via-purple-300 to-indigo-400 overflow-hidden h-12 w-full duration-200">
+                class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10 bg-gradient-to-tr from-primary-300 via-purple-300 to-indigo-400 overflow-hidden h-12 w-full duration-200">
                 <iconify-icon icon="tabler:writing" class="shrink-0 text-2xl" />
                 <span class="pr-28 line-clamp-1">Compose</span>
                 <kbd class="text-xs font-semibold rounded bg-dark-500 font-mono px-1 flex flex-row">
@@ -48,7 +48,7 @@
                 </kbd>
             </ButtonsBase>
             <ButtonsBase v-if="$pwa?.needRefresh" @click="$pwa?.updateServiceWorker()" title="Update service worker"
-                class="flex flex-row text-left items-center justify-start gap-3 text-lg ring-2   ring-pink-600 overflow-hidden h-12 w-full duration-200">
+                class="flex flex-row text-left items-center justify-start gap-3 text-lg ring-2   ring-primary-600 overflow-hidden h-12 w-full duration-200">
                 <iconify-icon icon="tabler:refresh" class="shrink-0 text-2xl" />
                 <span class="pr-28 line-clamp-1">Update</span>
             </ButtonsBase>
@@ -82,7 +82,7 @@
             <span class="text-xs">Notifications</span>
         </NuxtLink>
         <button v-if="$pwa?.needRefresh"
-            class="flex flex-col items-center justify-center p-2 rounded ring-2 ring-pink-600"
+            class="flex flex-col items-center justify-center p-2 rounded ring-2 ring-primary-600"
             @click="$pwa?.updateServiceWorker(true)">
             <iconify-icon icon="tabler:refresh" class="text-2xl" />
             <span class="text-xs">Update</span>
@@ -96,7 +96,7 @@
             </button>
         </SidebarsAccountPicker>
         <button @click="compose" v-if="identity"
-            class="flex flex-col items-center justify-center p-2 rounded bg-gradient-to-tr from-pink-300/70 via-purple-300/70 to-indigo-400/70">
+            class="flex flex-col items-center justify-center p-2 rounded bg-gradient-to-tr from-primary-300/70 via-purple-300/70 to-indigo-400/70">
             <iconify-icon icon="tabler:writing" class="text-2xl" />
             <span class="text-xs">Compose</span>
         </button>
diff --git a/components/social-elements/notes/mention.vue b/components/social-elements/notes/mention.vue
index 4133ec2..43d4986 100644
--- a/components/social-elements/notes/mention.vue
+++ b/components/social-elements/notes/mention.vue
@@ -1,6 +1,6 @@
 <template>
     <a :href="`/@${account.acct}`"
-        class="shrink break-all rounded bg-pink-700/80 text-pink-200 px-2 py-1 not-prose font-semibold cursor-pointer [&:not(:last-child)]:mr-1 duration-200 hover:bg-pink-600/30">
+        class="shrink break-all rounded bg-primary-700/80 text-primary-200 px-2 py-1 not-prose font-semibold cursor-pointer [&:not(:last-child)]:mr-1 duration-200 hover:bg-primary-600/30">
         <img class="size-[1em] rounded ring-1 ring-white/5 !inline align-middle mb-1 mr-1" :src="account.avatar"
             :alt="`${account.acct}'s avatar'`" />
         {{ account.display_name }}
diff --git a/components/social-elements/notes/note.vue b/components/social-elements/notes/note.vue
index 9541dea..641dd32 100644
--- a/components/social-elements/notes/note.vue
+++ b/components/social-elements/notes/note.vue
@@ -4,7 +4,7 @@
         <!-- Overlay that blocks clicks for disabled notes -->
         <div v-if="disabled" class="absolute z-10 inset-0 hover:cursor-not-allowed">
         </div>
-        <div v-if="reblog" class="mb-4 flex flex-row gap-2 items-center text-pink-400">
+        <div v-if="reblog" class="mb-4 flex flex-row gap-2 items-center text-primary-400">
             <Skeleton :enabled="!loaded" shape="rect" class="!h-6" :min-width="40" :max-width="100" width-unit="%">
                 <iconify-icon width="1.5rem" height="1.5rem" icon="tabler:repeat" class="size-6" aria-hidden="true" />
                 <AvatarsCentered v-if="reblog.avatar" :src="reblog.avatar" :alt="`${reblog.acct}'s avatar'`"
@@ -27,9 +27,9 @@
                 </button>
                 <button class="group" @click="likeFn" :disabled="!identity">
                     <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:heart" v-if="!outputtedNote?.favourited"
-                        class="size-5 text-gray-200 group-hover:group-enabled:text-pink-600" aria-hidden="true" />
+                        class="size-5 text-gray-200 group-hover:group-enabled:text-primary-600" aria-hidden="true" />
                     <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:heart-filled" v-else
-                        class="size-5 text-pink-600 group-hover:group-enabled:text-gray-200" aria-hidden="true" />
+                        class="size-5 text-primary-600 group-hover:group-enabled:text-gray-200" aria-hidden="true" />
                     <span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(outputtedNote?.favourites_count) }}</span>
                 </button>
                 <button class="group" @click="reblogFn" :disabled="!identity">
diff --git a/components/social-elements/users/Account.vue b/components/social-elements/users/Account.vue
index 9463312..1a35391 100644
--- a/components/social-elements/users/Account.vue
+++ b/components/social-elements/users/Account.vue
@@ -25,7 +25,7 @@
 
         <div class="mt-2 px-4">
             <h2
-                class="text-xl font-bold text-gray-100 tracking-tight bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-400 text-transparent bg-clip-text">
+                class="text-xl font-bold text-gray-100 tracking-tight bg-gradient-to-r from-primary-300 via-purple-300 to-indigo-400 text-transparent bg-clip-text">
                 <Skeleton :enabled="skeleton" :min-width="200" :max-width="350" class="h-6">
                     {{ account?.display_name }}
                     <iconify-icon v-if="account?.locked" icon="tabler:lock" width="1.25rem" height="1.25rem"
@@ -81,7 +81,7 @@
 
         <div v-if="!skeleton && parsedFields.length > 0" class="mt-4 px-4 flex-col flex space-y-3">
             <div v-for="field of parsedFields" :key="field.name" class="flex flex-col gap-1">
-                <span class="text-pink-500 font-semibold" v-html="field.name"></span>
+                <span class="text-primary-500 font-semibold" v-html="field.name"></span>
                 <span class="text-gray-200 prose prose-invert break-all" v-html="field.value"></span>
             </div>
         </div>
diff --git a/components/social-elements/users/Badge.vue b/components/social-elements/users/Badge.vue
index a7b8667..b0584f3 100644
--- a/components/social-elements/users/Badge.vue
+++ b/components/social-elements/users/Badge.vue
@@ -1,9 +1,9 @@
 <template>
     <Tooltip.Root @update:open="(o) => open = o" :open="open" :open-delay="0">
         <Tooltip.Trigger><span
-                class="inline-flex items-center px-2 py-1 gap-x-2 rounded text-sm font-medium bg-dark-300 text-pink-200 ring-white/5 ring-1">
+                class="inline-flex items-center px-2 py-1 gap-x-2 rounded text-sm font-medium bg-dark-300 text-primary-200 ring-white/5 ring-1">
                 <svg viewBox="0 0 22 22" v-if="verified" aria-label="Verified account" role="img"
-                    class="size-4 fill-pink-500">
+                    class="size-4 fill-primary-500">
                     <g>
                         <path
                             d="M20.396 11c-.018-.646-.215-1.275-.57-1.816-.354-.54-.852-.972-1.438-1.246.223-.607.27-1.264.14-1.897-.131-.634-.437-1.218-.882-1.687-.47-.445-1.053-.75-1.687-.882-.633-.13-1.29-.083-1.897.14-.273-.587-.704-1.086-1.245-1.44S11.647 1.62 11 1.604c-.646.017-1.273.213-1.813.568s-.969.854-1.24 1.44c-.608-.223-1.267-.272-1.902-.14-.635.13-1.22.436-1.69.882-.445.47-.749 1.055-.878 1.688-.13.633-.08 1.29.144 1.896-.587.274-1.087.705-1.443 1.245-.356.54-.555 1.17-.574 1.817.02.647.218 1.276.574 1.817.356.54.856.972 1.443 1.245-.224.606-.274 1.263-.144 1.896.13.634.433 1.218.877 1.688.47.443 1.054.747 1.687.878.633.132 1.29.084 1.897-.136.274.586.705 1.084 1.246 1.439.54.354 1.17.551 1.816.569.647-.016 1.276-.213 1.817-.567s.972-.854 1.245-1.44c.604.239 1.266.296 1.903.164.636-.132 1.22-.447 1.68-.907.46-.46.776-1.044.908-1.681s.075-1.299-.165-1.903c.586-.274 1.084-.705 1.439-1.246.354-.54.551-1.17.569-1.816zM9.662 14.85l-3.429-3.428 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z">
@@ -11,7 +11,7 @@
                     </g>
                 </svg>
                 <img v-else-if="img" :src="img" alt="" class="size-4 rounded-sm" />
-                <iconify-icon v-else-if="icon" :icon="icon" width="none" class="text-pink-200 size-4"
+                <iconify-icon v-else-if="icon" :icon="icon" width="none" class="text-primary-200 size-4"
                     aria-hidden="true" />
                 <span>{{ name }}</span>
             </span></Tooltip.Trigger>
@@ -24,7 +24,7 @@
                 <Tooltip.Content v-if="open"
                     class="rounded px-4 py-2 text-sm bg-dark-400 text-gray-200 ring-1 ring-white/10 shadow-xl">
                     <svg viewBox="0 0 22 22" v-if="verified" aria-label="Verified account" role="img"
-                        class="size-4 fill-pink-500 inline mb-0.5">
+                        class="size-4 fill-primary-500 inline mb-0.5">
                         <g>
                             <path
                                 d="M20.396 11c-.018-.646-.215-1.275-.57-1.816-.354-.54-.852-.972-1.438-1.246.223-.607.27-1.264.14-1.897-.131-.634-.437-1.218-.882-1.687-.47-.445-1.053-.75-1.687-.882-.633-.13-1.29-.083-1.897.14-.273-.587-.704-1.086-1.245-1.44S11.647 1.62 11 1.604c-.646.017-1.273.213-1.813.568s-.969.854-1.24 1.44c-.608-.223-1.267-.272-1.902-.14-.635.13-1.22.436-1.69.882-.445.47-.749 1.055-.878 1.688-.13.633-.08 1.29.144 1.896-.587.274-1.087.705-1.443 1.245-.356.54-.555 1.17-.574 1.817.02.647.218 1.276.574 1.817.356.54.856.972 1.443 1.245-.224.606-.274 1.263-.144 1.896.13.634.433 1.218.877 1.688.47.443 1.054.747 1.687.878.633.132 1.29.084 1.897-.136.274.586.705 1.084 1.246 1.439.54.354 1.17.551 1.816.569.647-.016 1.276-.213 1.817-.567s.972-.854 1.245-1.44c.604.239 1.266.296 1.903.164.636-.132 1.22-.447 1.68-.907.46-.46.776-1.044.908-1.681s.075-1.299-.165-1.903c.586-.274 1.084-.705 1.439-1.246.354-.54.551-1.17.569-1.816zM9.662 14.85l-3.429-3.428 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z">
diff --git a/layouts/app.vue b/layouts/app.vue
index 2eac2a9..1d34626 100644
--- a/layouts/app.vue
+++ b/layouts/app.vue
@@ -15,7 +15,7 @@
                 <!-- <div class="mt-auto prose prose-invert prose-sm flex flex-col gap-4 px-10 pb-10" v-if="!tokenData">
                         <div class="text-center">
                             <strong
-                                class="bg-gradient-to-tr from-pink-300 via-purple-300 to-indigo-400 text-transparent bg-clip-text">Lysand
+                                class="bg-gradient-to-tr from-primary-300 via-purple-300 to-indigo-400 text-transparent bg-clip-text">Lysand
                                 {{ instance?.lysand_version ?? instance?.version }}</strong> • <a
                                 href="https://github.com/lysand-org/lysand" target="_blank">Source Code</a>• <a
                                 href="https://github.com/lysand-org/lysand/issues" target="_blank">Report an Issue</a>
diff --git a/pages/[username]/[uuid].vue b/pages/[username]/[uuid].vue
index 1f1d00a..e3e5bd9 100644
--- a/pages/[username]/[uuid].vue
+++ b/pages/[username]/[uuid].vue
@@ -2,7 +2,7 @@
     <div v-if="loaded" :defer="true" class="mx-auto max-w-2xl w-full pb-72">
         <LazySocialElementsNotesNote v-for="note of context?.ancestors" :note="note" />
         <div ref="element" class="first:rounded-t last:rounded-b overflow-hidden">
-            <LazySocialElementsNotesNote class="!rounded-none border-2 border-pink-500" v-if="note" :note="note" />
+            <LazySocialElementsNotesNote class="!rounded-none border-2 border-primary-500" v-if="note" :note="note" />
         </div>
         <LazySocialElementsNotesNote v-for="note of context?.descendants" :note="note" />
     </div>
diff --git a/pages/about/apps.vue b/pages/about/apps.vue
index a833f61..123b41b 100644
--- a/pages/about/apps.vue
+++ b/pages/about/apps.vue
@@ -11,7 +11,7 @@
                     <img crossorigin="anonymous" :src="client.icon" class="h-10 w-10" :alt="`${client.name}'s logo'`" />
                     <div class="flex flex-col justify-between items-start">
                         <h2 class="text-gray-100 font-semibold">{{ client.name }}</h2>
-                        <span class="underline text-pink-700">{{ client.link }}</span>
+                        <span class="underline text-primary-700">{{ client.link }}</span>
                     </div>
                 </a>
             </li>
@@ -28,7 +28,7 @@
 
         <p>
             Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose"
-                target="_blank" class="underline text-pink-700">the issue tracker</a>.
+                target="_blank" class="underline text-primary-700">the issue tracker</a>.
         </p>
     </div>
 </template>
diff --git a/pages/oauth/authorize.vue b/pages/oauth/authorize.vue
index ba3f79c..f4b1141 100644
--- a/pages/oauth/authorize.vue
+++ b/pages/oauth/authorize.vue
@@ -64,7 +64,7 @@
                             class="h-10 w-10" />
                         <div class="flex flex-col justify-between items-start">
                             <h2 class="font-bold text-gray-100">{{ client.name }}</h2>
-                            <span class="underline text-pink-700">{{ client.link }}</span>
+                            <span class="underline text-primary-700">{{ client.link }}</span>
                         </div>
                     </a>
                 </li>
@@ -76,7 +76,7 @@
 
             <p class="mt-6 text-lg leading-8 text-gray-300">
                 Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose"
-                    target="_blank" class="underline text-pink-700">the issue tracker</a>.
+                    target="_blank" class="underline text-primary-700">the issue tracker</a>.
             </p>
         </div>
     </div>
diff --git a/pages/oauth/code.vue b/pages/oauth/code.vue
index 2a9c37b..af915fd 100644
--- a/pages/oauth/code.vue
+++ b/pages/oauth/code.vue
@@ -16,7 +16,7 @@
 
             <p class="mt-6 text-lg leading-8 text-gray-300">
                 Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose"
-                    target="_blank" class="underline text-pink-700">the issue tracker</a>.
+                    target="_blank" class="underline text-primary-700">the issue tracker</a>.
             </p>
         </div>
     </div>
diff --git a/pages/oauth/consent.vue b/pages/oauth/consent.vue
index abdc259..f2e8b98 100644
--- a/pages/oauth/consent.vue
+++ b/pages/oauth/consent.vue
@@ -9,7 +9,7 @@
                         account?</h1>
                     <div v-if="application" class="rounded-sm ring-2 ring-white/10 px-4 py-2 w-full">
                         <h2 class="font-bold text-gray-200">{{ application }}</h2>
-                        <a v-if="website" :href="website" target="_blank" class="underline text-pink-700">{{ website
+                        <a v-if="website" :href="website" target="_blank" class="underline text-primary-700">{{ website
                             }}</a>
                     </div>
                 </div>
@@ -20,7 +20,7 @@
 
                 <ul class="flex flex-col gap-y-1.5">
                     <li v-for="text in getScopeText(scopes)" :key="text[1]" class="flex flex-row gap-1">
-                        <svg class="fill-pink-600 w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
+                        <svg class="fill-primary-600 w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                             viewBox="0 0 16 16">
                             <path
                                 d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z" />
@@ -64,7 +64,7 @@
                             class="h-10 w-10" />
                         <div class="flex flex-col justify-between items-start">
                             <h2 class="font-bold text-gray-100">{{ client.name }}</h2>
-                            <span class="underline text-pink-700">{{ client.link }}</span>
+                            <span class="underline text-primary-700">{{ client.link }}</span>
                         </div>
                     </a>
                 </li>
@@ -76,7 +76,7 @@
 
             <p class="mt-6 text-lg leading-8 text-gray-300">
                 Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose"
-                    target="_blank" class="underline text-pink-700">the issue tracker</a>.
+                    target="_blank" class="underline text-primary-700">the issue tracker</a>.
             </p>
         </div>
     </div>
diff --git a/pages/oauth/reset.vue b/pages/oauth/reset.vue
index 9f0af49..2191462 100644
--- a/pages/oauth/reset.vue
+++ b/pages/oauth/reset.vue
@@ -54,7 +54,7 @@
 
             <p class="mt-6 text-lg leading-8 text-gray-300">
                 Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose"
-                    target="_blank" class="underline text-pink-700">the issue tracker</a>.
+                    target="_blank" class="underline text-primary-700">the issue tracker</a>.
             </p>
         </div>
     </div>
diff --git a/pages/register/index.vue b/pages/register/index.vue
index af4906a..adf4aec 100644
--- a/pages/register/index.vue
+++ b/pages/register/index.vue
@@ -50,7 +50,7 @@
                     <div class="mt-2">
                         <textarea rows="4" required :is-invalid="errors.length > 0" name="reason" :disabled="isLoading"
                             placeholder="Brief text (optional)"
-                            class="block w-full disabled:opacity-70 disabled:hover:cursor-wait bg-dark-500 rounded-md border-0 py-1.5 text-gray-50 shadow-sm ring-1 ring-inset ring-white/10 placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-pink-600 sm:text-sm sm:leading-6" />
+                            class="block w-full disabled:opacity-70 disabled:hover:cursor-wait bg-dark-500 rounded-md border-0 py-1.5 text-gray-50 shadow-sm ring-1 ring-inset ring-white/10 placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6" />
                     </div>
                     <VeeErrorMessage name="reason" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
                         {{ message }}
@@ -59,7 +59,7 @@
 
                 <VeeField name="tos" as="div" v-slot="{ errors, field }" validate-on-change>
                     <input type="checkbox" :disabled="isLoading" name="tos"
-                        class="rounded disabled:hover:cursor-wait mr-1 align-middle mb-0.5 text-pink-700 !ring-0 !outline-none"
+                        class="rounded disabled:hover:cursor-wait mr-1 align-middle mb-0.5 text-primary-700 !ring-0 !outline-none"
                         required />
                     <span class="text-sm text-gray-100">I agree to the terms and conditions of this server <a
                             class="underline font-bold" target="_blank" :href="'#'">available here</a></span>
@@ -69,7 +69,7 @@
                 </VeeField>
 
                 <ButtonsPrimary type="submit" class="w-full" :disabled="isLoading">{{ isLoading ? "Registering..." :
-                    "Register" }}</ButtonsPrimary>
+            "Register" }}</ButtonsPrimary>
             </VeeForm>
         </div>
         <div v-else>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 20e57f6..f139cfd 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,25 +1,29 @@
 import forms from "@tailwindcss/forms";
 import typography from "@tailwindcss/typography";
 import type { Config } from "tailwindcss";
+import colors from "tailwindcss/colors";
+
+const dark = {
+    50: "#4a4a4a",
+    100: "#3c3c3c",
+    200: "#323232",
+    300: "#2d2d2d",
+    400: "#222222",
+    500: "#1f1f1f",
+    600: "#1c1c1e",
+    700: "#1b1b1b",
+    800: "#181818",
+    900: "#0f0f0f",
+    950: "#080808",
+};
 
 // Default are on https://tailwindcss.nuxtjs.org/tailwind/config#default-configuration
 export default (<Partial<Config>>{
     theme: {
         extend: {
             colors: {
-                dark: {
-                    50: "#4a4a4a",
-                    100: "#3c3c3c",
-                    200: "#323232",
-                    300: "#2d2d2d",
-                    400: "#222222",
-                    500: "#1f1f1f",
-                    600: "#1c1c1e",
-                    700: "#1b1b1b",
-                    800: "#181818",
-                    900: "#0f0f0f",
-                    950: "#080808",
-                },
+                dark,
+                primary: colors.pink,
             },
             animation: {
                 like: "like 1s ease-in-out",