feat: ♻️ Rename dark to background, refactor themes

app.vue

@@ -52,7 +52,7 @@ useHead({
     },
     noscript: [
         {
-            innerHTML: `<div class="grid min-h-screen place-items-center px-6 py-24 sm:py-32 lg:px-8 fixed inset-0 z-[1000000] bg-dark-900" data-v-inspector="components/errors/noscript.vue:2:5"><svg class="absolute inset-0 h-full w-full stroke-white/10 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]" aria-hidden="true" data-v-inspector="components/graphics/square-pattern.vue:2:5"><defs data-v-inspector="components/graphics/square-pattern.vue:4:9"><pattern id="983e3e4c-de6d-4c3f-8d64-b9761d1534cc" width="200" height="200" x="50%" y="-1" patternUnits="userSpaceOnUse" data-v-inspector="components/graphics/square-pattern.vue:5:13"><path d="M.5 200V.5H200" fill="none" data-v-inspector="components/graphics/square-pattern.vue:7:17"></path></pattern></defs><svg x="50%" y="-1" class="overflow-visible fill-gray-800/20" data-v-inspector="components/graphics/square-pattern.vue:9:16"><path d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z" stroke-width="0" data-v-inspector="components/graphics/square-pattern.vue:10:13"></path></svg><rect width="100%" height="100%" stroke-width="0" fill="url(#983e3e4c-de6d-4c3f-8d64-b9761d1534cc)" data-v-inspector="components/graphics/square-pattern.vue:13:9"></rect></svg><div class="prose prose-invert max-w-lg" data-v-inspector="components/errors/noscript.vue:4:9"><h1 class="mt-4 text-3xl font-bold tracking-tight text-gray-100 sm:text-5xl" data-v-inspector="components/errors/noscript.vue:5:13">JavaScript is disabled </h1><p class="mt-6 text-base leading-7 text-gray-400" data-v-inspector="components/errors/noscript.vue:7:13"> This website requires JavaScript to function properly. Please enable JavaScript in your browser settings. </p><p class="mt-6 text-base leading-7 text-gray-400" data-v-inspector="components/errors/noscript.vue:11:13"> If you are using a browser that does not support JavaScript, please consider using a modern browser like <a href="https://www.mozilla.org/firefox/new/" class="underline" data-v-inspector="components/errors/noscript.vue:13:22">Firefox</a> or <a href="https://www.google.com/chrome/" class="underline" data-v-inspector="components/errors/noscript.vue:13:102">Chrome</a>. </p><p class="mt-6 text-base leading-7 text-gray-400" data-v-inspector="components/errors/noscript.vue:16:13"> This application does not track you, collect user data, use cookies of any kind or send requests to servers outside of your account&#39;s instance. </p></div></div>`,
+            innerHTML: `<div class="grid min-h-screen place-items-center px-6 py-24 sm:py-32 lg:px-8 fixed inset-0 z-[1000000] bg-background-900" data-v-inspector="components/errors/noscript.vue:2:5"><svg class="absolute inset-0 h-full w-full stroke-white/10 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]" aria-hidden="true" data-v-inspector="components/graphics/square-pattern.vue:2:5"><defs data-v-inspector="components/graphics/square-pattern.vue:4:9"><pattern id="983e3e4c-de6d-4c3f-8d64-b9761d1534cc" width="200" height="200" x="50%" y="-1" patternUnits="userSpaceOnUse" data-v-inspector="components/graphics/square-pattern.vue:5:13"><path d="M.5 200V.5H200" fill="none" data-v-inspector="components/graphics/square-pattern.vue:7:17"></path></pattern></defs><svg x="50%" y="-1" class="overflow-visible fill-text-800/20" data-v-inspector="components/graphics/square-pattern.vue:9:16"><path d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z" stroke-width="0" data-v-inspector="components/graphics/square-pattern.vue:10:13"></path></svg><rect width="100%" height="100%" stroke-width="0" fill="url(#983e3e4c-de6d-4c3f-8d64-b9761d1534cc)" data-v-inspector="components/graphics/square-pattern.vue:13:9"></rect></svg><div class="prose prose-invert max-w-lg" data-v-inspector="components/errors/noscript.vue:4:9"><h1 class="mt-4 text-3xl font-bold tracking-tight text-text-100 sm:text-5xl" data-v-inspector="components/errors/noscript.vue:5:13">JavaScript is disabled </h1><p class="mt-6 text-base leading-7 text-text-400" data-v-inspector="components/errors/noscript.vue:7:13"> This website requires JavaScript to function properly. Please enable JavaScript in your browser settings. </p><p class="mt-6 text-base leading-7 text-text-400" data-v-inspector="components/errors/noscript.vue:11:13"> If you are using a browser that does not support JavaScript, please consider using a modern browser like <a href="https://www.mozilla.org/firefox/new/" class="underline" data-v-inspector="components/errors/noscript.vue:13:22">Firefox</a> or <a href="https://www.google.com/chrome/" class="underline" data-v-inspector="components/errors/noscript.vue:13:102">Chrome</a>. </p><p class="mt-6 text-base leading-7 text-text-400" data-v-inspector="components/errors/noscript.vue:16:13"> This application does not track you, collect user data, use cookies of any kind or send requests to servers outside of your account&#39;s instance. </p></div></div>`,
         },
     ],
 });

components/avatars/avatar.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-bind="$attrs" class="bg-dark-700 overflow-hidden flex items-center justify-center">
+    <div v-bind="$attrs" class="bg-background-700 overflow-hidden flex items-center justify-center">
         <Skeleton :enabled="!imageLoaded" class="!h-full !w-full !rounded-none">
             <img class="cursor-pointer ring-1 w-full h-full object-cover" :src="src" :alt="alt" />
         </Skeleton>

components/composer/autocomplete-suggestbox.vue

@@ -2,7 +2,7 @@
     <Transition enter-active-class="transition duration-300 ease-in-out" enter-from-class="opacity-0 scale-95"
         enter-to-class="opacity-100 scale-100" leave-active-class="duration-200 ease-in-out"
         leave-from-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-95">
-        <div class="max-h-40 max-w-full rounded ring-1 ring-dark-300 bg-dark-800 fixed z-20" :style="{
+        <div class="max-h-40 max-w-full rounded ring-1 ring-background-300 bg-background-800 fixed z-20" :style="{
             left: `${x}px`,
             top: `${y}px`,
             width: `${width}px`,
@@ -11,7 +11,7 @@
                 <div v-for="(suggestion, index) in topSuggestions" :key="suggestion.key"
                     @click="emit('autocomplete', suggestion.key)"
                     :ref="el => { if (el) suggestionRefs[index] = el as Element }" :title="suggestion.key"
-                    :class="['flex justify-center shrink-0 items-center size-12 p-2 hover:bg-dark-900/70', index === selectedSuggestionIndex && 'bg-primary-500']">
+                    :class="['flex justify-center shrink-0 items-center size-12 p-2 hover:bg-background-900/70', index === selectedSuggestionIndex && 'bg-primary-500']">
                     <slot :suggestion="suggestion"></slot>
                 </div>
             </OverlayScrollbarsComponent>

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-primary-500/70 hover:bg-primary-900/70']">
+        :class="['rounded text-text-300 hover:bg-background-900/70 p-2 flex items-center justify-center duration-200', toggled && 'bg-primary-500/70 hover:bg-primary-900/70']">
         <slot />
     </button>
 </template>

components/composer/composer.vue

@@ -10,7 +10,7 @@
         <!-- Content warning textbox -->
         <div v-if="cw" class="mb-4">
             <input type="text" v-model="cwContent" placeholder="Add a content warning"
-                class="w-full p-2 mt-1 text-sm prose prose-invert bg-dark-900 rounded focus:!ring-0 !ring-none !border-none !outline-none placeholder:text-zinc-500 appearance-none focus:!border-none focus:!outline-none"
+                class="w-full p-2 mt-1 text-sm prose prose-invert bg-background-900 rounded focus:!ring-0 !ring-none !border-none !outline-none placeholder:text-zinc-500 appearance-none focus:!border-none focus:!outline-none"
                 aria-label="Content warning" />
         </div>
         <FileUploader v-model:files="files" ref="uploader" />

components/composer/file-uploader.vue

@@ -3,7 +3,7 @@
         <input type="file" ref="fileInput" @change="handleFileInput" style="display: none" multiple />
         <div class="flex flex-row gap-2 overflow-x-auto *:shrink-0 p-1 mb-4" v-if="files.length > 0">
             <div v-for="(data) in files" :key="data.id" role="button" tabindex="0"
-                :class="['size-28 bg-dark-800 rounded flex items-center relative justify-center ring-1 ring-white/20 overflow-hidden', data.progress !== 1.0 && 'animate-pulse']"
+                :class="['size-28 bg-background-800 rounded flex items-center relative justify-center ring-1 ring-white/20 overflow-hidden', data.progress !== 1.0 && 'animate-pulse']"
                 @keydown.enter="removeFile(data.id)">
                 <template v-if="data.file.type.startsWith('image/')">
                     <img :src="createObjectURL(data.file)" class="w-full h-full object-cover cursor-default"
@@ -17,15 +17,15 @@
                 </template>
                 <!-- Shadow on media to better see buttons -->
                 <div class="absolute inset-0 bg-black/70"></div>
