diff --git a/components/Header.vue b/components/Header.vue
index d6072cf8..8b24ccf6 100644
--- a/components/Header.vue
+++ b/components/Header.vue
@@ -6,12 +6,12 @@ const route = useRoute();
 
 <template>
   <nav class="container mx-auto py-5">
-    <div class="flex items-center text-gray-200">
+    <div class="flex items-center text-gray-700 dark:text-gray-200">
       <div class="flex-1" />
       <div class="flex items-center space-x-2">
         <HeadlessMenu as="div" class="relative z-50 inline-block text-left">
           <div>
-            <HeadlessMenuButton class="text-white hover:text-orange-500">
+            <HeadlessMenuButton class="text-gray-700 dark:text-white hover:text-orange-500">
               <div class="text-2xl">&bull;&bull;&bull;</div>
             </HeadlessMenuButton>
           </div>
@@ -25,14 +25,14 @@ const route = useRoute();
             leave-to-class="transform scale-95 opacity-0"
           >
             <HeadlessMenuItems
-              class="absolute right-0 mt-2 w-36 origin-top-right divide-y divide-gray-100 rounded-md bg-black/80 text-white shadow-lg ring-1 ring-black ring-opacity-5 backdrop-blur-sm focus:outline-none"
+              class="absolute right-0 mt-2 w-36 origin-top-right divide-y divide-gray-100 dark:divide-gray-100 rounded-md bg-white/90 dark:bg-black/80 text-gray-900 dark:text-white shadow-lg ring-1 ring-black ring-opacity-5 backdrop-blur-sm focus:outline-none"
             >
               <div class="px-1 py-1">
                 <HeadlessMenuItem v-slot="{ active }">
                   <NuxtLink to="/">
                     <button
                       :class="[
-                        active ? 'bg-orange-500/50 text-white' : 'text-white',
+                        active ? 'bg-orange-500/50 text-white dark:text-white' : 'text-gray-700 dark:text-white',
                         $route.path === '/' ? 'bg-orange-500' : '',
                         'group flex w-full items-center rounded-md px-2 py-2 text-sm',
                       ]"
@@ -84,7 +84,7 @@ const route = useRoute();
                   <a href="/articles">
                     <button
                       :class="[
-                        active ? 'bg-orange-500/50 text-white' : 'text-white',
+                        active ? 'bg-orange-500/50 text-white dark:text-white' : 'text-gray-700 dark:text-white',
                         $route.path === '/articles' ? 'bg-orange-500' : '',
                         'group flex w-full items-center rounded-md px-2 py-2 text-sm',
                       ]"
@@ -112,7 +112,7 @@ const route = useRoute();
                   <a href="/playground">
                     <button
                       :class="[
-                        active ? 'bg-orange-500/50 text-white' : 'text-white',
+                        active ? 'bg-orange-500/50 text-white dark:text-white' : 'text-gray-700 dark:text-white',
                         $route.path === '/playground' ? 'bg-orange-500' : '',
                         'group flex w-full items-center rounded-md px-2 py-2 text-sm',
                       ]"
@@ -140,7 +140,7 @@ const route = useRoute();
                   <a href="/talks">
                     <button
                       :class="[
-                        active ? 'bg-orange-500/50' : '',
+                        active ? 'bg-orange-500/50 text-white dark:text-white' : 'text-gray-700 dark:text-white',
                         $route.path === '/talks' ? 'bg-orange-500' : '',
                         'group flex w-full items-center rounded-md px-2 py-2 text-sm',
                       ]"
@@ -166,7 +166,7 @@ const route = useRoute();
                   <a href="https://github.com/cmpadden">
                     <button
                       :class="[
-                        active ? 'bg-orange-500/50 text-white' : 'text-white',
+                        active ? 'bg-orange-500/50 text-white dark:text-white' : 'text-gray-700 dark:text-white',
                         'group flex w-full items-center rounded-md px-2 py-2 text-sm',
                       ]"
                     >
