From 206383fdb7b178f7916ab632e9e6b655cc12bebd Mon Sep 17 00:00:00 2001
From: xcexec <hattori.hansa@protonmail.com>
Date: Tue, 22 Oct 2024 11:31:15 +0200
Subject: [PATCH] changed all remaining 'zinc' color values to 'slate'

---
 src/assets/oruga-tailwindcss.css              | 28 +++++++++----------
 src/components/Comment/EventComment.vue       | 12 ++++----
 src/components/Event/EventListViewCard.vue    |  2 +-
 src/components/Group/InvitationCard.vue       |  2 +-
 src/components/NavBar.vue                     |  2 +-
 src/components/OAuth/AuthorizeApplication.vue |  6 ++--
 .../Participation/UnloggedParticipation.vue   |  4 +--
 src/components/Report/ReportCard.vue          |  4 +--
 src/components/Resource/DraggableList.vue     |  2 +-
 .../Settings/SettingMenuSection.vue           |  2 +-
 src/components/TextEditor.vue                 |  6 ++--
 src/views/Admin/AdminProfile.vue              |  2 +-
 src/views/Admin/InstanceView.vue              | 10 +++----
 src/views/CategoriesView.vue                  |  2 +-
 src/views/Event/EventView.vue                 | 14 +++++-----
 src/views/Event/MyEventsView.vue              |  2 +-
 src/views/Moderation/LogsView.vue             |  2 +-
 src/views/Moderation/ReportView.vue           | 10 +++----
 src/views/OAuth/DeviceActivationView.vue      |  2 +-
 src/views/Posts/PostView.vue                  |  2 +-
 src/views/Settings/PreferencesView.vue        |  4 +--
 .../__snapshots__/navbar.spec.ts.snap         |  6 ++--
 22 files changed, 63 insertions(+), 63 deletions(-)