-                <div class="absolute bottom-1 right-1 p-1 bg-dark-800 text-white text-xs rounded cursor-default flex flex-row items-center gap-x-1"
+                <div class="absolute bottom-1 right-1 p-1 bg-background-800 text-white text-xs rounded cursor-default flex flex-row items-center gap-x-1"
                     aria-label="File size">
                     {{ 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-primary-500" />
                 </div>
-                <button class="absolute top-1 right-1 p-1 bg-dark-800 text-white text-xs rounded size-6" role="button"
+                <button class="absolute top-1 right-1 p-1 bg-background-800 text-white text-xs rounded size-6"
-                    tabindex="0" @pointerup="removeFile(data.id)" @keydown.enter="removeFile(data.id)">
+                    role="button" tabindex="0" @pointerup="removeFile(data.id)" @keydown.enter="removeFile(data.id)">
                     <iconify-icon icon="tabler:x" width="none" class="size-4" />
                 </button>
                 <!-- Alt text editor -->
@@ -33,15 +33,15 @@
                     strategy: 'fixed',
                 }" v-if="data.api_id" @update:open="o => !o && updateAltText(data.id, data.alt_text)">
                     <Popover.Trigger aria-hidden="true"
-                        class="absolute top-1 left-1 p-1 bg-dark-800 ring-1 ring-white/5 text-white text-xs rounded size-6">
+                        class="absolute top-1 left-1 p-1 bg-background-800 ring-1 ring-white/5 text-white text-xs rounded size-6">
                         <iconify-icon icon="tabler:alt" width="none" class="size-4" />
                     </Popover.Trigger>
                     <Popover.Positioner class="!z-[100]">
                         <Popover.Content
-                            class="p-1 bg-dark-400 rounded text-sm ring-1 ring-white/10 shadow-lg text-gray-300 !min-w-72">
+                            class="p-1 bg-background-400 rounded text-sm ring-1 ring-white/10 shadow-lg text-text-300 !min-w-72">
                             <textarea :disabled="data.progress < 1.0" @keydown.enter.stop v-model="data.alt_text"
                                 placeholder="Add alt text"
-                                class="w-full p-2 text-sm prose prose-invert bg-dark-900 rounded focus:!ring-0 !ring-none !border-none !outline-none placeholder:text-zinc-500 appearance-none focus:!border-none focus:!outline-none" />
+                                class="w-full p-2 text-sm prose prose-invert bg-background-900 rounded focus:!ring-0 !ring-none !border-none !outline-none placeholder:text-zinc-500 appearance-none focus:!border-none focus:!outline-none" />
                             <Button theme="secondary" @click="updateAltText(data.id, data.alt_text)" class="w-full"
                                 :loading="data.progress < 1.0">
                                 <span>Edit</span>

components/composer/modal.client.vue

@@ -18,7 +18,7 @@
                         leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
                         <Dialog.Content class="overflow-y-auto w-full max-h-full md:py-16">
                             <div
-                                class="relative overflow-hidden max-w-xl mx-auto rounded-lg bg-dark-700 ring-1 ring-dark-800 text-left shadow-xl transition-all w-full">
+                                class="relative overflow-hidden max-w-xl mx-auto rounded-lg bg-background-700 ring-1 ring-background-800 text-left shadow-xl transition-all w-full">
                                 <Composer v-if="instance" :instance="instance as any" />
                             </div>
                         </Dialog.Content>

components/composer/suggestbox.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="w-full max-w-full rounded ring-1 ring-dark-300 bg-dark-800 absolute z-20 flex flex-col">
+    <div class="w-full max-w-full rounded ring-1 ring-background-300 bg-background-800 absolute z-20 flex flex-col">
         <slot />
     </div>
 </template>

components/dropdowns/AdaptiveDropdown.vue

@@ -17,9 +17,9 @@
                     leave-active-class="transition ease-out duration-75"
                     leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95">
                     <Menu.Content v-if="open"
-                        :class="['z-20 mt-2 rounded overflow-hidden p-1 space-y-1 bg-dark-700 shadow-lg ring-1 ring-white/10 focus:outline-none min-w-56', id]">
+                        :class="['z-20 mt-2 rounded overflow-hidden p-1 space-y-1 bg-background-700 shadow-lg ring-1 ring-white/10 focus:outline-none min-w-56', id]">
                         <div v-if="isSmallScreen" class="w-full py-2">
-                            <div class="rounded-full h-1 bg-gray-400 w-12 mx-auto"></div>
+                            <div class="rounded-full h-1 bg-text-400 w-12 mx-auto"></div>
                         </div>
                         <slot name="items"></slot>
                     </Menu.Content>

components/errors/ErrorBoundary.vue

@@ -2,9 +2,9 @@
     <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 max-w-md w-full">
-                <h1 class="mt-4 text-3xl font-bold tracking-tight text-gray-100 sm:text-5xl">{{ error.title }}
+                <h1 class="mt-4 text-3xl font-bold tracking-tight text-text-100 sm:text-5xl">{{ error.title }}
                 </h1>
-                <p class="mt-6 text-base leading-7 text-gray-400" v-html="error.message"></p>
+                <p class="mt-6 text-base leading-7 text-text-400" v-html="error.message"></p>
                 <div class="mt-10 grid grid-cols-2 gap-x-6 mx-auto max-w-md">
                     <Button theme="primary" class="w-full" @click="back">Go back</Button>
                     <a href="https://github.com/lysand-org/frontend/issues" target="_blank">

components/errors/noscript.vue

@@ -3,21 +3,22 @@ import SquarePattern from "../graphics/square-pattern.vue";
 </script>
 
 <template>
-    <div class="grid min-h-screen place-items-center px-6 py-24 sm:py-32 lg:px-8 fixed inset-0 z-[1000000] bg-dark-900">
+    <div
+        class="grid min-h-screen place-items-center px-6 py-24 sm:py-32 lg:px-8 fixed inset-0 z-[1000000] bg-background-900">
         <SquarePattern />
         <div class="prose prose-invert max-w-lg">
-            <h1 class="mt-4 text-3xl font-bold tracking-tight text-gray-100 sm:text-5xl">JavaScript is disabled
+            <h1 class="mt-4 text-3xl font-bold tracking-tight text-text-100 sm:text-5xl">JavaScript is disabled
             </h1>
-            <p class="mt-6 text-base leading-7 text-gray-400">
+            <p class="mt-6 text-base leading-7 text-text-400">
                 This website requires JavaScript to function properly. Please enable JavaScript in your browser
                 settings.
             </p>
-            <p class="mt-6 text-base leading-7 text-gray-400">
+            <p class="mt-6 text-base leading-7 text-text-400">
                 If you are using a browser that does not support JavaScript, please consider using a modern browser
                 like <a href="https://www.mozilla.org/firefox/new/" class="underline">Firefox</a> or <a
                     href="https://www.google.com/chrome/" class="underline">Chrome</a>.
             </p>
-            <p class="mt-6 text-base leading-7 text-gray-400">
+            <p class="mt-6 text-base leading-7 text-text-400">
                 This application does not track you, collect user data, use cookies of any kind or send requests to
                 servers outside of your account's instance.
             </p>

components/graphics/square-pattern.vue

@@ -6,7 +6,7 @@
                 patternUnits="userSpaceOnUse">
                 <path d="M.5 200V.5H200" fill="none"></path>
             </pattern>
-        </defs><svg x="50%" y="-1" class="overflow-visible fill-gray-800/20">
+        </defs><svg x="50%" y="-1" class="overflow-visible fill-text-800/20">
             <path d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z"
                 stroke-width="0"></path>
         </svg>

components/headers/greeting.vue

@@ -1,14 +1,14 @@
 <template>
-    <div v-if="identity" class="bg-dark-800 z-0 p-6 my-5 relative overflow-hidden rounded ring-1 ring-white/5">
+    <div v-if="identity" class="bg-background-800 z-0 p-6 my-5 relative overflow-hidden rounded ring-1 ring-white/5">
         <div class="sm:flex sm:items-center sm:justify-between gap-3">
             <div class="sm:flex sm:space-x-5 grow">
                 <Avatar :src="identity.account.avatar"
                     class="mx-auto shrink-0 size-20 rounded overflow-hidden ring-1 ring-white/10"
                     :alt="'Your avatar'" />
                 <div
-                    class="mt-4 text-center flex flex-col justify-center sm:mt-0 sm:text-left bg-dark-800 py-2 px-4 rounded grow ring-1 ring-white/10">
+                    class="mt-4 text-center flex flex-col justify-center sm:mt-0 sm:text-left bg-background-800 py-2 px-4 rounded grow ring-1 ring-white/10">
-                    <p class="text-sm font-medium text-gray-300">Welcome back,</p>
+                    <p class="text-sm font-medium text-text-300">Welcome back,</p>
-                    <p class="text-xl font-bold text-gray-50 sm:text-2xl line-clamp-1" v-html="display_name"></p>
+                    <p class="text-xl font-bold text-text-50 sm:text-2xl line-clamp-1" v-html="display_name"></p>
                 </div>
             </div>
         </div>

components/inputs/label.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="flex flex-row justify-between">
         <label v-bind="$attrs"
-            class="select-none font-semibold text-base/6 disabled:opacity-50 sm:text-sm/6 text-gray-100">
+            class="select-none font-semibold text-base/6 disabled:opacity-50 sm:text-sm/6 text-text-100">
             <slot />
         </label>
         <div :id="`${$attrs.for}-label-slot`"></div>

components/inputs/password-input.vue

@@ -2,7 +2,7 @@
     <TextInput @input="e => content = (e.target as HTMLInputElement).value" v-bind="$attrs, $props" v-model="content"
         :type="showPassword ? 'text' : 'password'" :spellcheck="false" />
     <Progress.Root class="flex flex-row items-center gap-x-2" v-if="showStrength">
-        <Progress.Label class="text-xs text-gray-300 font-semibold w-12">
+        <Progress.Label class="text-xs text-text-300 font-semibold w-12">
             {{ text }}
         </Progress.Label>
         <Progress.Track class="rounded-sm w-full h-2 duration-300" :style="{
@@ -13,7 +13,7 @@
     </Progress.Root>
     <Teleport :to="`#${$attrs.id}-label-slot`" v-if="teleport">
         <button type="button" @click="showPassword = !showPassword"
-            class="text-xs ml-auto block mt-2 font-semibold text-gray-400">
+            class="text-xs ml-auto block mt-2 font-semibold text-text-400">
             <iconify-icon icon="tabler:eye" class="size-4 align-text-top" height="none" />
             {{ showPassword ? "Hide password" : "Show password" }}
         </button>

components/inputs/rich-textbox-input.vue

@@ -4,7 +4,7 @@
             class="resize-none min-h-48 prose prose-invert w-full p-0 !ring-none !border-none !outline-none placeholder:text-zinc-500 bg-transparent appearance-none focus:!border-none focus:!outline-none disabled:cursor-not-allowed"
             aria-label="Compose your message" :autofocus="true"></textarea>
         <div v-if="maxCharacters"
-            :class="['absolute bottom-0 right-0 p-2 text-gray-300 font-semibold text-xs', remainingCharacters < 0 && 'text-red-500']"
+            :class="['absolute bottom-0 right-0 p-2 text-text-300 font-semibold text-xs', remainingCharacters < 0 && 'text-red-500']"
             aria-live="polite">
             {{ remainingCharacters }}
         </div>

components/inputs/text-input.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-primary-600 sm:text-sm sm:leading-6',
+    <input :class="['block disabled:opacity-70 disabled:hover:cursor-wait w-full bg-background-500 rounded-md border-0 py-1.5 text-text-50 shadow-sm ring-1 ring-inset ring-white/10 placeholder:text-text-500 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6',
         isInvalid && '!ring-red-600 ring-2']">
 </template>
 

components/notifications/notifications-renderer.vue

@@ -2,7 +2,7 @@
     <Teleport to="body">
         <Toaster :toaster="toaster" v-slot="toast">
             <Toast.Root
