feat: ♻️ Rename dark to background, refactor themes

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"
-                    tabindex="0" @pointerup="removeFile(data.id)" @keydown.enter="removeFile(data.id)">
+                <button class="absolute top-1 right-1 p-1 bg-background-800 text-white text-xs rounded size-6"
+                    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>