1 dark theme on hacker news app

CODEOWNERS

@@ -0,0 +1 @@
+* @dupoicorp/opensource-admins

app/app.vue

@@ -126,4 +126,15 @@ a {
     }
   }
 }
+
+/* Dark mode styles */
+.dark body {
+  background-color: #020420;
+  color: #F4F4F5;
+}
+
+.dark a {
+  color: #F4F4F5;
+}
+
 </style>

app/components/AppHeader.vue

@@ -1,5 +1,11 @@
 <script setup lang="ts">
 import { feedsInfo } from '~~/utils/api'
+
+const colorMode = useColorMode()
+
+function toggleSwitch() {
+  colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+}
 </script>
 
 <template>
@@ -32,7 +38,7 @@ import { feedsInfo } from '~~/utils/api'
       >
         {{ list.title }}
       </NuxtLink>
-      <span class="github">
+      <span class="github" style="margin-right: 10px;">
         <a
           href="https://github.com/nuxt/hackernews"
           target="_blank"
@@ -41,6 +47,14 @@ import { feedsInfo } from '~~/utils/api'
           Open on GitHub
         </a>
       </span>
+
+      <span @click="toggleSwitch" style="cursor: pointer;">
+        <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8V16Z" fill="#FFFFFF"/>
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM12 4V8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16V20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4Z" fill="#FFFFFF"/>
+        </svg>
+      </span>
+
     </nav>
   </header>
 </template>

app/components/ItemListNav.vue

@@ -59,4 +59,28 @@ const hasMore = computed(() => props.page < props.maxPage)
     text-align: center;
   }
 }
+
+/* Dark mode styles */
+.dark .news-list-nav, .dark .news-list {
+  background-color: #2e2e2e;
+}
+
+.dark .news-list-nav {
+  & a {
+    color: #ccc;
+
+    &:hover {
+      color: #fff;
+    }
+  }
+
+  .disabled {
+    opacity: 0.5;
+    color: #666;
+  }
+
+  .page {
+    color: #ccc;
+  }
+}
 </style>

app/components/PostComment.vue

@@ -103,4 +103,44 @@ function pluralize(n: number) {
     }
   }
 }
+
+/* Dark mode styles */
+.dark .comment {
+  border-top: 1px solid #444;
+
+  .by {
+    color: #ccc;
+
+    & a {
+      color: #ccc;
+    }
+  }
+
+  .text {
+    color: #ccc;
+
+    & a:hover {
+      color: #00C48D;
+    }
+
+    & pre {
+      background-color: #333;
+      color: #ccc;
+    }
+  }
+
+  .toggle {
+    background-color: #333;
+    color: #ccc;
+
+    & a {
+      color: #00C48D;
+    }
+
+    &.open {
+      background-color: transparent;
+    }
+  }
+}
+
 </style>

app/components/PostItem.vue

@@ -86,4 +86,27 @@ defineProps<{
     }
   }
 }
+
+/* Dark mode styles */
+.dark .news-item {
+  background-color: #2e2e2e;
+  border-bottom: 1px solid #444;
+
+  .score {
+    color: #00C48D;
+  }
+
+  .meta, .host {
+    color: #ccc;
+
+    & a {
+      color: #ccc;
+
+      &:hover {
+        color: #00C48D;
+      }
+    }
+  }
+}
+
 </style>

app/pages/[feed]/[page].vue

@@ -139,4 +139,10 @@ watch(page, to => pageChanged(to))
     margin: 10px 0;
   }
 }
+
+/* Dark mode styles */
+.dark .news-list {
+  background-color: #2e2e2e;
+}
+
 </style>

app/pages/item/[id].vue

@@ -123,4 +123,30 @@ useHead({
     }
   }
 }
+
+/* Dark mode styles */
+.dark .item-view-header {
+  background-color: #2e2e2e;
+  box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
+
+  & h1 {
+    color: #F4F4F5;
+  }
+
+  .host, .meta, .meta a {
+    color: #ccc;
+  }
+  .meta a:hover {
+    color: #00C48D;
+  }
+}
+
+.dark .item-view-comments {
+  background-color: #2e2e2e;
+}
+
+.dark .item-view-comments-header {
+  color: #F4F4F5;
+}
+
 </style>

app/pages/user/[id].vue

@@ -72,4 +72,27 @@ useHead({
     text-decoration: underline;
   }
 }
+
+/* Dark mode styles */
+.dark .user-view {
+  background-color: #2e2e2e;
+  color: #F4F4F5;
+
+  & h1 {
+    color: #F4F4F5;
+  }
+
+  .label {
+    color: #ccc;
+  }
+
+  .about {
+    color: #ccc;
+  }
+
+  .links a {
+    color: #00C48D;
+  }
+}
+
 </style>

nuxt.config.ts

@@ -1,29 +1,57 @@
+// @ts-ignore Import error workaround for module augmentation
+import '@nuxtjs/color-mode'
+
 export default defineNuxtConfig({
   future: { compatibilityVersion: 4 },
-  // https://nuxt.com/modules
+
   modules: [
     '@nuxthub/core',
     '@nuxt/eslint',
+    '@nuxtjs/color-mode'
   ],
+
+  app: {
+    pageTransition: { name: 'page', mode: 'out-in' }
+  },
+
+  // Module configurations
+  colorMode: {
+    preference: 'system',
+    fallback: 'light',
+    classSuffix: ''
+  },
+
   hub: {
     cache: true,
   },
+
   postcss: {
     plugins: {
       'postcss-nesting': {},
     },
   },
 
-  // https://devtools.nuxt.com
   devtools: {
     enabled: true,
   },
-  // https://eslint.nuxt.com
+
   eslint: {
     config: {
       stylistic: {
         quotes: 'single',
       },
     },
   },
-})
+
+  compatibilityDate: '2025-05-06',
+
+  nitro: {
+    routeRules: {
+      '/**': { cors: true }
+    }
+  },
+
+  experimental: {
+    headNext: true
+  }
+})

package.json

@@ -26,10 +26,14 @@
     "@nuxt/eslint": "^0.7.2",
     "@nuxt/eslint-config": "^0.7.2",
     "@nuxthub/core": "^0.8.7",
+    "@nuxtjs/color-mode": "^3.5.2",
     "@types/node": "^22.10.0",
     "eslint": "^9.15.0",
-    "nuxt": "^3.14.1592",
+    "nuxt": "^3.17.2",
     "postcss-nesting": "^13.0.1",
     "typescript": "^5.7.2"
+  },
+  "dependencies": {
+    "@unhead/vue": "^2.0.8"
   }
 }