-                class="rounded-lg w-[calc(100vw-2rem)] sm:w-80 bg-dark-500 duration-200 shadow-lg ring-1 ring-white/10 p-4 [&:nth-child(n+5)]:opacity-0 data-[stack]:!opacity-100 scale-[--scale,100%] translate-x-[--x] translate-y-[--y] z-[--z-index] will-change-transform">
+                class="rounded-lg w-[calc(100vw-2rem)] sm:w-80 bg-background-500 duration-200 shadow-lg ring-1 ring-white/10 p-4 [&:nth-child(n+5)]:opacity-0 data-[stack]:!opacity-100 scale-[--scale,100%] translate-x-[--x] translate-y-[--y] z-[--z-index] will-change-transform">
                 <div class="grid grid-cols-[auto_1fr_auto]">
                     <div class="shrink-0 h-6 w-6">
                         <iconify-icon v-if="toast.type === 'success'" icon="tabler:check" height="none"
@@ -15,13 +15,13 @@
                             class="h-6 w-6 text-blue-500" aria-hidden="true" />
                     </div>
                     <div class="ml-3 flex-1 pt-0.5 shrink-0 min-w-48">
-                        <Toast.Title class="text-sm font-semibold text-gray-50">{{ toast.title }}</Toast.Title>
+                        <Toast.Title class="text-sm font-semibold text-text-50">{{ toast.title }}</Toast.Title>
-                        <Toast.Description class="mt-1 text-sm text-gray-400">{{
+                        <Toast.Description class="mt-1 text-sm text-text-400">{{
                             toast.description }}</Toast.Description>
                     </div>
                     <div class="ml-4 flex shrink-0">
                         <Toast.CloseTrigger type="button" title="Close this notification"
-                            class="inline-flex rounded-md text-gray-400 hover:text-gray-300 duration-200">
+                            class="inline-flex rounded-md text-text-400 hover:text-text-300 duration-200">
                             <iconify-icon icon="tabler:x" class="h-5 w-5" aria-hidden="true" />
                         </Toast.CloseTrigger>
                     </div>

components/settings/oidc.vue

@@ -1,16 +1,16 @@
 <template>
     <!-- OIDC linked accounts manager -->
-    <div class="w-full ring-1 ring-white/5 pb-5 bg-dark-800 rounded overflow-hidden">
+    <div class="w-full ring-1 ring-white/5 pb-5 bg-background-800 rounded overflow-hidden">
         <div class="px-4 py-4">
-            <h3 class="font-semibold text-gray-300 text-xl">Linked accounts</h3>
+            <h3 class="font-semibold text-text-300 text-xl">Linked accounts</h3>
         </div>
         <div class="px-4 py-3">
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2 gap-4">
                 <div v-for="provider of ssoConfig?.providers" :key="provider.id"
-                    class="flex items-center justify-between p-4 bg-dark-700 rounded">
+                    class="flex items-center justify-between p-4 bg-background-700 rounded">
                     <div class="flex items-center gap-4">
                         <Avatar :src="provider.icon" :alt="provider.name" class="h-8 w-8" />
-                        <span class="font-semibold text-gray-300">{{ provider.name }}</span>
+                        <span class="font-semibold text-text-300">{{ provider.name }}</span>
                     </div>
                     <div>
                         <Button theme="primary" :loading="loading"

components/settings/profile-editor.vue

@@ -1,14 +1,14 @@
 <template>
     <div
-        class="w-full md:px-8 px-4 py-4 bg-dark-700 grid justify-center lg:grid-cols-[minmax(auto,_36rem)_1fr] grid-cols-1 gap-4">
+        class="w-full md:px-8 px-4 py-4 bg-background-700 grid justify-center lg:grid-cols-[minmax(auto,_36rem)_1fr] grid-cols-1 gap-4">
-        <form class="w-full ring-1 ring-inset ring-white/5 pb-5 bg-dark-800 rounded overflow-hidden"
+        <form class="w-full ring-1 ring-inset ring-white/5 pb-5 bg-background-800 rounded overflow-hidden"
             @submit.prevent="save">
             <Avatar :src="account?.header" :alt="`${account?.acct}'s header image'`"
-                class="w-full aspect-[8/3] border-b border-white/10 bg-dark-700 !rounded-none" />
+                class="w-full aspect-[8/3] border-b border-white/10 bg-background-700 !rounded-none" />
 
             <div class="flex items-start justify-between px-4 py-3">
                 <Avatar :src="account?.avatar" :alt="`${account?.acct}'s avatar'`"
-                    class="h-32 w-32 -mt-[4.5rem] z-10 shrink-0 rounded ring-2 ring-dark-800" />
+                    class="h-32 w-32 -mt-[4.5rem] z-10 shrink-0 rounded ring-2 ring-background-800" />
             </div>
 
             <div class="mt-2 px-4">
@@ -19,7 +19,7 @@
                     <TextInput @input="acct = ($event.target as HTMLInputElement).value" :value="acct"
                         aria-label="Username" :disabled="loading" />
                 </div>
-                <p class="text-gray-300 text-xs mt-2">
+                <p class="text-text-300 text-xs mt-2">
                     Changing your username will break all links to your profile.
                 </p>
             </div>

components/settings/renderer.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="w-full px-8 py-4 bg-dark-700 hover:bg-dark-500 duration-100 h-full">
+    <div class="w-full px-8 py-4 bg-background-700 hover:bg-background-500 duration-100 h-full">
         <div class="max-w-7xl mx-auto h-full">
             <SettingBoolean v-if="setting.type === SettingType.Boolean" :id="id" />
 

components/settings/types/Boolean.vue

@@ -11,7 +11,7 @@
             implemented
         </p>
         <p v-else :data-disabled="setting.notImplemented ? '' : undefined"
-            class="text-base/6 row-start-2 data-[disabled]:opacity-50 sm:text-sm/6 text-gray-300">{{
+            class="text-base/6 row-start-2 data-[disabled]:opacity-50 sm:text-sm/6 text-text-300">{{
                 setting.description }}
         </p>
         <Switch.Control :data-disabled="setting.notImplemented ? '' : undefined"

components/sidebars/account-picker.vue

@@ -2,20 +2,19 @@
     <AdaptiveDropdown>
         <template #button>
             <slot>
-                <div class="rounded text-left flex flex-row gap-x-2 hover:scale-[95%] duration-100"
+                <div class="rounded text-left flex flex-row gap-x-2 hover:scale-[95%] duration-100" v-if="identity">
-                    v-if="identity">
                     <div class="shrink-0">
                         <Avatar class="size-12 rounded ring-1 ring-white/5" :src="identity.account.avatar"
                             :alt="`${identity.account.acct}'s avatar'`" />
                     </div>
                     <div class="flex flex-col items-start p-1 justify-around grow overflow-hidden">
                         <div class="flex flex-row items-center justify-between w-full">
-                            <div class="font-semibold text-gray-200 text-sm line-clamp-1 break-all">
+                            <div class="font-semibold text-text-200 text-sm line-clamp-1 break-all">
                                 {{
                                     identity.account.display_name }}
                             </div>
                         </div>
-                        <span class="text-gray-400 text-xs line-clamp-1 break-all w-full">
+                        <span class="text-text-400 text-xs line-clamp-1 break-all w-full">
                             Change account
                         </span>
                     </div>
@@ -28,7 +27,7 @@
         </template>
         <template #items>
             <div class="p-2">
-                <h3 class="text-gray-400 text-xs text-center md:text-left uppercase font-semibold">Switch to account
+                <h3 class="text-text-400 text-xs text-center md:text-left uppercase font-semibold">Switch to account
                 </h3>
             </div>
             <div class="px-2 py-4 md:py-2 flex flex-col gap-3 max-w-[100vw]">
@@ -41,12 +40,12 @@
                         <div data-part="item" class="flex flex-col items-start justify-around grow overflow-hidden"
                             @click="useEvent('identity:change', identity)">
                             <div class="flex flex-row items-center justify-between w-full">
-                                <div class="font-semibold text-gray-200 line-clamp-1 break-all">
+                                <div class="font-semibold text-text-200 line-clamp-1 break-all">
                                     {{
                                         identity.account.display_name }}
                                 </div>
                             </div>
-                            <span class="text-gray-400 text-sm line-clamp-1 break-all w-full">
+                            <span class="text-text-400 text-sm line-clamp-1 break-all w-full">
                                 @{{
                                     identity.account.acct
                                 }}
@@ -55,7 +54,7 @@
                         <button data-part="item"
                             class="shrink-0 ml-6 size-12 ring-white/5 ring-1 flex items-center justify-center rounded"
                             @click="$emit('signOut', identity.id)">
-                            <iconify-icon icon="tabler:logout" class="size-6 text-gray-200" width="none" />
+                            <iconify-icon icon="tabler:logout" class="size-6 text-text-200" width="none" />
                         </button>
                     </div>
                 </Menu.Item>

components/sidebars/collapsible-aside.vue

@@ -2,13 +2,13 @@
     <aside v-bind="$props" role="complementary" :aria-expanded="open ? 'true' : 'false'"
         :class="['flex max-h-dvh overflow-hidden duration-200', open ? enterClass : leaveClass, direction === 'left' ? 'flex-row' : 'flex-row-reverse']">
         <OverlayScrollbarsComponent :defer="true"
-            class="bg-dark-700 ring-1 ring-white/10 h-full overflow-y-auto w-full">
+            class="bg-background-700 ring-1 ring-white/10 h-full overflow-y-auto w-full">
             <slot />
         </OverlayScrollbarsComponent>
         <button @click="open = !open" aria-label="Toggle sidebar"
-            class="h-full bg-dark-700 hover:bg-dark-400 hover:cursor-pointer duration-200 py-4 px-0.5 flex items-center justify-center w-4 shrink-0">
+            class="h-full bg-background-700 hover:bg-background-400 hover:cursor-pointer duration-200 py-4 px-0.5 flex items-center justify-center w-4 shrink-0">
             <iconify-icon icon="tabler:chevron-right"
-                :class="['text-gray-200 duration-200', direction === 'left' ? open ? 'rotate-180' : 'rotate-0' : open ? 'rotate-0' : 'rotate-180']"
+                :class="['text-text-200 duration-200', direction === 'left' ? open ? 'rotate-180' : 'rotate-0' : open ? 'rotate-0' : 'rotate-180']"
                 aria-hidden="true" />
         </button>
     </aside>

components/sidebars/navigation.vue

@@ -1,6 +1,6 @@
 <template>
     <aside
-        class="fixed h-dvh z-10 md:flex hidden flex-col p-4 bg-dark-800 gap-10 max-w-[80px] hover:max-w-72 w-full duration-200 group ring-1 ring-dark-500"
+        class="fixed h-dvh z-10 md:flex hidden flex-col p-4 bg-background-800 gap-10 max-w-[80px] hover:max-w-72 w-full duration-200 group ring-1 ring-background-500"
         aria-label="Navigation" role="complementary">
         <NuxtLink href="/">
             <img crossorigin="anonymous" class="size-11 rounded ring-1 ring-white/10 hover:scale-105 duration-200"
@@ -8,7 +8,7 @@
         </NuxtLink>
 
         <div class="flex flex-col gap-3">
-            <h3 class="font-semibold text-gray-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
+            <h3 class="font-semibold text-text-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
                 Timelines</h3>
 
             <NuxtLink v-for="timeline in visibleTimelines" :key="timeline.href" :to="timeline.href">
@@ -21,7 +21,7 @@
         </div>
 
         <div class="flex flex-col gap-3 mt-auto">
-            <h3 class="font-semibold text-gray-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
+            <h3 class="font-semibold text-text-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
                 Account</h3>
 
             <AccountPicker @sign-in="signIn().finally(() => loadingAuth = false)"
@@ -39,13 +39,13 @@
                 </ButtonBase>
             </NuxtLink>
             <h3 v-if="identity"
-                class="font-semibold text-gray-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
+                class="font-semibold text-text-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
                 Posts</h3>
             <ButtonBase v-if="identity" @click="compose" title="Open composer (shortcut: n)" theme="gradient"
                 class="!justify-start overflow-hidden">
                 <Icon icon="tabler:writing" class="!size-6" />
                 <span class="shrink-0 line-clamp-1">Compose</span>
-                <kbd class="text-xs font-semibold rounded bg-dark-500 font-mono px-1 flex flex-row ml-auto">
+                <kbd class="text-xs font-semibold rounded bg-background-500 font-mono px-1 flex flex-row ml-auto">
                     <iconify-icon icon="tabler:keyboard" height="1rem" width="1rem" class="inline" aria-hidden="true" />
                     <iconify-icon icon="tabler:letter-n-small" height="1rem" width="1rem" class="inline -mr-1"
                         aria-hidden="true" />
@@ -61,7 +61,7 @@
     </aside>
     <!-- Mobile bottom navbar -->
     <nav
-        :class="['fixed bottom-0 left-0 right-0 z-20 h-16 md:hidden grid gap-3 p-2 *:shadow-xl bg-dark-900 ring-1 ring-white/10 text-gray-200', !!identity ? 'grid-cols-4' : 'grid-cols-3']">
+        :class="['fixed bottom-0 left-0 right-0 z-20 h-16 md:hidden grid gap-3 p-2 *:shadow-xl bg-background-900 ring-1 ring-white/10 text-text-200', !!identity ? 'grid-cols-4' : 'grid-cols-3']">
 
         <AdaptiveDropdown>
             <template #button>

components/sidebars/settings-sidebar.vue

@@ -1,12 +1,12 @@
 <template>
     <Tabs.Root v-model="tab">
-        <Tabs.List class="flex flex-row p-4 gap-4 bg-dark-800 relative ring-1 ring-white/5 overflow-x-auto">
+        <Tabs.List class="flex flex-row p-4 gap-4 bg-background-800 relative ring-1 ring-white/5 overflow-x-auto">
             <Tabs.Trigger :value="page" v-for="page of SettingPages" :as-child="true">
                 <ButtonBase class="capitalize hover:bg-white/5">
                     {{ page }}
                 </ButtonBase>
             </Tabs.Trigger>
-            <Tabs.Indicator class="h-1 bg-gray-300 w-[--width] top-0 rounded-b" />
+            <Tabs.Indicator class="h-1 bg-text-300 w-[--width] top-0 rounded-b" />
         </Tabs.List>
         <Tabs.Content :value="page" v-for="page of SettingPages">
             <slot :name="page" />

components/skeleton/Skeleton.vue

@@ -1,10 +1,10 @@
 <template>
     <div v-for="index of lines" :class="[
-            'duration-200 animate-pulse bg-dark-100 [&:not(:first-child)]:mt-2',
+        'duration-200 animate-pulse bg-background-100 [&:not(:first-child)]:mt-2',
-            shape === 'circle' ? 'rounded-full' : 'rounded',
+        shape === 'circle' ? 'rounded-full' : 'rounded',
-            ['text', 'content'].includes(type) && 'h-[1em]',
+        ['text', 'content'].includes(type) && 'h-[1em]',
-            props.class
+        props.class
-        ]" v-if="enabled" :style="{
+    ]" v-if="enabled" :style="{
             width: getWidth(index, lines),
         }">
     </div>

components/social-elements/instance/Presentation.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="flex flex-col p-10 gap-4 h-full">
         <div
-            class="aspect-video shrink-0 w-full rounded ring-white/5 bg-dark-800 shadow overflow-hidden ring-1 hover:ring-2 duration-100">
+            class="aspect-video shrink-0 w-full rounded ring-white/5 bg-background-800 shadow overflow-hidden ring-1 hover:ring-2 duration-100">
             <img class="object-cover w-full h-full duration-150 hover:scale-[102%] ease-in-out"
                 v-if="instance?.banner.url" alt="Instance banner" :src="instance.banner.url" />
         </div>
@@ -12,7 +12,7 @@
         </div>
 
         <div v-if="instance?.contact.account" class="flex flex-col gap-2 mt-auto">
-            <h2 class="text-gray-200 font-semibold uppercase text-xs">Administrator</h2>
+            <h2 class="text-text-200 font-semibold uppercase text-xs">Administrator</h2>
             <SmallCard :account="instance.contact.account" />
         </div>
     </div>

components/social-elements/notes/attachment-dialog.vue

@@ -13,7 +13,7 @@
 
                     <Dialog.Content
                         class="w-screen h-screen flex !z-50 justify-center items-center flex-col overflow-hidden p-10 fixed inset-0">
-                        <div class="w-full absolute inset-x-0 top-0 p-10 shrink text-gray-400 flex flex-row gap-3">
+                        <div class="w-full absolute inset-x-0 top-0 p-10 shrink text-text-400 flex flex-row gap-3">
                             <a @click.stop :href="attachment?.url" target="_blank" download class="ml-auto">
                                 <iconify-icon icon="tabler:download" width="1.5rem" height="1.5rem" />
                                 <span class="sr-only">Close</span>
@@ -32,7 +32,7 @@
                                 :title="attachment.description ?? ''" />
                         </HeadlessTransitionChild>
                         <span @click.stop v-if="attachment?.description"
-                            class="text-gray-300 rounded mt-6 -mb-20 px-4 py-2 max-w-xl ring-1 ring-white/5 bg-dark-900 max-h-40 overflow-y-auto">
+                            class="text-text-300 rounded mt-6 -mb-20 px-4 py-2 max-w-xl ring-1 ring-white/5 bg-background-900 max-h-40 overflow-y-auto">
                             {{ attachment.description }}
                         </span>
                     </Dialog.Content>

components/social-elements/notes/attachment.vue

@@ -10,12 +10,12 @@
                 controls :alt="attachment.description ?? undefined" :src="attachment.url">
                 Your browser does not support the video tag.
             </video>
-            <a v-else class="bg-dark-800 w-full h-full rounded flex items-center justify-center" :href="attachment.url"
+            <a v-else class="bg-background-800 w-full h-full rounded flex items-center justify-center"
-                target="_blank" download>
+                :href="attachment.url" target="_blank" download>
                 <div class="flex flex-col items-center gap-2 text-center max-w-56 overflow-hidden text-ellipsis">
-                    <iconify-icon icon="tabler:file" width="none" class="size-10 text-gray-300" />
+                    <iconify-icon icon="tabler:file" width="none" class="size-10 text-text-300" />
-                    <p class="text-gray-300 text-sm font-mono">{{ getFilename(attachment.url) }}</p>
+                    <p class="text-text-300 text-sm font-mono">{{ getFilename(attachment.url) }}</p>
-                    <p class="text-gray-300 text-xs" v-if="attachment.meta?.length">{{
+                    <p class="text-text-300 text-xs" v-if="attachment.meta?.length">{{
                         formatBytes(Number(attachment.meta?.length)) }}</p>
                 </div>
             </a>
@@ -25,11 +25,12 @@
             strategy: 'fixed',
         }" v-if="attachment.description">
             <Popover.Trigger aria-hidden="true"
-                class="absolute top-2 right-2 p-1 bg-dark-800 ring-1 ring-white/5 text-white text-xs rounded size-8">
+                class="absolute top-2 right-2 p-1 bg-background-800 ring-1 ring-white/5 text-white text-xs rounded size-8">
                 <iconify-icon icon="tabler:alt" width="none" class="size-6" />
             </Popover.Trigger>
             <Popover.Positioner class="!z-10">
-                <Popover.Content class="p-4 bg-dark-400 rounded text-sm ring-1 ring-dark-100 shadow-lg text-gray-300">
+                <Popover.Content
+                    class="p-4 bg-background-400 rounded text-sm ring-1 ring-background-100 shadow-lg text-text-300">
                     <Popover.Description>{{ attachment.description }}</Popover.Description>
                 </Popover.Content>
             </Popover.Positioner>

components/social-elements/notes/header.vue

@@ -7,13 +7,13 @@
         </NuxtLink>
         <div class="flex flex-col items-start justify-around ml-4 grow overflow-hidden">
             <div class="flex flex-row text-sm items-center justify-between w-full">
-                <NuxtLink :href="accountUrl" class="font-semibold text-gray-200 line-clamp-1 break-all">
+                <NuxtLink :href="accountUrl" class="font-semibold text-text-200 line-clamp-1 break-all">
                     <Skeleton :enabled="!note" :min-width="90" :max-width="170" shape="rect">
                         {{
                             note?.account.display_name }}
                     </Skeleton>
                 </NuxtLink>
-                <NuxtLink :href="noteUrl" class="text-gray-300 ml-2 line-clamp-1 break-all shrink-0">
+                <NuxtLink :href="noteUrl" class="text-text-300 ml-2 line-clamp-1 break-all shrink-0">
                     <Skeleton :enabled="!note" :min-width="50" :max-width="100" shape="rect">
                         {{ timeAgo }}
                     </Skeleton>
@@ -31,20 +31,20 @@
         </UserCard>
         <div class="flex flex-col items-start justify-around ml-4 grow overflow-hidden">
             <div class="flex flex-row items-center justify-between w-full">
-                <NuxtLink :href="accountUrl" class="font-semibold text-gray-200 line-clamp-1 break-all">
+                <NuxtLink :href="accountUrl" class="font-semibold text-text-200 line-clamp-1 break-all">
                     <Skeleton :enabled="!note" :min-width="90" :max-width="170" shape="rect">
                         {{
                             note?.account.display_name }}
                     </Skeleton>
                 </NuxtLink>
-                <NuxtLink :href="noteUrl" class="text-gray-300 text-sm ml-2 line-clamp-1 break-all shrink-0"
+                <NuxtLink :href="noteUrl" class="text-text-300 text-sm ml-2 line-clamp-1 break-all shrink-0"
                     :alt="fullTime" :title="fullTime">
                     <Skeleton :enabled="!note" :min-width="50" :max-width="100" shape="rect">
                         {{ timeAgo }}
                     </Skeleton>
                 </NuxtLink>
             </div>
-            <span class="text-gray-300 text-sm line-clamp-1 break-all w-full group">
+            <span class="text-text-300 text-sm line-clamp-1 break-all w-full group">
                 <Skeleton :enabled="!note" :min-width="130" :max-width="250" shape="rect">
                     <span class="group-hover:hidden">
                         @{{
@@ -52,7 +52,7 @@
                         }}</span>
                     <span @click="copyAccount" v-if="!hasCopied"
                         class="hidden select-none group-hover:flex cursor-pointer items-center gap-x-1">
-                        <iconify-icon icon="tabler:clipboard" height="1rem" width="1rem" class="text-gray-200"
+                        <iconify-icon icon="tabler:clipboard" height="1rem" width="1rem" class="text-text-200"
                             aria-hidden="true" />
                         Click to copy
                     </span>

components/social-elements/notes/mention.vue

@@ -1,6 +1,6 @@
 <template>
     <a :href="`/@${account.acct}`" target="_blank"
-        class="shrink break-all rounded bg-dark-200 ring-1 ring-white/5 ring-inset 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">
+        class="shrink break-all rounded bg-background-200 ring-1 ring-white/5 ring-inset 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 || account.acct }}

components/social-elements/notes/note.vue

@@ -1,6 +1,6 @@
 <template>
     <article
-        class="first:rounded-t last:rounded-b ring-1 relative ring-white/5 p-6 flex flex-col bg-dark-800 hover:bg-dark-700 duration-200">
+        class="first:rounded-t last:rounded-b ring-1 relative ring-white/5 p-6 flex flex-col bg-background-800 hover:bg-background-700 duration-200">
         <!-- Overlay that blocks clicks for disabled notes -->
         <div v-if="disabled" class="absolute z-10 inset-0 hover:cursor-not-allowed">
         </div>
@@ -18,36 +18,36 @@
             :should-hide="shouldHide" />
         <Skeleton class="!h-10 w-full mt-6" :enabled="!props.element || !loaded" v-if="!small || !showInteractions">
             <div v-if="showInteractions"
-                class="mt-6 flex flex-row items-stretch disabled:*:opacity-70 [&>button]:max-w-28 disabled:*:cursor-not-allowed relative justify-around text-sm h-10 hover:enabled:[&>button]:bg-dark-800 [&>button]:duration-200 [&>button]:rounded [&>button]:flex [&>button]:flex-1 [&>button]:flex-row [&>button]:items-center [&>button]:justify-center">
+                class="mt-6 flex flex-row items-stretch disabled:*:opacity-70 [&>button]:max-w-28 disabled:*:cursor-not-allowed relative justify-around text-sm h-10 hover:enabled:[&>button]:bg-background-800 [&>button]:duration-200 [&>button]:rounded [&>button]:flex [&>button]:flex-1 [&>button]:flex-row [&>button]:items-center [&>button]:justify-center">
                 <button class="group" @click="outputtedNote && useEvent('note:reply', outputtedNote)"
                     :disabled="!identity">
                     <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:arrow-back-up"
-                        class="text-gray-200 group-hover:group-enabled:text-blue-600" aria-hidden="true" />
+                        class="text-text-200 group-hover:group-enabled:text-blue-600" aria-hidden="true" />
-                    <span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(outputtedNote?.replies_count) }}</span>
+                    <span class="text-text-400 mt-0.5 ml-2">{{ numberFormat(outputtedNote?.replies_count) }}</span>
                 </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-primary-600" aria-hidden="true" />
+                        class="size-5 text-text-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-primary-600 group-hover:group-enabled:text-gray-200" aria-hidden="true" />
+                        class="size-5 text-primary-600 group-hover:group-enabled:text-text-200" aria-hidden="true" />
-                    <span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(outputtedNote?.favourites_count) }}</span>
+                    <span class="text-text-400 mt-0.5 ml-2">{{ numberFormat(outputtedNote?.favourites_count) }}</span>
                 </button>
                 <button class="group" @click="reblogFn" :disabled="!identity">
                     <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:repeat" v-if="!outputtedNote?.reblogged"
