release/15_10_2025 (#444)

Added light theme with custom color palette and theme toggle. Restructured footer layout with responsive grid and partner logos, enhanced navigation styling. Implemented keyboard navigation with FocusKeyManager, proper ARIA attributes, semantic HTML structure, and ISO 8601 datetime formats for improved accessibility.

KAP-298, KAP-315, KAP-335

Author: marcin-hoa

apps/blog/src/assets/HOA_logo_blue.png

@@ -9,9 +9,8 @@
     "recommended": "Recommended Articles",
     "angularNews": "Angular News",
     "guides": "Guides",
-    "partners": "Community partners",
-    "mainPartner": "Main partner",
     "angularInDepth": "Angular In Depth",
+    "articleTypes": "Article types",
     "categories": {
       "all": "Latest",
       "news": "News",
@@ -24,15 +23,27 @@
     "home": "Home Page",
     "about": "About us",
     "meetups": "Angular Meetups",
+    "guides": "Angular Guides",
+    "news": "Angular News",
+    "in_depth": "In-Depth articles",
+    "partnership": "Let's discuss partnership",
     "become_author": "Become an author",
     "newsletter": "Angular.letter",
     "navLinks": "Navigation links",
     "roadmap": "Roadmap",
+    "toggle_theme": "Toggle theme",
+    "open_search_dialog": "Open search dialog",
     "languagePicker": {
       "pl": "Polish",
-      "en": "English"
+      "en": "English",
+      "select_lang": "Select language"
     }
   },
+  "footer": {
+    "mainPartner": "Main partner",
+    "partners": "Community partners",
+    "al-description": "This is the place where you can learn Angular, discover best practices, and stay updated with the latest news and trends"
+  },
   "authorPage": {
     "posted_by": "Posted by {{name}}"
   },
@@ -203,6 +214,7 @@
     "registerButtonShortened": "Download"
   },
   "search": {
+    "title": "Search articles",
     "no-matches": "No recent matches",
     "results": "{{total}} results"
   },
@@ -218,6 +230,7 @@
     "changeLangToEnglish": "Change language to English"
   },
   "socialLinks": {
+    "title": "Social media",
     "facebook": "Like our Facebook page",
     "twitter-x": "Follow us on X (formerly Twitter)",
     "linkedIn": "Follow us on LinkedIn",

apps/blog/src/assets/HOA_logo_white.png

@@ -9,9 +9,8 @@
     "recommended": "Polecane Artykuły",
     "angularNews": "Wiadomości ze świata Angulara",
     "guides": "Poradniki",
-    "partners": "Community partnerzy",
-    "mainPartner": "Główny partner",
     "angularInDepth": "Angular In Depth",
+    "articleTypes": "Typy artykułów",
     "categories": {
       "all": "Najnowsze",
       "news": "Nowości",
@@ -24,15 +23,27 @@
     "home": "Strona Główna",
     "about": "O nas",
     "meetups": "Angular Meetups",
+    "guides": "Angular Guides",
+    "news": "Angular News",
+    "in_depth": "Artykuły In-Depth",
+    "partnership": "Porozmawiajmy o partnerstwie",
     "become_author": "Zostań autorem",
     "newsletter": "Angular.letter",
     "navLinks": "Menu",
     "roadmap": "Roadmap",
+    "toggle_theme": "Przełącz motyw",
+    "open_search_dialog": "Otwórz okno wyszukiwania",
     "languagePicker": {
       "pl": "Polski",
-      "en": "Angielski"
+      "en": "Angielski",
+      "select_lang": "Wybierz język"
     }
   },
+  "footer": {
+    "partners": "Community partnerzy",
+    "mainPartner": "Główny partner",
+    "al-description": "To jest miejsce, w którym możesz nauczyć się Angulara, odkrywać najlepsze praktyki i być na bieżąco z najnowszymi wiadomościami i trendami"
+  },
   "home": {
     "latest": "Latest articles"
   },
@@ -206,6 +217,7 @@
     "registerButtonShortened": "Pobierz"
   },
   "search": {
+    "title": "Wyszukiwanie artykułów",
     "no-matches": "Brak wyników",
     "results": "{{total}} wyników"
   },
