style: enhance dark mode support across community, event, podcast cards, and navigation components

Author: geromegrignon

src/app/components/cards/community-card.ts

@@ -6,15 +6,17 @@ import { Community } from '../../../models/community.model';
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <article
-      class="rounded-2xl drop-shadow-xl p-6 bg-white h-full flex flex-col gap-4"
+      class="rounded-2xl drop-shadow-xl p-6 bg-white dark:bg-gray-800 h-full flex flex-col gap-4"
     >
       <header class="flex items-start gap-4">
         <div class="flex items-center gap-2 bg-gray-100 p-2 rounded-lg">
           <img [src]="community().logo" class="w-10" alt="" />
         </div>
         <div class="flex flex-col gap-1">
           <h2 class="text-lg font-bold">{{ community().name }}</h2>
-          <div class="flex items-center gap-1 text-sm text-gray-600">
+          <div
+            class="flex items-center gap-1 text-sm text-gray-600 dark:text-gray-200"
+          >
             <i class="pi pi-globe" style="font-size: 0.8rem"></i>
             <span>{{ community().location ?? 'Online' }}</span>
           </div>
@@ -77,7 +79,9 @@ import { Community } from '../../../models/community.model';
               target="_blank"
               class="text-sm hover:underline flex items-center gap-2"
             >
-              <i class="pi pi-twitter text-2xl text-[#000000]"></i>
+              <i
+                class="pi pi-twitter text-2xl text-[#000000] dark:text-white"
+              ></i>
               <span>Twitter</span>
             </a>
           </li>

src/app/components/cards/event-card.ts

@@ -12,13 +12,14 @@ import { CommunityEvent } from '../../../models/community-event.model';
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <article
-      class="rounded-2xl drop-shadow-xl p-6 bg-white h-full flex flex-col gap-4"
+      class="rounded-2xl drop-shadow-xl p-6 bg-white dark:bg-gray-800 h-full flex flex-col gap-4"
     >
-      <header class="flex items-start justify-between">
+      <header class="flex items-start justify-between gap-2">
         <h2 class="text-lg font-bold">{{ event().name }}</h2>
-        <span class="text-sm bg-[#26A0D9] text-white px-2 py-1 rounded-lg">{{
-          event().type
-        }}</span>
+        <span
+          class="text-sm bg-[#26A0D9] text-white dark:text-gray-900 px-2 py-1 rounded-lg"
+          >{{ event().type }}</span
+        >
       </header>
       <ul class="flex flex-col gap-2">
         <li class="flex items-center gap-2">
@@ -40,11 +41,13 @@ import { CommunityEvent } from '../../../models/community-event.model';
       <p class="text-sm flex-1">{{ event().description }}</p>
       <footer class="flex flex-col gap-2">
         <div