-                        class="size-5 text-gray-200 group-hover:group-enabled:text-green-600" aria-hidden="true" />
+                        class="size-5 text-text-200 group-hover:group-enabled:text-green-600" aria-hidden="true" />
                     <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:repeat" v-else
-                        class="size-5 text-green-600 group-hover:group-enabled:text-gray-200" aria-hidden="true" />
+                        class="size-5 text-green-600 group-hover:group-enabled:text-text-200" aria-hidden="true" />
-                    <span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(outputtedNote?.reblogs_count) }}</span>
+                    <span class="text-text-400 mt-0.5 ml-2">{{ numberFormat(outputtedNote?.reblogs_count) }}</span>
                 </button>
                 <button class="group" @click="outputtedNote && useEvent('note:quote', outputtedNote)"
                     :disabled="!identity">
                     <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:quote"
-                        class="size-5 text-gray-200 group-hover:group-enabled:text-blue-600" aria-hidden="true" />
+                        class="size-5 text-text-200 group-hover:group-enabled:text-blue-600" aria-hidden="true" />
-                    <span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(0) }}</span>
+                    <span class="text-text-400 mt-0.5 ml-2">{{ numberFormat(0) }}</span>
                 </button>
                 <AdaptiveDropdown>
                     <template #button>
-                        <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:dots" class="size-5 text-gray-200"
+                        <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:dots" class="size-5 text-text-200"
                             aria-hidden="true" />
                         <span class="sr-only">Open menu</span>
                     </template>