@@ -189,7 +189,7 @@ const route = useRoute();
                   <a href="https://bsky.app/profile/colton.boo">
                     <button
                       :class="[
-                        active ? 'bg-orange-500/50 text-white' : 'text-white',
+                        active ? 'bg-orange-500/50 text-white dark:text-white' : 'text-gray-700 dark:text-white',
                         'group flex w-full items-center rounded-md px-2 py-2 text-sm',
                       ]"
                     >
@@ -208,6 +208,57 @@ const route = useRoute();
                   </a>
                 </HeadlessMenuItem>
               </div>
+              
+              <!-- Divider -->
+              <div class="border-t border-gray-300 dark:border-gray-600"></div>
+              
+              <!-- Theme Toggle Section -->
+              <div class="px-1 py-1">
+                <HeadlessMenuItem v-slot="{ active }">
+                  <button
+                    @click="$colorMode.preference = $colorMode.value === 'dark' ? 'light' : 'dark'"
+                    :class="[
+                      active ? 'bg-orange-500/50 text-white dark:text-white' : 'text-gray-700 dark:text-white',
+                      'group flex w-full items-center rounded-md px-2 py-2 text-sm',
+                    ]"
+                  >
+                    <!-- Sun icon for when we're in dark mode (clicking switches to light) -->
+                    <svg
+                      v-if="$colorMode.value === 'dark'"
+                      class="mr-2 inline h-5 w-5"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
+                      />
+                    </svg>
+                    
+                    <!-- Moon icon for when we're in light mode (clicking switches to dark) -->
+                    <svg
+                      v-else
+                      class="mr-2 inline h-5 w-5"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
+                      />
+                    </svg>
+                    <span class="translate-y-0.5">{{ $colorMode.value === 'dark' ? 'Light Mode' : 'Dark Mode' }}</span>
+                  </button>
+                </HeadlessMenuItem>
+              </div>
             </HeadlessMenuItems>
           </transition>
         </HeadlessMenu>