-          class="flex items-center justify-between bg-gray-50 p-4 rounded-2xl"
+          class="flex items-center justify-between bg-gray-50 dark:bg-gray-700 p-4 rounded-2xl"
         >
           @if (!event().isFree) {
             <div class="flex flex-col">
-              <div class="text-sm text-gray-500">Starting from</div>
+              <div class="text-sm text-gray-500 dark:text-gray-200">
+                Starting from
+              </div>
               <div class="font-bold text-[#26A0D9] flex items-end gap-1">
                 @if (event().startingPrice) {
                   <span class="text-sm pb-1">
@@ -58,7 +61,9 @@ import { CommunityEvent } from '../../../models/community-event.model';
             </div>
           } @else {
             <div class="flex flex-col">
-              <div class="text-sm text-gray-500">Registration</div>
+              <div class="text-sm text-gray-500 dark:text-gray-200">
+                Registration
+              </div>
               <div class="font-bold text-2xl text-[#26A0D9]">Free</div>
             </div>
           }

src/app/components/cards/podcast-card.ts

@@ -6,7 +6,7 @@ import { Podcast } from '../../../models/podcast.model';
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <article
-      class="rounded-2xl drop-shadow-xl p-6 bg-white h-full flex flex-col gap-4"
+      class="rounded-2xl drop-shadow-xl p-6 bg-white dark:bg-gray-800 h-full flex flex-col gap-4"
     >
       <div class="flex items-start gap-4">
         <img
@@ -25,7 +25,7 @@ import { Podcast } from '../../../models/podcast.model';
             {{ podcast().name }}
           </h3>
           <span
-            class="inline-flex items-center justify-center gap-1 bg-gray-100 rounded px-2 py-1 text-xs"
+            class="inline-flex items-center justify-center gap-1 bg-gray-100 dark:bg-gray-700 rounded px-2 py-1 text-xs"
           >
             <i class="pi pi-language text-xs" aria-hidden="true"></i>
             {{
@@ -45,8 +45,12 @@ import { Podcast } from '../../../models/podcast.model';
         target="_blank"
       >
         <div class="flex items-center gap-3">
-          <i class="pi pi-play-circle text-purple-600 text-2xl"></i>
-          <span class="font-medium text-purple-600">Listen Now</span>
+          <i
+            class="pi pi-play-circle text-purple-600 text-2xl dark:text-purple-300"
+          ></i>
+          <span class="font-medium text-purple-600 dark:text-purple-300"
+            >Listen Now</span
+          >
         </div>
       </a>
     </article>

src/app/components/navigation/navigation.html

@@ -6,9 +6,9 @@
         <span class="hidden md:block">ANGULAR</span>
         <span>HUB</span>
       </span>
-      <span class="hidden lg:block text-sm text-gray-500">
+      <h2 class="hidden lg:block text-sm text-gray-500 dark:text-gray-300">
         The Angular community hub for events, communities, and podcasts
-      </span>
+      </h2>
     </div>
   </a>
 
@@ -48,7 +48,7 @@
   </ul>
 </nav>
 <div class="flex-1">
-  <main class="pb-4 h-full bg-gray-50 pt-6">
+  <main class="pb-4 h-full bg-gray-50 dark:bg-gray-900 pt-6">
     <router-outlet />
   </main>
 </div>

src/app/pages/communities-page.ts

@@ -21,7 +21,7 @@ export const routeMeta = {
   template: `
     <section class="max-w-screen-xl mx-auto px-6">
       <input
-        class="w-full p-2 rounded-lg border-2 border-gray-300"
+        class="w-full p-2 rounded-lg border-2 border-gray-300 dark:border-gray-700"
         type="search"
         placeholder="Search communities"
         [(ngModel)]="search"

src/app/pages/events-page.ts

@@ -8,10 +8,7 @@ import {
 import { Title } from '@angular/platform-browser';
 import { ButtonModule } from 'primeng/button';
 import { MessageModule } from 'primeng/message';
-import {
-  EmptySearchMessage,
-  NoEventsMessage,
-} from '../components/message';
+import { EmptySearchMessage, NoEventsMessage } from '../components/message';
 import { JsonLdService } from '../services/json-ld.service';
 import { HttpClient } from '@angular/common/http';
 import { EventCard } from '../components/cards/event-card';
@@ -44,7 +41,7 @@ export const routeMeta = {
   template: `
     <section class="max-w-screen-xl w-full mx-auto px-6">
       <input
-        class="w-full p-2 rounded-lg border-2 border-gray-300"
+        class="w-full p-2 rounded-lg border-2 border-gray-300 dark:border-gray-700"
         type="search"
         placeholder="Search events"
         [(ngModel)]="search"

src/app/pages/podcasts-page.ts

@@ -4,8 +4,6 @@ import { PodcastCard } from '../components/cards/podcast-card';
 
 import { JsonLdService } from '../services/json-ld.service';
 import { Title } from '@angular/platform-browser';
-import { Banner } from '../components/banner';
-import { signal } from '@angular/core';
 import { Podcast } from '../../models/podcast.model';
 import { HttpClient } from '@angular/common/http';
 import { toSignal } from '@angular/core/rxjs-interop';