feat: add dark mode toggle with system preference detection

components/Banner.vue

@@ -1,7 +1,7 @@
 <template>
   <header
-    class="w-full py-4 px-6 border-b border-ink-200 transition-background duration-1000"
-    :class="[`${bannerActive ? 'bg-robin' : 'bg-ink-300'}`]"
+    class="w-full py-4 px-6 border-b border-vanilla-300 dark:border-ink-200 transition-all duration-1000"
+    :class="[`${bannerActive ? 'bg-robin' : 'bg-vanilla-200 dark:bg-ink-300'}`]"
   >
     <span class="flex items-center justify-center flex-wrap text-sm font-medium">
       <span class="md:flex items-center">

components/Navbar.vue

@@ -1,13 +1,15 @@
 <template>
-  <header class="w-full py-4 border-b border-ink-200 bg-ink-400">
-    <nav class="flex items-center justify-center flex-wrap">
+  <header class="w-full py-4 border-b border-vanilla-300 dark:border-ink-200 bg-vanilla-100 dark:bg-ink-400 transition-colors duration-200">
+    <nav class="flex items-center justify-center flex-wrap px-4">
       <NuxtLink to="/" class="flex items-center text-gray-700 font-bold">
-        <img src="~/assets/gfi-logo-white.svg" alt="Good First Issue" class="h-12" />
+        <img src="~/assets/gfi-logo-white.svg" alt="Good First Issue" class="h-12 dark:brightness-100 brightness-0" />
       </NuxtLink>
       <span v-if="activeTag" class="text-2xl cursor-pointer">
         <span class="font-normal ml-2 mr-1 text-slate">/</span>
         <span class="font-semibold text-juniper">{{ activeTag.language }}</span>
       </span>
+      <span class="flex-1"></span>
+      <ThemeToggle />
     </nav>
   </header>
 </template>

components/RepoBox.vue

@@ -2,10 +2,10 @@
   <div
     :id="`repo-${repo.id}`"
     :class="{
-      'border-juniper hover:bg-ink-400': isCardOpen,
-      'border-ink-200': !isCardOpen
+      'border-juniper hover:bg-vanilla-100 dark:hover:bg-ink-400': isCardOpen,
+      'border-vanilla-300 dark:border-ink-200': !isCardOpen
     }"
-    class="select-none border w-full rounded-md mb-4 cursor-pointer hover:bg-ink-300 group"
+    class="select-none border w-full rounded-md mb-4 cursor-pointer hover:bg-vanilla-200 dark:hover:bg-ink-300 group transition-colors duration-200"
     @click="toggle(repo.id)"
   >
     <div class="px-5 py-3">
@@ -24,7 +24,7 @@
           class="hidden md:inline text-sm border px-3 py-1 ml-2 rounded-full font-semibold"
           :class="{
             'text-ink-400 bg-juniper border-transparent': isCardOpen,
-            'text-vanilla-200': !isCardOpen
+            'text-ink-200 dark:text-vanilla-200': !isCardOpen
           }"
           >{{ issuesDisplay }}</span
         >
@@ -34,7 +34,7 @@
       </div>
       <div
         class="flex-row flex text-sm py-1 font-mono"
-        :class="{ 'text-honey': isCardOpen, 'text-vanilla-400': !isCardOpen }"
+        :class="{ 'text-honey': isCardOpen, 'text-slate dark:text-vanilla-400': !isCardOpen }"
       >
         <div class="mr-4"><span class="text-vanilla-400">lang: </span>{{ repo.language }}</div>
         <div class="mr-4"><span class="text-vanilla-400">stars: </span>{{ repo.stars_display }}</div>
@@ -43,7 +43,7 @@
         </div>
       </div>
     </div>
-    <ol v-if="isCardOpen" class="px-5 py-3 text-base leading-loose border-t border-ink-200">
+    <ol v-if="isCardOpen" class="px-5 py-3 text-base leading-loose border-t border-vanilla-300 dark:border-ink-200">
       <li v-for="issue in repo.issues" :key="issue.url" class="flex flex-row items-start justify-start py-1">
         <span class="text-slate text-right px-2 leading-snug font-mono" style="min-width: 70px">#{{ issue.number }}</span>
         <div class="flex items-start flex-row flex-auto">
@@ -52,7 +52,7 @@
             :href="issue.url"
             target="_blank"
             rel="noopener noreferrer"
-            class="leading-snug font-medium hover:text-juniper text-vanilla-300 block flex-auto"
+            class="leading-snug font-medium hover:text-juniper text-ink-200 dark:text-vanilla-300 block flex-auto"
             >{{ issue.title }}</a
           >
           <div