diff --git a/components/MoreLink.vue b/components/MoreLink.vue
index 79a10ac0..ddaba751 100644
--- a/components/MoreLink.vue
+++ b/components/MoreLink.vue
@@ -13,7 +13,7 @@ const props = defineProps({
   <div class="flex justify-end">
     <NuxtLink
       :to="props.to"
-      class="flex items-center text-sm font-bold text-white hover:text-orange-500"
+      class="flex items-center text-sm font-bold text-gray-700 dark:text-white hover:text-orange-500"
     >
       <span class="translate-y-0.5">See More</span>
       <CursorArrowRaysIcon class="ml-1 h-5 w-5" aria-hidden="true" />
diff --git a/components/ThemeToggle.vue b/components/ThemeToggle.vue
new file mode 100644
index 00000000..750340f7
--- /dev/null
+++ b/components/ThemeToggle.vue
@@ -0,0 +1,49 @@
+<template>
+  <button
+    @click="toggleTheme"
+    class="flex items-center justify-center w-8 h-8 rounded-md transition-colors duration-200 hover:bg-orange-500/20 bg-gray-100/10 dark:bg-gray-800/20"
+    :title="$colorMode.value === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'"
+  >
+    <!-- Sun icon for light mode -->
+    <svg
+      v-if="$colorMode.value === 'dark'"
+      class="w-5 h-5 text-yellow-500 dark:text-yellow-400"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
+      />
+    </svg>
+    
+    <!-- Moon icon for dark mode -->
+    <svg
+      v-else
+      class="w-5 h-5 text-gray-700 dark:text-gray-300"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
+      />
+    </svg>
+  </button>
+</template>
+
+<script setup>
+const { $colorMode } = useNuxtApp()
+
+const toggleTheme = () => {
+  $colorMode.preference = $colorMode.value === 'dark' ? 'light' : 'dark'
+}
+</script>
\ No newline at end of file
diff --git a/components/section/BlogPosts.vue b/components/section/BlogPosts.vue
index 67712818..b8d1521f 100644
--- a/components/section/BlogPosts.vue
+++ b/components/section/BlogPosts.vue
@@ -6,14 +6,14 @@ const props = defineProps({
 </script>
 
 <template>
-  <section class="bg-gradient-to-b from-background to-transparent py-2">
+  <section class="bg-gradient-to-b from-background dark:from-background-dark to-transparent py-2">
     <div class="container mx-auto space-y-4">
 
       <div class="mb-4 grid grid-cols-1 gap-4 md:grid-cols-2">
         <div v-for="(article, ix) of articles" :key="ix">
           <NuxtLink :to="article.path">
             <div
-              class="h-full space-y-4 rounded-lg bg-white/20 p-4 text-white drop-shadow-lg hover:ring-1 hover:ring-white"
+              class="h-full space-y-4 rounded-lg bg-white/80 dark:bg-white/20 p-4 text-gray-700 dark:text-white drop-shadow-lg hover:ring-1 hover:ring-gray-300 dark:hover:ring-white"
             >
               <div>
                 <div class="flex-1 text-lg font-bold md:text-xl">
@@ -22,13 +22,13 @@ const props = defineProps({
                 <NuxtTime
                   v-if="show_dates"
                   :datetime="article.date" 
-                  class="text-sm font-light text-gray-400"
+                  class="text-sm font-light text-gray-600 dark:text-gray-400"
                   year="numeric"
                   month="short"
                   day="2-digit"
                 />
               </div>
-              <div class="line-clamp-3 text-sm text-gray-300">
+              <div class="line-clamp-3 text-sm text-gray-700 dark:text-gray-300">
                 {{ article.description }}
               </div>
             </div>
diff --git a/components/section/Playground.vue b/components/section/Playground.vue
index 8317fe15..f3f31b9d 100644
--- a/components/section/Playground.vue
+++ b/components/section/Playground.vue
@@ -99,12 +99,12 @@ const filtered_links = computed(() => {
 </script>
 
 <template>
-  <section class="bg-gradient-to-b from-transparent to-background text-white">
-    <div class="container mx-auto space-y-4 py-8 text-white">
+  <section class="bg-gradient-to-b from-transparent to-background dark:to-background-dark text-gray-700 dark:text-white">
+    <div class="container mx-auto space-y-4 py-8 text-gray-700 dark:text-white">
 
       <div class="mb-4 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
         <nuxt-link
-          class="relative rounded-lg drop-shadow-lg hover:ring-1 hover:ring-white"
+          class="relative rounded-lg drop-shadow-lg hover:ring-1 hover:ring-gray-300 dark:hover:ring-white"
           v-for="link in filtered_links"
           :key="link.title"
           :to="link.link"
@@ -116,12 +116,12 @@ const filtered_links = computed(() => {
           <div
             class="absolute bottom-0 flex w-full items-center justify-center"
           >
-            <div class="min-h-24 w-full rounded-b-lg bg-gray-800/80 px-6 py-2">
-              <h3 class="text-xl font-bold text-white">
+            <div class="min-h-24 w-full rounded-b-lg bg-white/90 dark:bg-gray-800/80 px-6 py-2">
+              <h3 class="text-xl font-bold text-gray-700 dark:text-white">
                 {{ link.title }}
               </h3>
               <div
-                class="line-clamp-2 text-sm text-gray-300"
+                class="line-clamp-2 text-sm text-gray-700 dark:text-gray-300"
                 v-html="link.description"
               ></div>
             </div>
diff --git a/layouts/default.vue b/layouts/default.vue
index c6b94f81..fb88535e 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="bg-gradient-to-b from-orange-500 to-red-500">
         <div class="p-[10px]">
-            <main class="flex h-[calc(100vh-20px)] flex-col rounded-3xl bg-background font-display">
+            <main class="flex h-[calc(100vh-20px)] flex-col rounded-3xl bg-background dark:bg-background-dark font-display">
                 <Header />
                 <main class="flex-1 overflow-scroll no-scrollbar">
                     <slot />
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 9f9a597b..8ef41d8b 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,16 +1,28 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   components: true,
-  modules: ["@nuxt/content", "@nuxtjs/tailwindcss", "nuxt-headlessui"],
+  modules: ["@nuxt/content", "@nuxtjs/tailwindcss", "@nuxtjs/color-mode", "nuxt-headlessui"],
 
   app: {
     head: {
       bodyAttrs: {
-        class: 'bg-background'
+        class: 'bg-background dark:bg-background-dark'
       }
     }
   },
 
+  // Color mode configuration
+  colorMode: {
+    preference: 'system', // default value of $colorMode.preference
+    fallback: 'dark', // fallback value if not system preference found
+    hid: 'nuxt-color-mode-script',
+    globalName: '__NUXT_COLOR_MODE__',
+    componentName: 'ColorScheme',
+    classPrefix: '',
+    classSuffix: '',
+    storageKey: 'nuxt-color-mode'
+  },
+
   // Optionally change the default prefix.
   headlessui: {
     prefix: "Headless",
@@ -22,7 +34,10 @@ export default defineNuxtConfig({
         // Disable highlighting until interoperability with by the Tailwind Typography plugin is sorted
         // highlight: false
         highlight: {
-          theme: 'github-dark',
+          theme: {
+            light: 'github-light',
+            default: 'github-dark'
+          },
           preload: [
               'bash',
               'js',
diff --git a/package.json b/package.json
index a2ac76a5..315b11b1 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "webpack": "^5.99.9"
   },
   "dependencies": {
+    "@nuxtjs/color-mode": "^3.5.2",
     "chords.ts": "^0.1.0",
     "p5": "^1.11.7",
     "tailwindcss": "^3.4.17"
diff --git a/pages/articles/[...slug].vue b/pages/articles/[...slug].vue
index fe20f744..d142fa43 100644
--- a/pages/articles/[...slug].vue
+++ b/pages/articles/[...slug].vue
@@ -14,8 +14,8 @@ const { data: page } = await useAsyncData(route.path, () => {
 </script>
 
 <template>
-  <div class="container mx-auto text-white" v-if="page">
-    <article class="mb-10 space-y-6 shadow-lg">
+  <div class="container mx-auto text-gray-700 dark:text-white" v-if="page">
+    <article class="mb-10 space-y-6 shadow-sm dark:shadow-lg">
       <!-- title -->
       <div class="flex">
         <!-- https://content.nuxt.com/components/content-slot -->
@@ -34,10 +34,10 @@ const { data: page } = await useAsyncData(route.path, () => {
       <!-- Meta -->
       <div class="flex space-x-2">
         <div>
-          <div class="mb-2 text-xs uppercase text-gray-400">Category</div>
+          <div class="mb-2 text-xs uppercase text-gray-600 dark:text-gray-400">Category</div>
           <div class="flex flex-row space-x-2">
             <NuxtLink
-              class="mr-2 w-min rounded-md bg-background text-sm font-bold hover:cursor-pointer hover:text-orange-500"
+              class="mr-2 w-min rounded-md bg-background dark:bg-background-dark text-sm font-bold hover:cursor-pointer hover:text-orange-500"
               v-for="(category, ix) in page.categories"
               :key="ix"
               :to="`/articles?category=${category}`"
@@ -47,13 +47,13 @@ const { data: page } = await useAsyncData(route.path, () => {
           </div>
         </div>
 
-        <div class="border-r border-gray-400"></div>
+        <div class="border-r border-gray-400 dark:border-gray-400"></div>
 
         <div>
-          <div class="mb-2 text-xs uppercase text-gray-400">Tags</div>
+          <div class="mb-2 text-xs uppercase text-gray-600 dark:text-gray-400">Tags</div>
           <div class="flex flex-row md:space-x-2">
             <NuxtLink
-              class="mr-2 w-min rounded-md bg-background text-sm font-bold hover:cursor-pointer hover:text-orange-500"
+              class="mr-2 w-min rounded-md bg-background dark:bg-background-dark text-sm font-bold hover:cursor-pointer hover:text-orange-500"
               v-for="(tag, ix) in page.tags"
               :key="ix"
               :to="`/articles?tag=${tag}`"
@@ -69,7 +69,7 @@ const { data: page } = await useAsyncData(route.path, () => {
         - Use prose-pre:bg-white to work with @nuxt/content syntax highlighting, otherwise background-color defaults to `.prose:where(pre)`
       -->
       <article
-        class="prose max-w-none text-gray-300 prose-h2:mt-8 prose-a:font-bold prose-a:text-orange-400 prose-a:no-underline hover:prose-a:text-orange-500 prose-blockquote:text-gray-400 prose-code:text-white prose-pre:bg-black"
+        class="prose max-w-none text-gray-700 dark:text-gray-300 prose-h2:mt-8 prose-a:font-bold prose-a:text-orange-400 prose-a:no-underline hover:prose-a:text-orange-500 prose-blockquote:text-gray-600 dark:prose-blockquote:text-gray-400 prose-code:text-gray-900 dark:prose-code:text-white prose-pre:bg-gray-100 dark:prose-pre:bg-black"
       >
         <ContentRenderer v-if="page" :value="page" />
       </article>
diff --git a/pages/articles/index.vue b/pages/articles/index.vue
index fe96e61a..6b55a957 100644
--- a/pages/articles/index.vue
+++ b/pages/articles/index.vue
@@ -86,7 +86,7 @@ function toggleCategory(cat) {
 </script>
 
 <template>
-  <section class="container mx-auto font-mono text-white">
+  <section class="container mx-auto font-mono text-gray-700 dark:text-white">
     <div class="grid grid-cols-4 gap-4">
       <div class="col-span-4 lg:col-span-3">
         <div class="grid grid-cols-10 gap-y-4 lg:gap-y-6">
@@ -105,14 +105,14 @@ function toggleCategory(cat) {
                 }}</NuxtLink>
                 <ContentRenderer
                   :value="article.meta.excerpt"
-                  class="line-clamp-5 text-xs text-gray-400"
+                  class="line-clamp-5 text-xs text-gray-600 dark:text-gray-400"
                 />
               </div>
             </div>
           </template>
         </div>
       </div>
-      <div class="col-span-4 border-l border-gray-700 pl-4 lg:col-span-1">
+      <div class="col-span-4 border-l border-gray-300 dark:border-gray-700 pl-4 lg:col-span-1">
         <div class="my-2 space-y-2">
           <p class="text-xl font-bold">Categories</p>
           <div
@@ -121,7 +121,7 @@ function toggleCategory(cat) {
             :class="{
               'bg-orange-500 text-white': selectedCategories.includes(category),
             }"
-            class="cursor-pointer p-1 text-sm text-gray-400 hover:bg-orange-500 hover:text-white"
+            class="cursor-pointer p-1 text-sm text-gray-600 dark:text-gray-400 hover:bg-orange-500 hover:text-white"
             @click="toggleCategory(category)"
           >
             {{ category }}
@@ -136,7 +136,7 @@ function toggleCategory(cat) {
             :class="{
               'bg-orange-500 text-white': selectedTags.includes(tag),
             }"
-            class="cursor-pointer select-none p-1 text-sm text-gray-400 hover:bg-orange-500 hover:text-white"
+            class="cursor-pointer select-none p-1 text-sm text-gray-600 dark:text-gray-400 hover:bg-orange-500 hover:text-white"
             @click="toggleTag(tag)"
           >
             {{ tag }}
diff --git a/pages/index.vue b/pages/index.vue
index b1db5142..5ab0ea38 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -7,7 +7,7 @@ const data = await queryCollection("content")
 
 <template>
   <div>
-    <div class="bg-emerald-950 bg-[url('/images/noise.svg')]">
+    <div class="bg-orange-400 dark:bg-emerald-950 bg-[url('/images/noise.svg')]">
       <SectionBlogPosts :articles="data" :show_dates="true" />
       <SectionPlayground :limit="9" showImages linkToPlayground />
     </div>
diff --git a/pages/talks.vue b/pages/talks.vue
index 4136dfb2..4edb56eb 100644
--- a/pages/talks.vue
+++ b/pages/talks.vue
@@ -69,7 +69,7 @@ const talks = [
 </script>
 
 <template>
-  <div class="container mx-auto font-mono text-white">
+  <div class="container mx-auto font-mono text-gray-700 dark:text-white">
     <h1 class="my-6 text-2xl font-extrabold">Talks</h1>
     <div class="grid grid-cols-10 gap-y-6">
       <template v-for="(talk, ix) in talks" :key="ix">
@@ -92,21 +92,21 @@ const talks = [
             <div class="flex">
               <a
                 v-if="talk.href_slides"
-                class="text-xs uppercase text-gray-400 hover:cursor-pointer hover:text-orange-500"
+                class="text-xs uppercase text-gray-600 dark:text-gray-400 hover:cursor-pointer hover:text-orange-500"
                 :href="talk.href_slides"
               >
                 [slide_deck]
               </a>
               <a
                 v-if="talk.href_video"
-                class="text-xs uppercase text-gray-400 hover:cursor-pointer hover:text-orange-500"
+                class="text-xs uppercase text-gray-600 dark:text-gray-400 hover:cursor-pointer hover:text-orange-500"
                 :href="talk.href_video"
               >
                 [video]
               </a>
               <a
                 v-if="talk.href_code"
-                class="text-xs uppercase text-gray-400 hover:cursor-pointer hover:text-orange-500"
+                class="text-xs uppercase text-gray-600 dark:text-gray-400 hover:cursor-pointer hover:text-orange-500"
                 :href="talk.href_code"
               >
                 [source_code]
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 54b51581..ff4c5748 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@nuxtjs/color-mode':
+        specifier: ^3.5.2
+        version: 3.5.2(magicast@0.3.5)
       chords.ts:
         specifier: ^0.1.0
         version: 0.1.0
@@ -675,6 +678,9 @@ packages:
     peerDependencies:
       vue: ^3.3.4
 
+  '@nuxtjs/color-mode@3.5.2':
+    resolution: {integrity: sha512-cC6RfgZh3guHBMLLjrBB2Uti5eUoGM9KyauOaYS9ETmxNWBMTvpgjvSiSJp1OFljIXPIqVTJ3xtJpSNZiO3ZaA==}
+
   '@nuxtjs/mdc@0.17.0':
     resolution: {integrity: sha512-5HFJ2Xatl4oSfEZuYRJhzYhVHNvb31xc9Tu/qfXpRIWeQsQphqjaV3wWB5VStZYEHpTw1i6Hzyz/ojQZVl4qPg==}
 
@@ -5786,6 +5792,15 @@ snapshots:
       - vue-tsc
       - yaml
 
+  '@nuxtjs/color-mode@3.5.2(magicast@0.3.5)':
+    dependencies:
+      '@nuxt/kit': 3.17.4(magicast@0.3.5)
+      pathe: 1.1.2
+      pkg-types: 1.3.1
+      semver: 7.7.2
+    transitivePeerDependencies:
+      - magicast
+
   '@nuxtjs/mdc@0.17.0(magicast@0.3.5)':
     dependencies:
       '@nuxt/kit': 3.17.4(magicast@0.3.5)
diff --git a/tailwind.config.js b/tailwind.config.js
index 95b984af..dade212c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,4 +1,5 @@
 export default {
+  darkMode: 'class',
   theme: {
     container: {
       padding: {
@@ -36,8 +37,14 @@ export default {
       },
       colors: {
         cyan: "#9cdbff",
-        background: "#0f1c1e", // terafox bg
-        foreground: "#cbd9d8", // terafox fg
+        background: {
+          DEFAULT: "#ffffff", // light mode background
+          dark: "#0f1c1e", // terafox bg (dark mode)
+        },
+        foreground: {
+          DEFAULT: "#1e293b", // light mode foreground
+          dark: "#cbd9d8", // terafox fg (dark mode)
+        },
       },
       keyframes: {
         wiggle: {