feat: dark mode ✨

components/DescribedHeader.vue

@@ -7,6 +7,6 @@
 <template>
   <div class="flex flex-col gap-2 items-center text-center">
     <h1 class="font-semibold font-serif text-3xl">{{ title }}</h1>
-    <p class="text-gray-600"><slot /></p>
+    <p class="text-gray-600 dark:text-gray-400"><slot /></p>
   </div>
 </template>

components/game/ChoosingTopic.vue

@@ -44,7 +44,10 @@
   <div class="flex flex-col gap-6">
     <div class="flex flex-col gap-3 text-center">
       <h1 class="text-3xl font-semibold font-serif">{{ topic.title }}</h1>
-      <p class="font-serif text-gray-600" v-html="topic.summary" />
+      <p
+        class="font-serif text-gray-600 dark:text-gray-400"
+        v-html="topic.summary"
+      />
     </div>
     <UButton
       block

components/game/Leaderboard.vue

@@ -11,11 +11,13 @@
 </script>
 
 <template>
-  <div class="flex flex-col border rounded-md bg-gray-50 w-full text-sm">
+  <div
+    class="flex flex-col border rounded-md bg-gray-50 dark:bg-gray-800 dark:border-gray-700 w-full text-sm"
+  >
     <div
       v-for="player in players"
       :key="player.id"
-      class="flex items-center justify-between border-b last:border-b-0 py-2 px-3"
+      class="flex items-center justify-between border-b last:border-b-0 dark:border-gray-700 py-2 px-3"
     >
       <span>
         {{ player.name }}

components/game/Lobby.vue

@@ -36,18 +36,21 @@
       <div
         v-for="playerId in players.allIds"
         :key="playerId"
-        class="w-full rounded-md p-2 border text-sm"
+        class="w-full rounded-md p-2 border dark:border-gray-700 text-sm"
       >
         {{ players.byId[playerId].name }}
       </div>
     </div>
     <p
       v-if="players.allIds.length < 3"
-      class="text-center text-gray-600 text-sm"
+      class="text-center text-gray-600 dark:text-gray-400 text-sm"
     >
       {{ $t("game.lobby.statusText.waitingForMorePlayers") }}
     </p>
-    <p v-else-if="hostId !== userId" class="text-center text-gray-600 text-sm">
+    <p
+      v-else-if="hostId !== userId"
+      class="text-center text-gray-600 dark:text-gray-400 text-sm"
+    >
       {{ $t("game.lobby.statusText.waitingForHostToStart") }}
     </p>
     <UButton

layouts/default.vue

@@ -41,7 +41,9 @@
         class="min-h-[100dvh] relative overflow-y-auto overflow-x-hidden p-8 flex justify-center"
       >
         <slot />
-        <footer class="text-xs text-gray-600 absolute bottom-2">
+        <footer
+          class="text-xs text-gray-600 dark:text-gray-400 absolute bottom-2"
+        >
           <i18n-t keypath="layout.footer" scope="global">
             <template #author>
               <a href="https://vlkstudio.com" class="underline">VLK Studio</a>

nuxt.config.ts

@@ -10,9 +10,6 @@ export default defineNuxtConfig({
     "@nuxt/content",
     "nuxt-simple-sitemap",
   ],
-  colorMode: {
-    preference: "light",
-  },
   ui: {
     icons: ["tabler"],
   },

pages/index.vue

@@ -16,7 +16,7 @@
   <div class="flex flex-col gap-8 max-w-xs self-center">
     <header class="flex flex-col gap-4 items-center">
       <h1 class="font-serif text-4xl font-semibold">{{ siteName }}</h1>
-      <p class="text-center text-gray-600">
+      <p class="text-center text-gray-600 dark:text-gray-400">
         {{ $t("home.header.description") }}
       </p>
     </header>
@@ -53,7 +53,7 @@
           {{ $t("home.joinRoomCta") }}
         </UButton>
       </form>
-      <p class="w-full text-xs text-gray-500 text-center">
+      <p class="w-full text-xs text-gray-500 dark:text-gray-400 text-center">
         {{ $t("home.rules.hint") }}
         <NuxtLink :to="localePath('/rules')" class="font-semibold underline">
           {{ $t("home.rules.link") }}

pages/rules.vue

@@ -16,6 +16,6 @@
     >
       {{ $t("rules.homeLink") }}
     </UButton>
-    <ContentDoc class="prose font-serif" />
+    <ContentDoc class="prose font-serif dark:prose-invert" />
   </div>
 </template>