1 dark theme on hacker news app

app/app.vue

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

app/components/AppHeader.vue

@@ -1,5 +1,14 @@
 <script setup lang="ts">
 import { feedsInfo } from '~~/utils/api'
+
+import { ref } from 'vue'
+
+const isDarkMode = ref(false)
+
+function toggleSwitch() {
+  isDarkMode.value = !isDarkMode.value
+  document.documentElement.classList.toggle('dark-mode', isDarkMode.value)
+}
 </script>
 
 <template>
@@ -32,7 +41,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 +50,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,24 @@ const hasMore = computed(() => props.page < props.maxPage)
     text-align: center;
   }
 }
+
+/* Dark mode styles */
+.dark-mode .news-list-nav, .dark-mode .news-list {
+  background-color: #2e2e2e;
+}
+
+.dark-mode .news-list-nav {
+  & a {
+    color: #ccc;
+  }
+
+  .disabled {
+    opacity: 0.5;
+  }
+
+  .page {
+    color: #ccc;
+  }
+}
+
 </style>

app/components/PostComment.vue

@@ -103,4 +103,44 @@ function pluralize(n: number) {
     }
   }
 }
+
+/* Dark mode styles */
+.dark-mode .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-mode .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-mode .news-list {
+  background-color: #2e2e2e;
+}
+
 </style>

app/pages/item/[id].vue

@@ -123,4 +123,30 @@ useHead({
     }
   }
 }
+
+/* Dark mode styles */
+.dark-mode .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-mode .item-view-comments {
+  background-color: #2e2e2e;
+}
+
+.dark-mode .item-view-comments-header {
+  color: #F4F4F5;
+}
+
 </style>

app/pages/user/[id].vue

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