diff --git a/src/assets/oruga-tailwindcss.css b/src/assets/oruga-tailwindcss.css
index d9b2bea2c..5e1fd9858 100644
--- a/src/assets/oruga-tailwindcss.css
+++ b/src/assets/oruga-tailwindcss.css
@@ -35,7 +35,7 @@ body {
   @apply border-2 bg-mbz-warning text-black hover:bg-mbz-warning/90 hover:text-slate-800;
 }
 .btn-text {
-  @apply bg-transparent border-transparent text-black dark:text-white font-normal underline hover:bg-zinc-200 hover:text-black;
+  @apply bg-transparent border-transparent text-black dark:text-white font-normal underline hover:bg-slate-200 hover:text-black;
 }
 .btn-outlined-,
 .btn-outlined-primary {
@@ -95,7 +95,7 @@ body {
 
 /* Input */
 .input {
-  @apply appearance-none box-border rounded border w-full py-2 px-3 text-black leading-tight dark:bg-zinc-600 dark:placeholder:text-zinc-400 dark:text-zinc-50;
+  @apply appearance-none box-border rounded border w-full py-2 px-3 text-black leading-tight dark:bg-slate-600 dark:placeholder:text-slate-400 dark:text-slate-50;
 }
 .input-size-small {
   @apply text-sm;
@@ -120,7 +120,7 @@ body {
 }
 .input[type="text"]:disabled,
 .input[type="email"]:disabled {
-  @apply bg-zinc-200 dark:bg-zinc-400;
+  @apply bg-slate-200 dark:bg-slate-400;
 }
 
 .icon-warning {
@@ -147,7 +147,7 @@ body {
 
 /* TagInput */
 .taginput {
-  @apply rounded bg-white dark:bg-zinc-700;
+  @apply rounded bg-white dark:bg-slate-700;
 }
 .taginput-item {
   @apply bg-primary mr-2;
@@ -191,14 +191,14 @@ body {
 }
 .dropdown-menu {
   min-width: 12em;
-  @apply bg-white dark:bg-zinc-700 shadow-lg rounded text-start py-2;
+  @apply bg-white dark:bg-slate-700 shadow-lg rounded text-start py-2;
 }
 .dropdown-item {
   @apply relative inline-flex gap-1 no-underline p-2 cursor-pointer w-full hover:bg-[#f5f5f5] hover:text-black;
 }
 
 .dropdown-item-active {
-  @apply bg-mbz-yellow-500 dark:bg-mbz-yellow-900 dark:text-zinc-100 text-black;
+  @apply bg-mbz-yellow-500 dark:bg-mbz-yellow-900 dark:text-slate-100 text-black;
 }
 .dropdown-button {
   @apply inline-flex gap-1;
@@ -224,7 +224,7 @@ body {
 /* Modal */
 
 .modal-content {
-  @apply bg-white dark:bg-zinc-800 rounded px-2 py-4 w-full z-0;
+  @apply bg-white dark:bg-slate-800 rounded px-2 py-4 w-full z-0;
 }
 
 /* Switch */
@@ -242,7 +242,7 @@ body {
 
 /* Select */
 .select {
-  @apply dark:bg-zinc-600 dark:placeholder:text-zinc-400 dark:text-zinc-50 pl-2 pr-8 border-2 border-transparent h-10 shadow-none rounded w-full;
+  @apply dark:bg-slate-600 dark:placeholder:text-slate-400 dark:text-slate-50 pl-2 pr-8 border-2 border-transparent h-10 shadow-none rounded w-full;
 }
 
 /* Radio */
@@ -288,7 +288,7 @@ button.menubar__button {
 
 /* Table */
 .table tr {
-  @apply odd:bg-white dark:odd:bg-zinc-600 last:border-b-0 even:bg-gray-50 dark:even:bg-zinc-700 border-b rounded;
+  @apply odd:bg-white dark:odd:bg-slate-600 last:border-b-0 even:bg-gray-50 dark:even:bg-slate-700 border-b rounded;
 }
 
 .table-td {
@@ -314,7 +314,7 @@ button.menubar__button {
   @apply flex items-center text-center justify-between;
 }
 .pagination-link {
-  @apply inline-flex items-center relative justify-center cursor-pointer rounded h-10 m-1 p-2 bg-white dark:bg-zinc-300 text-lg text-black;
+  @apply inline-flex items-center relative justify-center cursor-pointer rounded h-10 m-1 p-2 bg-white dark:bg-slate-300 text-lg text-black;
 }
 .pagination-list {
   @apply flex items-center text-center list-none flex-wrap grow shrink justify-start;
@@ -346,10 +346,10 @@ button.menubar__button {
 
 /** Tooltip */
 .tooltip-content {
-  @apply bg-zinc-800 text-white dark:bg-zinc-300 dark:text-black rounded py-1 px-2;
+  @apply bg-slate-800 text-white dark:bg-slate-300 dark:text-black rounded py-1 px-2;
 }
 .tooltip-arrow {
-  @apply text-zinc-800 dark:text-zinc-200;
+  @apply text-slate-800 dark:text-slate-200;
 }
 .tooltip-content-success {
   @apply bg-mbz-success text-white;
@@ -388,7 +388,7 @@ button.menubar__button {
   @apply rounded py-2 px-3;
 }
 .o-dpck__table__cell--selectable {
-  @apply dark:text-zinc-50;
+  @apply dark:text-slate-50;
 }
 .o-dpck__month__head-cell,
 .o-dpck__table__head-cell {
@@ -397,5 +397,5 @@ button.menubar__button {
 
 /** Timepicker */
 .o-tpck__select {
-  @apply dark:bg-zinc-700 dark:placeholder:text-zinc-400 dark:text-zinc-50;
+  @apply dark:bg-slate-700 dark:placeholder:text-slate-400 dark:text-slate-50;
 }
diff --git a/src/components/Comment/EventComment.vue b/src/components/Comment/EventComment.vue
index 2512753fc..44a249c35 100644
--- a/src/components/Comment/EventComment.vue
+++ b/src/components/Comment/EventComment.vue
@@ -1,6 +1,6 @@
 <template>
   <li
-    class="bg-white dark:bg-zinc-800 rounded p-2"
+    class="bg-white dark:bg-slate-800 rounded p-2"
     :class="{
       reply: comment.inReplyToComment,
       'bg-mbz-purple-50 dark:bg-mbz-purple-500': comment.isAnnouncement,
@@ -59,7 +59,7 @@
         <div v-else>{{ t("[This comment has been deleted]") }}</div>
         <nav class="flex gap-1 mt-1" v-if="!comment.deletedAt">
           <button
-            class="cursor-pointer flex hover:bg-zinc-300 dark:hover:bg-zinc-600 rounded p-1"
+            class="cursor-pointer flex hover:bg-slate-300 dark:hover:bg-slate-600 rounded p-1"
             v-if="
               currentActor?.id &&
               !readOnly &&
@@ -74,7 +74,7 @@
           <o-dropdown aria-role="list" v-show="!readOnly">
             <template #trigger>
               <button
-                class="cursor-pointer flex hover:bg-zinc-300 dark:hover:bg-zinc-600 rounded p-1"
+                class="cursor-pointer flex hover:bg-slate-300 dark:hover:bg-slate-600 rounded p-1"
               >
                 <DotsHorizontal />
                 <span class="sr-only">{{ t("More options") }}</span>
@@ -104,7 +104,7 @@
           <button
             v-if="!showReplies"
             @click="showReplies = true"
-            class="flex cursor-pointer hover:bg-zinc-300 dark:hover:bg-zinc-600 rounded p-1"
+            class="flex cursor-pointer hover:bg-slate-300 dark:hover:bg-slate-600 rounded p-1"
           >
             <ChevronDown />
             <span>{{
@@ -120,7 +120,7 @@
           <button
             v-else-if="comment.totalReplies && showReplies"
             @click="showReplies = false"
-            class="flex cursor-pointer hover:bg-zinc-300 dark:hover:bg-zinc-600 rounded p-1"
+            class="flex cursor-pointer hover:bg-slate-300 dark:hover:bg-slate-600 rounded p-1"
           >
             <ChevronUp />
             <span>{{ t("Hide replies") }}</span>
@@ -402,6 +402,6 @@ const dateFnsLocale = inject<Locale>("dateFnsLocale");
 </script>
 <style>
 article.mbz-comment .mention.h-card {
-  @apply inline-block border border-zinc-600 dark:border-zinc-300 rounded py-0.5 px-1;
+  @apply inline-block border border-slate-600 dark:border-slate-300 rounded py-0.5 px-1;
 }
 </style>
diff --git a/src/components/Event/EventListViewCard.vue b/src/components/Event/EventListViewCard.vue
index 61baf2d29..8564fc6aa 100644
--- a/src/components/Event/EventListViewCard.vue
+++ b/src/components/Event/EventListViewCard.vue
@@ -1,6 +1,6 @@
 <template>
   <article
-    class="bg-white dark:bg-zinc-700 dark:text-white dark:hover:text-white rounded-lg shadow-md max-w-3xl p-2"
+    class="bg-white dark:bg-slate-700 dark:text-white dark:hover:text-white rounded-lg shadow-md max-w-3xl p-2"
   >
     <div class="flex gap-2">
       <div class="">
diff --git a/src/components/Group/InvitationCard.vue b/src/components/Group/InvitationCard.vue
index f3ef4bbc4..9feab24ac 100644
--- a/src/components/Group/InvitationCard.vue
+++ b/src/components/Group/InvitationCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="border rounded p-2 bg-mbz-yellow-alt-50 dark:bg-zinc-700">
+  <div class="border rounded p-2 bg-mbz-yellow-alt-50 dark:bg-slate-700">
     <div class="prose dark:prose-invert">
       <i18n-t
         tag="p"
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 8f57f0356..ce8cb3045 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -177,7 +177,7 @@
           <li class="m-auto">
             <router-link
               :to="{ name: RouteName.EVENT_CALENDAR }"
-              class="block py-2 pr-4 pl-3 text-gray-50 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-white md:dark:hover:text-white dark:hover:bg-black md:dark:hover:text-white md:dark:hover:bg-transparent"
+              class="block py-2 pr-4 pl-3 text-gray-50 border-b border-gray-100 hover:bg-slate-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-white md:dark:hover:text-white dark:hover:bg-black md:dark:hover:text-white md:dark:hover:bg-transparent"
               >{{ t("Calendar") }}</router-link
             >
           </li>
diff --git a/src/components/OAuth/AuthorizeApplication.vue b/src/components/OAuth/AuthorizeApplication.vue
index 1d896f054..c9ccfdedd 100644
--- a/src/components/OAuth/AuthorizeApplication.vue
+++ b/src/components/OAuth/AuthorizeApplication.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="checkDevice">
-    <div class="rounded-lg bg-white dark:bg-zinc-900 shadow-xl my-6 p-4 pt-1">
+    <div class="rounded-lg bg-white dark:bg-slate-900 shadow-xl my-6 p-4 pt-1">
       <h1 class="text-3xl">
         {{ t("Application authorized") }}
       </h1>
@@ -14,7 +14,7 @@
       {{ t("Autorize this application to access your account?") }}
     </h1>
 
-    <div class="rounded-lg bg-white dark:bg-zinc-900 shadow-xl my-6">
+    <div class="rounded-lg bg-white dark:bg-slate-900 shadow-xl my-6">
       <div class="p-4 pb-0">
         <p class="text-3xl font-bold">{{ authApplication.name }}</p>
         <p>{{ authApplication.website }}</p>
@@ -44,7 +44,7 @@
           {{ t("This application asks for the following permissions:") }}
         </p>
         <o-collapse
-          class="mt-3 border-b pb-2 border-zinc-700 text-black dark:text-white"
+          class="mt-3 border-b pb-2 border-slate-700 text-black dark:text-white"
           :class="{
             'bg-mbz-warning dark:!text-black': collapse?.type === 'warning',
           }"
diff --git a/src/components/Participation/UnloggedParticipation.vue b/src/components/Participation/UnloggedParticipation.vue
index e4cfb75a0..c6edc92fb 100644
--- a/src/components/Participation/UnloggedParticipation.vue
+++ b/src/components/Participation/UnloggedParticipation.vue
@@ -5,7 +5,7 @@
     </h2>
     <EventListViewCard v-if="event" :event="event" />
     <div class="flex flex-wrap gap-4 items-center w-full my-6">
-      <div class="bg-white dark:bg-zinc-700 rounded-md p-4 flex-1">
+      <div class="bg-white dark:bg-slate-700 rounded-md p-4 flex-1">
         <router-link :to="{ name: RouteName.EVENT_PARTICIPATE_WITH_ACCOUNT }">
           <figure class="flex justify-center my-2">
             <img
@@ -40,7 +40,7 @@
         </p>
       </div>
       <div
-        class="bg-white dark:bg-zinc-700 rounded-md p-4 flex-1"
+        class="bg-white dark:bg-slate-700 rounded-md p-4 flex-1"
         v-if="
           event &&
           anonymousParticipationAllowed &&
diff --git a/src/components/Report/ReportCard.vue b/src/components/Report/ReportCard.vue
index 56b99b87b..5b5174b3d 100644
--- a/src/components/Report/ReportCard.vue
+++ b/src/components/Report/ReportCard.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="bg-mbz-yellow-alt-50 hover:bg-mbz-yellow-alt-100 dark:bg-zinc-700 hover:dark:bg-zinc-600 rounded"
+    class="bg-mbz-yellow-alt-50 hover:bg-mbz-yellow-alt-100 dark:bg-slate-700 hover:dark:bg-slate-600 rounded"
     v-if="report"
   >
     <div class="flex justify-between gap-1 border-b p-2">
@@ -20,7 +20,7 @@
             {{ report.reported.name }}
           </p>
           <p
-            class="text-zinc-700 dark:text-zinc-100 text-sm"
+            class="text-slate-700 dark:text-slate-100 text-sm"
             v-else-if="report.reported?.preferredUsername"
           >
             @{{ usernameWithDomain(report.reported) }}
diff --git a/src/components/Resource/DraggableList.vue b/src/components/Resource/DraggableList.vue
index d72a9f149..76a8e454e 100644
--- a/src/components/Resource/DraggableList.vue
+++ b/src/components/Resource/DraggableList.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="bg-white dark:bg-zinc-700 p-2 pt-0.5">
+  <section class="bg-white dark:bg-slate-700 p-2 pt-0.5">
     <h1>{{ t("Resources") }}</h1>
     <p v-if="isRoot">
       {{ t("A place to store links to documents or resources of any type.") }}
diff --git a/src/components/Settings/SettingMenuSection.vue b/src/components/Settings/SettingMenuSection.vue
index bb390b144..55cd9626b 100644
--- a/src/components/Settings/SettingMenuSection.vue
+++ b/src/components/Settings/SettingMenuSection.vue
@@ -1,6 +1,6 @@
 <template>
   <li
-    class="bg-mbz-purple-700 text-zinc-100 text-xl"
+    class="bg-mbz-purple-700 text-slate-100 text-xl"
   >
     <router-link
       class="cursor-pointer my-2 mx-0 py-2 px-3 font-medium block no-underline"
diff --git a/src/components/TextEditor.vue b/src/components/TextEditor.vue
index 31ddcd9b6..12e6c71eb 100644
--- a/src/components/TextEditor.vue
+++ b/src/components/TextEditor.vue
@@ -345,7 +345,7 @@ const editor = useEditor({
       "aria-label": ariaLabel.value ?? "",
       role: "textbox",
       class:
-        "prose dark:prose-invert prose-sm lg:prose-lg xl:prose-xl bg-white dark:bg-zinc-700 !max-w-full",
+        "prose dark:prose-invert prose-sm lg:prose-lg xl:prose-xl bg-white dark:bg-slate-700 !max-w-full",
     },
     transformPastedHTML: transformPastedHTML,
   },
@@ -677,11 +677,11 @@ const checkEditorEmpty = () => {
 }
 
 .menubar__button.is-active {
-  @apply bg-zinc-300 dark:bg-zinc-500;
+  @apply bg-slate-300 dark:bg-slate-500;
 }
 
 .mention[data-id] {
-  @apply inline-block border border-zinc-600 dark:border-zinc-300 rounded py-0.5 px-1;
+  @apply inline-block border border-slate-600 dark:border-slate-300 rounded py-0.5 px-1;
 }
 
 .editor__content > div {
diff --git a/src/views/Admin/AdminProfile.vue b/src/views/Admin/AdminProfile.vue
index daceb6aac..fb930b4c5 100644
--- a/src/views/Admin/AdminProfile.vue
+++ b/src/views/Admin/AdminProfile.vue
@@ -34,7 +34,7 @@
                   <tr
                     v-for="{ key, value, link } in metadata"
                     :key="key"
-                    class="odd:bg-white dark:odd:bg-zinc-800 even:bg-gray-50 dark:even:bg-zinc-700 border-b"
+                    class="odd:bg-white dark:odd:bg-slate-800 even:bg-gray-50 dark:even:bg-slate-700 border-b"
                   >
                     <td class="py-4 px-2 whitespace-nowrap">
                       {{ key }}
diff --git a/src/views/Admin/InstanceView.vue b/src/views/Admin/InstanceView.vue
index 397517318..ea4c5e508 100644
--- a/src/views/Admin/InstanceView.vue
+++ b/src/views/Admin/InstanceView.vue
@@ -49,7 +49,7 @@
       <div
         class="grid md:grid-cols-2 xl:grid-cols-4 gap-2 content-center text-center mt-2"
       >
-        <div class="bg-zinc-50 dark:bg-mbz-purple-500 rounded-xl p-8">
+        <div class="bg-slate-50 dark:bg-mbz-purple-500 rounded-xl p-8">
           <router-link
             :to="{
               name: RouteName.PROFILES,
@@ -75,19 +75,19 @@
             <span class="text-sm block">{{ t("Groups") }}</span>
           </router-link>
         </div>
-        <div class="bg-zinc-50 dark:bg-mbz-purple-500 rounded-xl p-8">
+        <div class="bg-slate-50 dark:bg-mbz-purple-500 rounded-xl p-8">
           <span class="mb-4 text-xl font-semibold block">{{
             instance.followingsCount
           }}</span>
           <span class="text-sm block">{{ t("Followings") }}</span>
         </div>
-        <div class="bg-zinc-50 dark:bg-mbz-purple-500 rounded-xl p-8">
+        <div class="bg-slate-50 dark:bg-mbz-purple-500 rounded-xl p-8">
           <span class="mb-4 text-xl font-semibold block">{{
             instance.followersCount
           }}</span>
           <span class="text-sm block">{{ t("Followers") }}</span>
         </div>
-        <div class="bg-zinc-50 dark:bg-mbz-purple-500 rounded-xl p-8">
+        <div class="bg-slate-50 dark:bg-mbz-purple-500 rounded-xl p-8">
           <router-link
             :to="{
               name: RouteName.REPORTS,
@@ -100,7 +100,7 @@
             <span class="text-sm block">{{ t("Reports") }}</span>
           </router-link>
         </div>
-        <div class="bg-zinc-50 dark:bg-mbz-purple-500 rounded-xl p-8">
+        <div class="bg-slate-50 dark:bg-mbz-purple-500 rounded-xl p-8">
           <span class="mb-4 font-semibold block">{{
             formatBytes(instance.mediaSize)
           }}</span>
diff --git a/src/views/CategoriesView.vue b/src/views/CategoriesView.vue
index 3cfaae82f..fff67ec92 100644
--- a/src/views/CategoriesView.vue
+++ b/src/views/CategoriesView.vue
@@ -38,7 +38,7 @@
               {{ t("Category illustrations credits") }}
             </o-button>
           </template>
-          <div class="flex flex-col dark:text-zinc-300 gap-2 py-4 px-1">
+          <div class="flex flex-col dark:text-slate-300 gap-2 py-4 px-1">
             <p
               v-for="(categoryLicence, key) in categoriesPicturesLicences"
               :key="key"
diff --git a/src/views/Event/EventView.vue b/src/views/Event/EventView.vue
index 643d1297a..f3cd3f8dc 100755
--- a/src/views/Event/EventView.vue
+++ b/src/views/Event/EventView.vue
@@ -4,7 +4,7 @@
     <div class="flex flex-col mb-3">
       <event-banner :picture="event?.picture" />
       <div
-        class="flex flex-col relative pb-2 bg-white dark:bg-zinc-700 my-4 rounded"
+        class="flex flex-col relative pb-2 bg-white dark:bg-slate-700 my-4 rounded"
       >
         <div class="date-calendar-icon-wrapper relative" v-if="event?.beginsOn">
           <skeleton-date-calendar-icon
@@ -171,12 +171,12 @@
         class="rounded-lg dark:border-violet-title flex flex-wrap flex-col md:flex-row-reverse gap-4"
       >
         <aside
-          class="rounded bg-white dark:bg-zinc-700 shadow-md h-min max-w-screen-sm"
+          class="rounded bg-white dark:bg-slate-700 shadow-md h-min max-w-screen-sm"
         >
           <div class="sticky p-4">
             <aside
               v-if="eventLoading"
-              class="animate-pulse rounded bg-white dark:bg-zinc-700 h-min max-w-screen-sm"
+              class="animate-pulse rounded bg-white dark:bg-slate-700 h-min max-w-screen-sm"
             >
               <div class="mb-6 p-2" v-for="i in 3" :key="i">
                 <div class="mb-2 h-6 bg-slate-200 w-64" />
@@ -199,7 +199,7 @@
         </aside>
         <div class="flex-1">
           <section
-            class="event-description bg-white dark:bg-zinc-700 px-3 pt-1 pb-3 rounded mb-4"
+            class="event-description bg-white dark:bg-slate-700 px-3 pt-1 pb-3 rounded mb-4"
           >
             <h2 class="text-2xl">{{ t("About this event") }}</h2>
             <div
@@ -237,7 +237,7 @@
             />
           </section>
           <section
-            class="bg-white dark:bg-zinc-700 px-3 pt-1 pb-3 rounded my-4"
+            class="bg-white dark:bg-slate-700 px-3 pt-1 pb-3 rounded my-4"
             ref="commentsObserver"
           >
             <a href="#comments">
@@ -249,7 +249,7 @@
       </div>
 
       <section
-        class="bg-white dark:bg-zinc-700 px-3 pt-1 pb-3 rounded my-4"
+        class="bg-white dark:bg-slate-700 px-3 pt-1 pb-3 rounded my-4"
         v-if="(event?.relatedEvents ?? []).length > 0"
       >
         <h2 class="text-2xl mb-2">
@@ -631,6 +631,6 @@ useHead({
 }
 
 .event-description .mention.h-card {
-  @apply inline-block border border-zinc-600 dark:border-zinc-300 rounded py-0.5 px-1;
+  @apply inline-block border border-slate-600 dark:border-slate-300 rounded py-0.5 px-1;
 }
 </style>
diff --git a/src/views/Event/MyEventsView.vue b/src/views/Event/MyEventsView.vue
index c38d743ca..c0c26d303 100644
--- a/src/views/Event/MyEventsView.vue
+++ b/src/views/Event/MyEventsView.vue
@@ -21,7 +21,7 @@
     <!-- <o-loading v-model:active="$apollo.loading"></o-loading> -->
     <div class="flex flex-wrap gap-4 items-start">
       <div
-        class="rounded p-3 flex-auto md:flex-none bg-zinc-300 dark:bg-zinc-700"
+        class="rounded p-3 flex-auto md:flex-none bg-slate-300 dark:bg-slate-700"
       >
         <o-field>
           <o-switch v-model="showUpcoming">{{
diff --git a/src/views/Moderation/LogsView.vue b/src/views/Moderation/LogsView.vue
index e98326544..a9c5f155c 100644
--- a/src/views/Moderation/LogsView.vue
+++ b/src/views/Moderation/LogsView.vue
@@ -17,7 +17,7 @@
         <li
           v-for="log in actionLogs.elements"
           :key="log.id"
-          class="bg-mbz-yellow-alt-50 hover:bg-mbz-yellow-alt-100 dark:bg-zinc-700 hover:dark:bg-zinc-600 rounded p-2 my-1"
+          class="bg-mbz-yellow-alt-50 hover:bg-mbz-yellow-alt-100 dark:bg-slate-700 hover:dark:bg-slate-600 rounded p-2 my-1"
         >
           <div class="flex gap-1">
             <div class="flex gap-1">
diff --git a/src/views/Moderation/ReportView.vue b/src/views/Moderation/ReportView.vue
index f77578e2d..113bf3f56 100644
--- a/src/views/Moderation/ReportView.vue
+++ b/src/views/Moderation/ReportView.vue
@@ -194,7 +194,7 @@
       </table>
     </section>
 
-    <section class="bg-white dark:bg-zinc-700 rounded px-2 pt-1 pb-2 my-3">
+    <section class="bg-white dark:bg-slate-700 rounded px-2 pt-1 pb-2 my-3">
       <h2 class="mb-1">{{ t("Report reason") }}</h2>
       <div class="">
         <div class="flex gap-1">
@@ -224,7 +224,7 @@
     </section>
 
     <section
-      class="bg-white dark:bg-zinc-700 rounded px-2 pt-1 pb-2 my-3"
+      class="bg-white dark:bg-slate-700 rounded px-2 pt-1 pb-2 my-3"
       v-if="
         report.events &&
         report.events?.length > 0 &&
@@ -249,7 +249,7 @@
     </section>
 
     <section
-      class="bg-white dark:bg-zinc-700 rounded px-2 pt-1 pb-2 my-3"
+      class="bg-white dark:bg-slate-700 rounded px-2 pt-1 pb-2 my-3"
       v-if="report.comments.length > 0"
     >
       <h2 class="mb-1">{{ t("Reported content") }}</h2>
@@ -329,7 +329,7 @@
     </section>
 
     <section
-      class="bg-white dark:bg-zinc-700 rounded px-2 pt-1 pb-2 my-3"
+      class="bg-white dark:bg-slate-700 rounded px-2 pt-1 pb-2 my-3"
       v-if="
         report.events &&
         report.events?.length === 0 &&
@@ -344,7 +344,7 @@
       </EmptyContent>
     </section>
 
-    <section class="bg-white dark:bg-zinc-700 rounded px-2 pt-1 pb-2 my-3">
+    <section class="bg-white dark:bg-slate-700 rounded px-2 pt-1 pb-2 my-3">
       <h2 class="mb-1">{{ t("Notes") }}</h2>
       <div
         class=""
diff --git a/src/views/OAuth/DeviceActivationView.vue b/src/views/OAuth/DeviceActivationView.vue
index 95fe78d9f..1d3c382cb 100644
--- a/src/views/OAuth/DeviceActivationView.vue
+++ b/src/views/OAuth/DeviceActivationView.vue
@@ -3,7 +3,7 @@
     <form
       @submit.prevent="() => validateCode({ userCode: code })"
       @paste="pasteCode"
-      class="rounded-lg bg-white dark:bg-zinc-900 shadow-xl my-6 p-4"
+      class="rounded-lg bg-white dark:bg-slate-900 shadow-xl my-6 p-4"
       v-if="!application"
     >
       <h1 class="text-3xl text-center">
diff --git a/src/views/Posts/PostView.vue b/src/views/Posts/PostView.vue
index 1853a04e1..6bb9a57eb 100644
--- a/src/views/Posts/PostView.vue
+++ b/src/views/Posts/PostView.vue
@@ -204,7 +204,7 @@
     <section
       v-html="post.body"
       dir="auto"
-      class="px-2 md:px-4 py-4 prose lg:prose-xl prose-p:mt-6 dark:prose-invert bg-white dark:bg-zinc-700 mx-auto"
+      class="px-2 md:px-4 py-4 prose lg:prose-xl prose-p:mt-6 dark:prose-invert bg-white dark:bg-slate-700 mx-auto"
       :lang="post.language"
     />
     <section class="flex gap-2 my-6 justify-center" dir="auto">
diff --git a/src/views/Settings/PreferencesView.vue b/src/views/Settings/PreferencesView.vue
index 3ef0a7beb..6c7b6e5cb 100644
--- a/src/views/Settings/PreferencesView.vue
+++ b/src/views/Settings/PreferencesView.vue
@@ -24,7 +24,7 @@
             <legend class="sr-only">{{ t("Theme") }}</legend>
             <o-radio
               :class="{ 'border-mbz-bluegreen': theme === 'light' }"
-              class="p-4 bg-white text-zinc-800 rounded-md mt-2 mr-2 border-2"
+              class="p-4 bg-white text-slate-800 rounded-md mt-2 mr-2 border-2"
               :disabled="systemTheme"
               v-model="theme"
               name="theme"
@@ -33,7 +33,7 @@
             >
             <o-radio
               :class="{ 'border-mbz-bluegreen': theme === 'dark' }"
-              class="p-4 bg-zinc-800 rounded-md text-white mt-2 ml-2 border-2"
+              class="p-4 bg-slate-800 rounded-md text-white mt-2 ml-2 border-2"
               :disabled="systemTheme"
               v-model="theme"
               name="theme"
diff --git a/tests/unit/specs/components/__snapshots__/navbar.spec.ts.snap b/tests/unit/specs/components/__snapshots__/navbar.spec.ts.snap
index cf310114d..d7d840979 100644
--- a/tests/unit/specs/components/__snapshots__/navbar.spec.ts.snap
+++ b/tests/unit/specs/components/__snapshots__/navbar.spec.ts.snap
@@ -1,12 +1,12 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`App component > renders a Vue component 1`] = `
-"<nav class=\\"bg-white border-gray-200 px-2 sm:px-4 py-2.5 dark:bg-zinc-900\\" id=\\"navbar\\">
+"<nav class=\\"bg-white border-gray-200 px-2 sm:px-4 py-2.5 dark:bg-slate-900\\" id=\\"navbar\\">
   <div class=\\"container mx-auto flex flex-wrap items-center mx-auto gap-2 sm:gap-4\\">
     <router-link to=\\"[object Object]\\" class=\\"flex items-center flex-1\\">
       <mobilizon-logo-stub invert=\\"false\\" class=\\"w-40\\"></mobilizon-logo-stub>
     </router-link>
-    <!--v-if--><button type=\\"button\\" class=\\"inline-flex items-center p-2 ml-1 text-sm text-zinc-500 rounded-lg md:hidden hover:bg-zinc-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-zinc-400 dark:hover:bg-zinc-700 dark:focus:ring-gray-600\\" aria-controls=\\"mobile-menu-2\\" aria-expanded=\\"false\\"><span class=\\"sr-only\\">Open main menu</span><svg class=\\"w-6 h-6\\" aria-hidden=\\"true\\" fill=\\"currentColor\\" viewBox=\\"0 0 20 20\\" xmlns=\\"http://www.w3.org/2000/svg\\">
+    <!--v-if--><button type=\\"button\\" class=\\"inline-flex items-center p-2 ml-1 text-sm text-slate-500 rounded-lg md:hidden hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-slate-400 dark:hover:bg-slate-700 dark:focus:ring-gray-600\\" aria-controls=\\"mobile-menu-2\\" aria-expanded=\\"false\\"><span class=\\"sr-only\\">Open main menu</span><svg class=\\"w-6 h-6\\" aria-hidden=\\"true\\" fill=\\"currentColor\\" viewBox=\\"0 0 20 20\\" xmlns=\\"http://www.w3.org/2000/svg\\">
         <path fill-rule=\\"evenodd\\" d=\\"M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z\\" clip-rule=\\"evenodd\\"></path>
       </svg></button>
     <div class=\\"justify-between items-center w-full md:flex md:w-auto md:order-1 hidden\\" id=\\"mobile-menu-2\\">
@@ -14,7 +14,7 @@ exports[`App component > renders a Vue component 1`] = `
         <!--v-if-->
         <!--v-if-->
         <li>
-          <router-link to=\\"[object Object]\\" class=\\"block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700\\">Login</router-link>
+          <router-link to=\\"[object Object]\\" class=\\"block py-2 pr-4 pl-3 text-slate-700 border-b border-gray-100 hover:bg-slate-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-slate-400 md:dark:hover:text-white dark:hover:bg-slate-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700\\">Login</router-link>
         </li>
         <!--v-if-->
       </ul>