components/social-elements/notes/reply-header.vue

@@ -1,5 +1,5 @@
 <template>
-    <NuxtLink :href="`/@${account?.acct}`" class="mb-4 flex flex-row gap-2 items-center text-gray-300 opacity-70">
+    <NuxtLink :href="`/@${account?.acct}`" class="mb-4 flex flex-row gap-2 items-center text-text-300 opacity-70">
         <Skeleton :enabled="!account" shape="rect" class="!h-6" :min-width="40" :max-width="100" width-unit="%">
             <iconify-icon icon="tabler:arrow-back-up" width="1.5rem" height="1.5rem" aria-hidden="true" />
             <span class="shrink-0">Replying to</span>

components/social-elements/notifications/notif.vue

@@ -1,17 +1,17 @@
 <template>
-    <div class="flex flex-col p-1 bg-dark-400">
+    <div class="flex flex-col p-1 bg-background-400">
         <div class="px-4 pt-2 pb-3 flex flex-row gap-2 items-center">
             <Skeleton :enabled="!element" shape="rect" class="!h-6" :min-width="40" :max-width="100" width-unit="%">
-                <iconify-icon :icon="icon" width="1.5rem" height="1.5rem" class="text-gray-200" aria-hidden="true" />
+                <iconify-icon :icon="icon" width="1.5rem" height="1.5rem" class="text-text-200" aria-hidden="true" />
                 <Avatar v-if="element?.account?.avatar" :src="element?.account.avatar"
                     :alt="`${element?.account.acct}'s avatar'`" class="h-6 w-6 shrink-0 rounded ring-1 ring-white/10" />