components/Sidebar.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="masthead font-sans pt-6 border-r border-ink-200 px-6 text-vanilla-300 flex-none w-full md:max-w-sm">
+  <section class="masthead font-sans pt-6 border-r border-vanilla-300 dark:border-ink-200 px-6 text-ink-300 dark:text-vanilla-300 flex-none w-full md:max-w-sm transition-colors duration-200">
     <div>
       <h3 class="section-heading">About</h3>
       <p class="text-sm">
@@ -16,9 +16,9 @@
           :to="'/language/' + tag.slug"
           :class="{
             'active-pill': $route.params.slug === tag.slug,
-            'border-slate hover:text-juniper hover:border-juniper': $route.params.slug !== tag.slug
+            'border-vanilla-400 dark:border-slate hover:text-juniper hover:border-juniper': $route.params.slug !== tag.slug
           }"
-          class="group mx-1 border px-2 py-1 inline-block rounded-sm my-1 text-sm"
+          class="group mx-1 border px-2 py-1 inline-block rounded-sm my-1 text-sm transition-colors duration-200"
           >{{ tag.language }}
           <span
             :class="{

components/SubscriptionForm.vue

@@ -2,7 +2,7 @@
   <form method="post" action="https://listmonk.deepsource.io/subscription/form" class="listmonk-form">
     <div class="flex flex-row space-x-2 w-full">
       <input
-        class="bg-ink-300 text-vanilla-100 flex flex-grow h-10 text-sm py-2 px-3 rounded-sm w-full outline-none"
+        class="bg-vanilla-200 dark:bg-ink-300 text-ink-300 dark:text-vanilla-100 flex flex-grow h-10 text-sm py-2 px-3 rounded-sm w-full outline-none transition-colors duration-200"
         type="text"
         name="email"
         placeholder="Enter your email"
@@ -15,7 +15,7 @@
         <label for="4c2a7">Community newsletter</label>
       </div>
       <!-- prettier-ignore -->
-      <input class="bg-ink-300 hover:bg-ink-200 text-vanilla-100 rounded-md font-semibold text-center h-10 px-4 py-2 text-sm space-x-2 leading-8 cursor-pointer" type="submit" value="Subscribe" />
+      <input class="bg-vanilla-200 dark:bg-ink-300 hover:bg-vanilla-300 dark:hover:bg-ink-200 text-ink-300 dark:text-vanilla-100 rounded-md font-semibold text-center h-10 px-4 py-2 text-sm space-x-2 leading-8 cursor-pointer transition-colors duration-200" type="submit" value="Subscribe" />
     </div>
   </form>
 </template>

components/ThemeToggle.vue

@@ -0,0 +1,22 @@
+<template>
+  <button
+    @click="toggleTheme"
+    class="p-2 rounded-md transition-colors duration-200 hover:bg-ink-200 dark:hover:bg-ink-200"
+    :title="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
+  >
+    <SunIcon v-if="isDark" class="w-5 h-5 text-vanilla-300" />
+    <MoonIcon v-else class="w-5 h-5 text-ink-300" />
+  </button>
+</template>
+
+<script setup>
+import { SunIcon, MoonIcon } from '@heroicons/vue/24/outline'
+
+const colorMode = useColorMode()
+
+const isDark = computed(() => colorMode.value === 'dark')
+
+function toggleTheme() {
+  colorMode.preference = isDark.value ? 'light' : 'dark'
+}
+</script>

layouts/default.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-ink-400 flex flex-col min-h-screen antialiased text-vanilla-300">
+  <div class="bg-vanilla-100 dark:bg-ink-400 flex flex-col min-h-screen antialiased text-ink-300 dark:text-vanilla-300 transition-colors duration-200">
     <Navbar />
     <main class="flex flex-1">
       <section class="container max-w-6xl mx-auto flex flex-col md:flex-row">

nuxt.config.ts

@@ -1,7 +1,17 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
-  modules: ['@nuxtjs/tailwindcss', 'nuxt-gtag', 'nuxt-simple-sitemap'],
+  modules: [
+    '@nuxtjs/tailwindcss',
+    '@nuxtjs/color-mode',
+    'nuxt-gtag',
+    'nuxt-simple-sitemap'
+  ],
+  colorMode: {
+    classSuffix: '',
+    preference: 'system',
+    fallback: 'dark'
+  },
   nitro: {
     prerender: {
       crawlLinks: true

package.json

@@ -20,6 +20,7 @@
   },
   "dependencies": {
     "@heroicons/vue": "^2.0.18",
+    "@nuxtjs/color-mode": "^4.0.0",
     "@vercel/blob": "^0.16.1",
     "dayjs": "^1.11.10"
   }

tailwind.config.js

@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
+  darkMode: 'class',
   content: [],
   theme: {
     extend: {