@@ -221,6 +233,7 @@
     "changeLangToEnglish": "Zmień język na angielski"
   },
   "socialLinks": {
+    "title": "Media społecznościowe",
     "facebook": "Polub nas na Facebooku",
     "twitter-x": "Obserwuj nas na X (dawniej Twitter)",
     "linkedIn": "Obserwuj nas na LinkedInie",

apps/blog/src/assets/i18n/en.json

@@ -1,9 +1,9 @@
 <ng-container *transloco="let t; read: 'aboutUsPage'">
-  <h2 class="py-4 text-[40px] font-bold">
+  <h2 class="text-al-primary-foreground py-4 text-[40px] font-bold">
     {{ t('title') }}
   </h2>
 
-  <al-card>
+  <al-card class="bg-transparent">
     <section
       alCardContent
       aria-labelledby="angular-love"
@@ -35,13 +35,18 @@ <h2 class="py-4 text-[40px] font-bold">
     <al-newsletter alCardContent />
   </al-card>
 
-  <h2 class="mb-8 mt-10 text-[40px] font-bold">
+  <h2 class="text-al-primary-foreground mb-8 mt-10 text-[40px] font-bold">
     {{ t('authorsTitle') }}
   </h2>
 </ng-container>
 
 @for (author of authorsCards(); track author.slug) {
-  <al-author-card class="mb-6 block" [author]="author" [linkable]="true" />
+  <al-author-card
+    class="mb-6 block"
+    [author]="author"
+    [linkable]="true"
+    [hideGradient]="hideGradientInAuthorCards()"
+  />
 
   @if ($index === noAuthorsInView() - 2) {
     @defer (on viewport) {

apps/blog/src/assets/i18n/pl.json

@@ -16,6 +16,7 @@ import {
 } from '@angular-love/blog/shared/ui-card';
 import { InfiniteScrollTriggerDirective } from '@angular-love/blog/shared/ui-pagination';
 import { SocialMediaIconsComponent } from '@angular-love/blog/shared/ui-social-media-icons';
+import { AppThemeStore } from '@angular-love/data-access-app-theme';
 
 @Component({
   selector: 'al-about-us',
@@ -41,6 +42,12 @@ export class FeatureAboutUsComponent implements OnInit {
     return this.authorsCards()?.length || 0;
   });
 
+  private readonly _theme = inject(AppThemeStore).theme;
+
+  readonly hideGradientInAuthorCards = computed(
+    () => this._theme() === 'light',
+  );
+
   private readonly _skip = this._authorListStore.skip;
   private readonly _total = this._authorListStore.total;
   private readonly _pageSize = this._authorListStore.pageSize;

apps/blog/src/assets/icons/arrow-down.svg

@@ -1,16 +1,16 @@
 import { isPlatformBrowser } from '@angular/common';
 import { inject, Injectable, PLATFORM_ID } from '@angular/core';
-import { signalStore, withMethods, withState } from '@ngrx/signals';
+import { patchState, signalStore, withMethods, withState } from '@ngrx/signals';
 
-type Theme = 'dark' | 'light';
+export type Theme = 'dark' | 'light';
 
 interface AppThemeStore {
   theme: Theme;
 }
 
 export const AppThemeStore = signalStore(
   { providedIn: 'root' },
-  withState<AppThemeStore>({ theme: 'light' }),
+  withState<AppThemeStore>({ theme: 'dark' }),
   withMethods(
     (
       store,
@@ -19,31 +19,41 @@ export const AppThemeStore = signalStore(
     ) => ({
       syncWithSystemTheme: () => {
         if (isPlatformBrowser(platformId)) {
-          ccConsumer.setThemeClass(getSystemTheme());
+          const theme =
+            (localStorage.getItem('theme') as Theme) ?? getSystemTheme();
+          ccConsumer.setThemeAttribute(theme);
+          patchState(store, { theme: theme });
+        }
+      },
+      toggleTheme: () => {
+        if (isPlatformBrowser(platformId)) {
+          const newTheme = store.theme() === 'dark' ? 'light' : 'dark';
+          ccConsumer.setThemeAttribute(newTheme);
+          localStorage.setItem('theme', newTheme);
+          patchState(store, { theme: newTheme });
         }
       },
     }),
   ),
 );
 
 function getSystemTheme(): Theme {
-  return window.matchMedia('(prefers-color-scheme: dark)').matches
-    ? 'dark'
-    : 'light';
+  // Hardcoded to 'dark' for now, as per decision.
+  return 'dark';
 }
 
 /* todo: create consumer interface and decouple AppThemeStore from CCAppThemeConsumer*/
 @Injectable({ providedIn: 'root' })
 export class CCAppThemeConsumer {
-  setThemeClass(theme: Theme): void {
-    const htmlElement = document.documentElement;
-    switch (theme) {
-      case 'dark':
-        htmlElement.classList.add('cc--darkmode');
-        break;
-      case 'light':
-        htmlElement.classList.remove('cc--darkmode');
-        break;
+  setThemeAttribute(theme: Theme): void {
+    document.documentElement.setAttribute('data-theme', theme);
+
+    const classList = document.documentElement.classList;
+
+    if (theme === 'dark') {
+      classList.add('cc--darkmode');
+    } else {
+      classList.remove('cc--darkmode');
     }
   }
 }