-                <span class="text-gray-200 line-clamp-1"><strong v-html="display_name"></strong> {{ text
+                <span class="text-text-200 line-clamp-1"><strong v-html="display_name"></strong> {{ text
                     }}</span>
             </Skeleton>
         </div>
         <div>
             <Note v-if="element?.status || !element" :element="element?.status" :small="true" />
-            <div v-else-if="element.account" class="p-6 ring-1 ring-white/5 bg-dark-800">
+            <div v-else-if="element.account" class="p-6 ring-1 ring-white/5 bg-background-800">
                 <SmallCard :account="element.account" />
             </div>
             <div v-if="element?.type === 'follow_request' && relationship?.requested_by"

components/social-elements/users/Account.vue

@@ -1,11 +1,11 @@
 <template>
-    <div class="w-full ring-1 ring-inset ring-white/5 pb-10 bg-dark-800">
+    <div class="w-full ring-1 ring-inset ring-white/5 pb-10 bg-background-800">
         <Avatar :src="account?.header" :alt="`${account?.acct}'s header image'`"
-            class="w-full aspect-[8/3] border-b border-white/10 bg-dark-700 !rounded-none" />
+            class="w-full aspect-[8/3] border-b border-white/10 bg-background-700 !rounded-none" />
 
         <div class="flex items-start justify-between px-4 py-3">
             <Avatar :src="account?.avatar" :alt="`${account?.acct}'s avatar'`"
-                class="h-32 w-32 -mt-[4.5rem] z-10 shrink-0 rounded ring-2 ring-dark-800" />
+                class="h-32 w-32 -mt-[4.5rem] z-10 shrink-0 rounded ring-2 ring-background-800" />
 
             <div class="flex gap-x-2">
                 <Button theme="secondary" v-if="account && account?.id === identity?.account?.id">Edit Profile
@@ -30,15 +30,15 @@
 
         <div class="mt-2 px-4">
             <h2
-                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">
+                class="text-xl font-bold text-text-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">
                     <span v-html="display_name"></span>
                     <iconify-icon v-if="account?.locked" icon="tabler:lock" width="1.25rem" height="1.25rem"
-                        class="text-gray-400 cursor-pointer align-text-top ml-1"
+                        class="text-text-400 cursor-pointer align-text-top ml-1"
                         title="This account manually approves its followers" />
                 </Skeleton>
             </h2>
-            <span class="text-gray-300 block mt-2">
+            <span class="text-text-300 block mt-2">
                 <Skeleton :enabled="skeleton" :min-width="130" :max-width="250">@{{ account?.acct }}</Skeleton>
             </span>
             <div class="flex flex-row flex-wrap gap-4 mt-4" v-if="isDeveloper || visibleRoles.length > 0">
@@ -59,27 +59,27 @@
         <div class="mt-3 flex items-center space-x-4 px-4">
             <div class="flex items-center space-x-1">
                 <Skeleton :enabled="skeleton" :min-width="150" :max-width="150" shape="rect">
-                    <iconify-icon icon="tabler:calendar" width="1.25rem" height="1.25rem" class="text-gray-400" />
+                    <iconify-icon icon="tabler:calendar" width="1.25rem" height="1.25rem" class="text-text-400" />
-                    <span class="text-gray-400">Created {{ formattedJoin }}</span>
+                    <span class="text-text-400">Created {{ formattedJoin }}</span>
                 </Skeleton>
             </div>
             <div v-if="account?.bot" class="flex items-center space-x-1">
-                <iconify-icon icon="tabler:robot" width="1.25rem" height="1.25rem" class="text-gray-400" />
+                <iconify-icon icon="tabler:robot" width="1.25rem" height="1.25rem" class="text-text-400" />
-                <span class="text-gray-400">Bot</span>
+                <span class="text-text-400">Bot</span>
             </div>
         </div>
 
         <div class="mt-3 flex items-center space-x-4 px-4">
             <div class="cursor-pointer hover:underline space-x-1">
                 <Skeleton :enabled="skeleton" :min-width="100" :max-width="150" shape="rect">
-                    <span class="font-bold text-gray-200">{{ account?.statuses_count }}</span>
+                    <span class="font-bold text-text-200">{{ account?.statuses_count }}</span>
-                    <span class="text-gray-400">Posts</span>
+                    <span class="text-text-400">Posts</span>
                 </Skeleton>
             </div>
             <div class="cursor-pointer hover:underline space-x-1">
                 <Skeleton :enabled="skeleton" :min-width="100" :max-width="150" shape="rect">
-                    <span class="font-bold text-gray-200">{{ account?.following_count }}</span>
+                    <span class="font-bold text-text-200">{{ account?.following_count }}</span>
-                    <span class="text-gray-400">Following</span>
+                    <span class="text-text-400">Following</span>
                 </Skeleton>
             </div>
         </div>
@@ -87,7 +87,7 @@
         <div v-if="!skeleton && fields && fields.length > 0" class="mt-4 px-4 flex-col flex space-y-3">
             <div v-for="field of fields" :key="field.name ?? ''" class="flex flex-col gap-1">
                 <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>
+                <span class="text-text-200 prose prose-invert break-all" v-html="field.value"></span>
             </div>
         </div>
 

components/social-elements/users/AccountActionsDropdown.vue

@@ -2,7 +2,7 @@
     <AdaptiveDropdown>
         <template #button>
             <Button theme="secondary" class="h-full">
-                <iconify-icon width="unset" icon="tabler:dots" class="size-5 text-gray-200" aria-hidden="true" />
+                <iconify-icon width="unset" icon="tabler:dots" class="size-5 text-text-200" aria-hidden="true" />
                 <span class="sr-only">Open menu</span>
             </Button>
         </template>

components/social-elements/users/Badge.vue

@@ -1,7 +1,7 @@
 <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-primary-200 ring-white/5 ring-1">
+                class="inline-flex items-center px-2 py-1 gap-x-2 rounded text-sm font-medium bg-background-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-primary-500">
                     <g>
@@ -22,7 +22,7 @@
                 leave-active-class="transition ease-out duration-75" leave-from-class="transform opacity-100 scale-100"
                 leave-to-class="transform opacity-0 scale-95">
                 <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">
+                    class="rounded px-4 py-2 text-sm bg-background-400 text-text-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-primary-500 inline mb-0.5">
                         <g>

components/social-elements/users/SmallCard.vue

@@ -8,14 +8,14 @@
         </Skeleton>
         <div class="flex flex-col items-start justify-around ml-4 grow overflow-hidden">
             <div class="flex flex-row items-center justify-between w-full">
-                <div class="font-semibold text-gray-200 line-clamp-1 break-all">
+                <div class="font-semibold text-text-200 line-clamp-1 break-all">
                     <Skeleton :enabled="!account" :min-width="90" :max-width="170" shape="rect">
                         {{
                             account?.display_name }}
                     </Skeleton>
                 </div>
             </div>
-            <span class="text-gray-400 text-sm line-clamp-1 break-all w-full">
+            <span class="text-text-400 text-sm line-clamp-1 break-all w-full">
                 <Skeleton :enabled="!account" :min-width="130" :max-width="250" shape="rect">
                     @{{
                         account?.acct

components/social-elements/users/UserCard.vue

@@ -14,24 +14,24 @@
             </Transition>
             <HoverCard.Positioner>
                 <HoverCard.Content
-                    class="bg-dark-700 pb-4 w-96 z-20 overflow-y-auto rounded overflow-x-hidden ring-1 ring-white/20 shadow-xl max-h-[60vh] text-sm">
+                    class="bg-background-700 pb-4 w-96 z-20 overflow-y-auto rounded overflow-x-hidden ring-1 ring-white/20 shadow-xl max-h-[60vh] text-sm">
                     <Avatar :src="account.header" :alt="`${account.acct}'s header image'`"
-                        class="w-full aspect-[8/3] border-b border-white/10 bg-dark-700 !rounded-none" />
+                        class="w-full aspect-[8/3] border-b border-white/10 bg-background-700 !rounded-none" />
 
                     <div class="flex items-start justify-between px-4 py-3">
                         <Avatar :src="account.avatar" :alt="`${account.acct}'s avatar'`"
-                            class="h-32 w-32 -mt-[4.5rem] z-10 shrink-0 rounded ring-2 ring-dark-200" />
+                            class="h-32 w-32 -mt-[4.5rem] z-10 shrink-0 rounded ring-2 ring-background-200" />
                     </div>
 
                     <div class="mt-2 px-4">
                         <h2
-                            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">
+                            class="text-xl font-bold text-text-100 tracking-tight bg-gradient-to-r from-primary-300 via-purple-300 to-indigo-400 text-transparent bg-clip-text">
                             <span v-html="display_name"></span>
                             <iconify-icon v-if="account.locked" icon="tabler:lock" width="1.25rem" height="1.25rem"
-                                class="text-gray-400 cursor-pointer align-text-top ml-1"
+                                class="text-text-400 cursor-pointer align-text-top ml-1"
                                 title="This account manually approves its followers" />
                         </h2>
-                        <span class="text-gray-300 block mt-2">
+                        <span class="text-text-300 block mt-2">
                             @{{ account.acct }}
                         </span>
                         <div class="flex flex-row flex-wrap gap-4 mt-4" v-if="isDeveloper || visibleRoles.length > 0">
@@ -49,30 +49,30 @@
                     <div class="mt-3 flex items-center space-x-4 px-4">
                         <div class="flex items-center space-x-1">
                             <iconify-icon icon="tabler:calendar" width="1.25rem" height="1.25rem"
-                                class="text-gray-400" />
+                                class="text-text-400" />
-                            <span class="text-gray-400">Created {{ formattedJoin }}</span>
+                            <span class="text-text-400">Created {{ formattedJoin }}</span>
                         </div>
                         <div v-if="account.bot" class="flex items-center space-x-1">
-                            <iconify-icon icon="tabler:robot" width="1.25rem" height="1.25rem" class="text-gray-400" />
+                            <iconify-icon icon="tabler:robot" width="1.25rem" height="1.25rem" class="text-text-400" />
-                            <span class="text-gray-400">Bot</span>
+                            <span class="text-text-400">Bot</span>
                         </div>
                     </div>
 
                     <div class="mt-3 flex items-center space-x-4 px-4">
                         <div class="cursor-pointer hover:underline space-x-1">
-                            <span class="font-bold text-gray-200">{{ account.statuses_count }}</span>
+                            <span class="font-bold text-text-200">{{ account.statuses_count }}</span>
-                            <span class="text-gray-400">Posts</span>
+                            <span class="text-text-400">Posts</span>
                         </div>
                         <div class="cursor-pointer hover:underline space-x-1">
-                            <span class="font-bold text-gray-200">{{ account.following_count }}</span>
+                            <span class="font-bold text-text-200">{{ account.following_count }}</span>
-                            <span class="text-gray-400">Following</span>
+                            <span class="text-text-400">Following</span>
                         </div>
                     </div>
 
                     <div v-if="fields && fields.length > 0" class="mt-4 px-4 flex-col flex space-y-3">
                         <div v-for="field of fields" :key="field.name ?? ''" class="flex flex-col gap-1">
                             <span class="text-primary-500 font-semibold" v-html="field.name"></span>
-                            <span class="text-gray-200 prose prose-invert prose-sm break-all"
+                            <span class="text-text-200 prose prose-invert prose-sm break-all"
                                 v-html="field.value"></span>
                         </div>
                     </div>

components/timelines/timeline.vue

@@ -13,13 +13,13 @@
         </div>
 
         <div v-if="hasReachedEnd && items.length > 0"
-            class="flex flex-col items-center justify-center gap-2 text-gray-200 text-center p-10">
+            class="flex flex-col items-center justify-center gap-2 text-text-200 text-center p-10">
             <span class="text-lg font-semibold">You've scrolled so far, there's nothing left to show.</span>
             <span class="text-sm">You can always go back and see what you missed.</span>
         </div>
 
         <div v-else-if="hasReachedEnd && items.length === 0"
-            class="flex flex-col items-center justify-center gap-2 text-gray-200 text-center p-10">
+            class="flex flex-col items-center justify-center gap-2 text-text-200 text-center p-10">
             <span class="text-lg font-semibold">There's nothing to show here.</span>
             <span class="text-sm">Either you're all caught up or there's nothing to show.</span>
         </div>

layouts/app.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="from-dark-600 to-dark-900 bg-gradient-to-tl relative min-h-dvh">
+    <div class="from-background-600 to-background-900 bg-gradient-to-tl relative min-h-dvh">
         <SquarePattern />
         <Navigation />
 

layouts/default.vue

@@ -1,5 +1,5 @@
 <template>
-    <main class="from-dark-600 to-dark-900 bg-gradient-to-tl min-h-dvh pb-20 md:pb-0">
+    <main class="from-background-600 to-background-900 bg-gradient-to-tl min-h-dvh pb-20 md:pb-0">
         <Navigation />
         <slot />
     </main>

packages/ui/components/buttons/button.vue

@@ -19,7 +19,7 @@ const themes = {
         "[--btn-border:theme(colors.zinc.950/90%)] [--btn-bg:theme(colors.zinc.800)] [--btn-hover-overlay:theme(colors.white/5%)] [--btn-icon:theme(colors.zinc.400)] active:[--btn-icon:theme(colors.zinc.300)] hover:[--btn-icon:theme(colors.zinc.300)] after:shadow-[shadow:inset_0_1px_theme(colors.white/15%)] border border-white/5",
     // Gradient:  bg-gradient-to-tr from-primary-300 via-purple-300 to-indigo-400
     gradient:
-        "bg-[image:--btn-bg] before:bg-[image:--btn-bg] [--btn-border:theme(colors.primary.950/90%)] [--btn-bg:linear-gradient(to_right,theme(colors.primary.300),theme(colors.purple.300),theme(colors.indigo.400))] [--btn-hover-overlay:theme(colors.white/10%)] [--btn-icon:theme(colors.gray.100)] active:[--btn-icon:theme(colors.gray.50)] hover:[--btn-icon:theme(colors.gray.50)] after:shadow-[shadow:inset_0_1px_theme(colors.white/15%)] [&>[data-spinner]]:bg-[image:--btn-bg]",
+        "bg-[image:--btn-bg] before:bg-[image:--btn-bg] [--btn-border:theme(colors.primary.950/90%)] [--btn-bg:linear-gradient(to_right,theme(colors.primary.300),theme(colors.purple.300),theme(colors.indigo.400))] [--btn-hover-overlay:theme(colors.white/10%)] [--btn-icon:theme(colors.text.100)] active:[--btn-icon:theme(colors.text.50)] hover:[--btn-icon:theme(colors.text.50)] after:shadow-[shadow:inset_0_1px_theme(colors.white/15%)] [&>[data-spinner]]:bg-[image:--btn-bg]",
     outline:
         "[--btn-border:theme(colors.zinc.950/90%)] [--btn-bg:transparent] [--btn-hover-overlay:theme(colors.white/5%)] [--btn-icon:theme(colors.zinc.200)] active:[--btn-icon:theme(colors.zinc.300)] hover:[--btn-icon:theme(colors.zinc.300)] hover:ring-1 ring-white/5",
 };

pages/about/apps.vue

@@ -10,7 +10,7 @@
                     class="rounded-sm ring-2 ring-white/10 px-4 py-2 w-full flex flex-row gap-3 items-center">
                     <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>
+                        <h2 class="text-text-100 font-semibold">{{ client.name }}</h2>
                         <span class="underline text-primary-700">{{ client.link }}</span>
                     </div>
                 </a>

pages/notifications.vue

@@ -2,9 +2,9 @@
     <div class="mx-auto max-w-2xl w-full">
         <div class="shrink-0 p-10 h-dvh" v-if="!identity">
             <button type="button"
-                class="relative block h-full w-full rounded-lg border-2 border-dashed border-dark-300 p-12 text-center">
+                class="relative block h-full w-full rounded-lg border-2 border-dashed border-background-300 p-12 text-center">
-                <iconify-icon name="tabler:notification" width="3rem" height="3rem" class="mx-auto text-gray-400" />
+                <iconify-icon name="tabler:notification" width="3rem" height="3rem" class="mx-auto text-text-400" />
-                <span class="mt-3 block text-sm font-semibold text-gray-200 max-w-56 mx-auto">Notifications
+                <span class="mt-3 block text-sm font-semibold text-text-200 max-w-56 mx-auto">Notifications
                     will
                     appear here
                     when you

pages/oauth/authorize.vue

@@ -5,7 +5,7 @@
         <div v-if="validUrlParameters" class="mx-auto w-full max-w-md">
             <VeeForm class="flex flex-col gap-y-6" method="POST" :validation-schema="schema"
                 :action="redirectUrl.toString()">
-                <h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Login to your account</h1>
+                <h1 class="font-bold text-2xl text-text-50 text-center tracking-tight">Login to your account</h1>
 
                 <div v-if="params.error" class="ring-1 ring-white/10 rounded p-4 bg-red-500 text-white">
                     <h2 class="font-bold text-lg">An error occured</h2>
@@ -36,8 +36,8 @@
 
                 <div v-if="ssoConfig && ssoConfig.providers.length > 0" class="w-full space-y-3">
                     <div
-                        class="flex items-center text-center w-full after:border-b after:border-dark-200 after:flex-1 after:ml-2 before:border-b before:border-dark-200 before:flex-1 before:mr-2">
+                        class="flex items-center text-center w-full after:border-b after:border-background-200 after:flex-1 after:ml-2 before:border-b before:border-background-200 before:flex-1 before:mr-2">
-                        <h2 class="text-sm text-gray-200 font-semibold">Or sign in with</h2>
+                        <h2 class="text-sm text-text-200 font-semibold">Or sign in with</h2>
                     </div>
                     <div class="grid md:grid-cols-2 md:[&:has(>:last-child:nth-child(1))]:grid-cols-1 gap-4 w-full">
                         <a v-for="provider of ssoConfig.providers" :key="provider.id"
@@ -53,7 +53,7 @@
                     </div>
                 </div>
 
-                <p class="text-xs text-gray-300">
+                <p class="text-xs text-text-300">
                     You are signing in to <strong>{{ hostname }}</strong>. If you did not intend to sign in
                     here, please close this page.
                 </p>
@@ -62,14 +62,14 @@
             </VeeForm>
         </div>
         <div v-else class="mx-auto max-w-md">
-            <h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl">Invalid access
+            <h1 class="text-2xl font-bold tracking-tight text-text-50 sm:text-4xl">Invalid access
                 parameters
             </h1>
-            <p class="mt-6 text-lg leading-8 text-gray-300">This page should be accessed
+            <p class="mt-6 text-lg leading-8 text-text-300">This page should be accessed
                 through a valid OAuth2 authorization request. Please use a <strong class="font-bold">Mastodon
                     API</strong> client to access this page.
             </p>
-            <p class="mt-6 text-lg leading-8 text-gray-300">Here are some recommended clients:</p>
+            <p class="mt-6 text-lg leading-8 text-text-300">Here are some recommended clients:</p>
             <ul class="w-full flex flex-col gap-3 mt-4">
                 <li v-for="client of useConfig().RECOMMENDED_CLIENTS" :key="client.name" class="w-full">
                     <a :href="client.link" target="_blank"
@@ -77,18 +77,18 @@
                         <img crossorigin="anonymous" :src="client.icon" :alt="`${client.name}'s logo'`"
                             class="h-10 w-10" />
                         <div class="flex flex-col justify-between items-start">
-                            <h2 class="font-bold text-gray-100">{{ client.name }}</h2>
+                            <h2 class="font-bold text-text-100">{{ client.name }}</h2>
                             <span class="underline text-primary-700">{{ client.link }}</span>
                         </div>
                     </a>
                 </li>
             </ul>
-            <p class="mt-6 text-lg leading-8 text-gray-300">
+            <p class="mt-6 text-lg leading-8 text-text-300">
                 Many other clients exist, but <strong class="font-bold">they have not been tested for
                     compatibility</strong>. Bug reports are nevertheless welcome.
             </p>
 
-            <p class="mt-6 text-lg leading-8 text-gray-300">
+            <p class="mt-6 text-lg leading-8 text-text-300">
                 Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose"
                     target="_blank" class="underline text-primary-700">the issue tracker</a>.
             </p>

pages/oauth/code.vue

@@ -2,19 +2,19 @@
     <div class="flex min-h-screen relative flex-col justify-center px-6 py-12 lg:px-8">
 
         <div class="mx-auto max-w-md mt-10">
-            <h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl">Here's your code
+            <h1 class="text-2xl font-bold tracking-tight text-text-50 sm:text-4xl">Here's your code
             </h1>
-            <p class="mt-6 text-lg leading-8 text-gray-300">You have signed in successfully. Your code is
+            <p class="mt-6 text-lg leading-8 text-text-300">You have signed in successfully. Your code is
             </p>
             <div class="prose prose-invert select-all mt-6">
                 <pre
-                    class="overflow-x-hidden whitespace-normal break-all bg-dark-500 ring-1 ring-white/10"><code class="text-wrap max-w-full">{{ code }}</code></pre>
+                    class="overflow-x-hidden whitespace-normal break-all bg-background-500 ring-1 ring-white/10"><code class="text-wrap max-w-full">{{ code }}</code></pre>
             </div>
-            <p class="mt-6 text-lg leading-8 text-gray-300">Paste this code into the application you are signing in
+            <p class="mt-6 text-lg leading-8 text-text-300">Paste this code into the application you are signing in
                 to.
             </p>
 
-            <p class="mt-6 text-lg leading-8 text-gray-300">
+            <p class="mt-6 text-lg leading-8 text-text-300">
                 Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose"
                     target="_blank" class="underline text-primary-700">the issue tracker</a>.
             </p>

pages/oauth/consent.vue

@@ -4,17 +4,17 @@
             <form class="space-y-6" method="POST" :action="url.pathname.replace('/oauth/consent', '/oauth/authorize')">
                 <input type="hidden" v-for="([key, value]) in url.searchParams" :key="key" :name="key" :value="value" />
                 <div class="flex flex-col items-center gap-y-5">
-                    <h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Allow this application to
+                    <h1 class="font-bold text-2xl text-text-50 text-center tracking-tight">Allow this application to
                         access your
                         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>
+                        <h2 class="font-bold text-text-200">{{ application }}</h2>
                         <a v-if="website" :href="website" target="_blank" class="underline text-primary-700">{{ website
                             }}</a>
                     </div>
                 </div>
 
-                <h2 class="text-gray-50 tracking-tight text-xl font-semibold">
+                <h2 class="text-text-50 tracking-tight text-xl font-semibold">
                     This application will be able to:
                 </h2>
 
@@ -25,16 +25,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" />
                         </svg>
-                        <h2 class="text-sm text-gray-200">
+                        <h2 class="text-sm text-text-200">
                             <strong class="font-bold">{{ text[0] }}</strong> {{ text[1] }}
                         </h2>
                     </li>
                 </ul>
 
                 <div class="flex-col flex gap-y-1">
-                    <p class="text-sm text-gray-200">You are signing in to <b>{{ application }}</b> with your
+                    <p class="text-sm text-text-200">You are signing in to <b>{{ application }}</b> with your
                         account.</p>
-                    <p class="text-sm text-gray-200">This allows <b>{{ application }}</b> to perform the above
+                    <p class="text-sm text-text-200">This allows <b>{{ application }}</b> to perform the above
                         account
                         actions.</p>
                 </div>
@@ -48,14 +48,14 @@
             </form>
         </div>
         <div v-else class="mx-auto max-w-md mt-10">
-            <h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl">Invalid access
+            <h1 class="text-2xl font-bold tracking-tight text-text-50 sm:text-4xl">Invalid access
                 parameters
             </h1>
-            <p class="mt-6 text-lg leading-8 text-gray-300">This page should be accessed
+            <p class="mt-6 text-lg leading-8 text-text-300">This page should be accessed
                 through a valid OAuth2 authorization request. Please use a <strong class="font-bold">Mastodon
                     API</strong> client to access this page.
             </p>
-            <p class="mt-6 text-lg leading-8 text-gray-300">Here are some recommended clients:</p>
+            <p class="mt-6 text-lg leading-8 text-text-300">Here are some recommended clients:</p>
             <ul class="w-full flex flex-col gap-3 mt-4">
                 <li v-for="client of useConfig().RECOMMENDED_CLIENTS" :key="client.name" class="w-full">
                     <a :href="client.link" target="_blank"
@@ -63,18 +63,18 @@
                         <img crossorigin="anonymous" :src="client.icon" :alt="`${client.name}'s logo'`"
                             class="h-10 w-10" />
                         <div class="flex flex-col justify-between items-start">
-                            <h2 class="font-bold text-gray-100">{{ client.name }}</h2>
+                            <h2 class="font-bold text-text-100">{{ client.name }}</h2>
                             <span class="underline text-primary-700">{{ client.link }}</span>
                         </div>
                     </a>
                 </li>
             </ul>
-            <p class="mt-6 text-lg leading-8 text-gray-300">
+            <p class="mt-6 text-lg leading-8 text-text-300">
                 Many other clients exist, but <strong class="font-bold">they have not been tested for
                     compatibility</strong>. Bug reports are nevertheless welcome.
             </p>
 
-            <p class="mt-6 text-lg leading-8 text-gray-300">
+            <p class="mt-6 text-lg leading-8 text-text-300">
                 Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose"
                     target="_blank" class="underline text-primary-700">the issue tracker</a>.
             </p>

pages/oauth/reset.vue

@@ -6,7 +6,7 @@
             <VeeForm class="flex flex-col gap-y-6" method="POST" :validation-schema="schema" action="/api/auth/reset">
                 <input type="hidden" name="token" :value="params.token" />
 
-                <h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Reset your password</h1>
+                <h1 class="font-bold text-2xl text-text-50 text-center tracking-tight">Reset your password</h1>
 
                 <div v-if="error" class="ring-1 ring-white/10 rounded p-4 bg-red-500 text-white">
                     <h2 class="font-bold text-lg">An error occured</h2>
@@ -43,22 +43,22 @@
             </VeeForm>
         </div>
         <div v-else-if="params.success">
-            <h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl text-center">Password reset
+            <h1 class="text-2xl font-bold tracking-tight text-text-50 sm:text-4xl text-center">Password reset
                 successful!
             </h1>
-            <p class="mt-6 text-lg leading-8 text-gray-300 text-center">
+            <p class="mt-6 text-lg leading-8 text-text-300 text-center">
                 You can now login to your account with your new password.
             </p>
         </div>
         <div v-else class="mx-auto max-w-md">
-            <h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl">Invalid access
+            <h1 class="text-2xl font-bold tracking-tight text-text-50 sm:text-4xl">Invalid access
                 parameters
             </h1>
-            <p class="mt-6 text-lg leading-8 text-gray-300">This page should be accessed
+            <p class="mt-6 text-lg leading-8 text-text-300">This page should be accessed
                 through a valid password reset request. Please ask your admin to reset your password.
             </p>
 
-            <p class="mt-6 text-lg leading-8 text-gray-300">
+            <p class="mt-6 text-lg leading-8 text-text-300">
                 Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose"
                     target="_blank" class="underline text-primary-700">the issue tracker</a>.
             </p>

pages/register/index.vue

@@ -9,7 +9,7 @@
                 <span class="text-sm">{{ errors.error }}</span>
             </div>
             <VeeForm class="flex flex-col gap-y-6" @submit="s => register((s as any))" :validation-schema="schema">
-                <h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Account details</h1>
+                <h1 class="font-bold text-2xl text-text-50 text-center tracking-tight">Account details</h1>
 
                 <VeeField name="username" v-slot="{ errorMessage, field }" validate-on-change>
                     <Field>
@@ -60,7 +60,7 @@
                     <Field>
                         <div class="flex flex-row gap-x-2 items-center">
                             <CheckboxInput :checked="true" id="tos" required :disabled="true" v-bind="field" />
-                            <Label for="tos" class="!text-gray-200">
+                            <Label for="tos" class="!text-text-200">
                                 I agree to the Terms of Service
                             </Label>
                         </div>
@@ -73,12 +73,12 @@
                         <Button theme="secondary" class="w-full">View Terms of Service</Button>
                     </Collapsible.Trigger>
                     <Collapsible.Content
-                        class="prose prose-invert prose-sm p-4 ring-1 ring-white/10 bg-dark-700 rounded mt-3">
+                        class="prose prose-invert prose-sm p-4 ring-1 ring-white/10 bg-background-700 rounded mt-3">
                         <div v-html="tos?.content"></div>
                     </Collapsible.Content>
                 </Collapsible.Root>
 
-                <p class="text-xs font-semibold text-gray-300">
+                <p class="text-xs font-semibold text-text-300">
                     Passwords are stored securely and hashed. We do not store your password in plain text.
                     Administrators
                     cannot see your password.
@@ -90,10 +90,10 @@
             </VeeForm>
         </div>
         <div v-else>
-            <h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl text-center">Registrations are
+            <h1 class="text-2xl font-bold tracking-tight text-text-50 sm:text-4xl text-center">Registrations are
                 disabled
             </h1>
-            <p class="mt-6 text-lg leading-8 text-gray-200 text-center">Ask this instance's admin to enable them in
+            <p class="mt-6 text-lg leading-8 text-text-200 text-center">Ask this instance's admin to enable them in
                 config!
             </p>
         </div>

pages/register/success.vue

@@ -1,10 +1,10 @@
 <template>
     <div class="flex min-h-screen flex-col justify-center px-6 py-12 lg:px-8 relative">
         <div>
-            <h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl text-center">Registration was a
+            <h1 class="text-2xl font-bold tracking-tight text-text-50 sm:text-4xl text-center">Registration was a
                 success!
             </h1>
-            <p class="mt-6 text-lg leading-8 text-gray-300 text-center"> You can now login to your account in any
+            <p class="mt-6 text-lg leading-8 text-text-300 text-center"> You can now login to your account in any
                 Mastodon
                 client </p>
         </div>

styles/theme.css

@@ -1,25 +1,44 @@
+/*
+ * This file is used to define the theme colors for the application.
+ * Each color is defined in the HSL format, without the hsl() function.
+ * hsl(0deg 0% 0%) should be changed to 0deg 0% 0%.
+ *
+ * This format is due to limited support for Relative Colors in CSS.
+ */
 :root {
-  --theme-dark-50: #4a4a4a;
+  --theme-background-50: 0deg 0% 29%;
-  --theme-dark-100: #3c3c3c;
+  --theme-background-100: 0deg 0% 24%;
-  --theme-dark-200: #323232;
+  --theme-background-200: 0deg 0% 20%;
-  --theme-dark-300: #2d2d2d;
+  --theme-background-300: 0deg 0% 18%;
-  --theme-dark-400: #222222;
+  --theme-background-400: 0deg 0% 13%;
-  --theme-dark-500: #1f1f1f;
+  --theme-background-500: 0deg 0% 12%;
-  --theme-dark-600: #1c1c1e;
+  --theme-background-600: 240deg 3% 11%;
-  --theme-dark-700: #1b1b1b;
+  --theme-background-700: 0deg 0% 11%;
-  --theme-dark-800: #181818;
+  --theme-background-800: 0deg 0% 9%;
-  --theme-dark-900: #0f0f0f;
+  --theme-background-900: 0deg 0% 6%;
-  --theme-dark-950: #080808;
+  --theme-background-950: 0deg 0% 3%;
 
-  --theme-primary-50: #fdf2f8;
+  --theme-primary-50: 327deg 73% 97%;
-  --theme-primary-100: #fce7f3;
+  --theme-primary-100: 326deg 78% 95%;
-  --theme-primary-200: #fbcfe8;
+  --theme-primary-200: 326deg 85% 90%;
-  --theme-primary-300: #f9a8d4;
+  --theme-primary-300: 327deg 87% 82%;
-  --theme-primary-400: #f472b6;
+  --theme-primary-400: 329deg 86% 70%;
-  --theme-primary-500: #ec4899;
+  --theme-primary-500: 330deg 81% 60%;
-  --theme-primary-600: #db2777;
+  --theme-primary-600: 333deg 71% 51%;
-  --theme-primary-700: #be185d;
+  --theme-primary-700: 335deg 78% 42%;
-  --theme-primary-800: #9d174d;
+  --theme-primary-800: 336deg 74% 35%;
-  --theme-primary-900: #831843;
+  --theme-primary-900: 336deg 69% 30%;
-  --theme-primary-950: #500724;
+  --theme-primary-950: 336deg 84% 17%;
+
+  --theme-text-50: 210 20% 98%;
+  --theme-text-100: 220 14% 96%;
+  --theme-text-200: 220 13% 91%;
+  --theme-text-300: 216 12% 84%;
+  --theme-text-400: 218 11% 65%;
+  --theme-text-500: 220 9% 46%;
+  --theme-text-600: 215 14% 34%;
+  --theme-text-700: 217 19% 27%;
+  --theme-text-800: 215 28% 17%;
+  --theme-text-900: 221 39% 11%;
+  --theme-text-950: 224 71% 4%;
 }

tailwind.config.ts

@@ -2,26 +2,20 @@ import forms from "@tailwindcss/forms";
 import typography from "@tailwindcss/typography";
 import type { Config } from "tailwindcss";
 
-const themeVariables = (color: string) => ({
+const themeVariables = (color: string) =>
-    50: `var(--theme-${color}-50)`,
+    Object.fromEntries(
-    100: `var(--theme-${color}-100)`,
+        [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].flatMap((n) => [
-    200: `var(--theme-${color}-200)`,
+            [n, `hsl(var(--theme-${color}-${n}) / <alpha-value>)`],
-    300: `var(--theme-${color}-300)`,
+        ]),
-    400: `var(--theme-${color}-400)`,
+    );
-    500: `var(--theme-${color}-500)`,
-    600: `var(--theme-${color}-600)`,
-    700: `var(--theme-${color}-700)`,
-    800: `var(--theme-${color}-800)`,
-    900: `var(--theme-${color}-900)`,
-    950: `var(--theme-${color}-950)`,
-});
 
 export default (<Config>{
     theme: {
         extend: {
             colors: {
-                dark: themeVariables("dark"),
+                background: themeVariables("background"),
                 primary: themeVariables("primary"),
+                text: themeVariables("text"),
             },
             animation: {
                 like: "like 1s ease-in-out",