feat: enhance footer logos with light and dark variants, improve theme handling in homepage component

Web/src/app/pages/front-pages/footer/footer.component.html

@@ -14,12 +14,18 @@
         <div class="col-md-4  text-center">
           <img
             srcset="https://s3.lesko.me/public/logo/logo-nextgen-1x.png, https://s3.lesko.me/public/logo/logo-nextgen-2x.png 2x"
-            class="img-fluid" style="max-width: 100%; height: auto;" />
+            class="img-fluid logodark" style="max-width: 100%; height: auto;" />
+          <img
+            srcset="https://s3.lesko.me/public/logo/logo-nextgen-1x-invert.png, https://s3.lesko.me/public/logo/logo-nextgen-2x-invert.png 2x"
+            class="img-fluid logolight" style="max-width: 100%; height: auto;" />
         </div>
         <div class="col-md-4 text-center">
           <img
             srcset="https://s3.lesko.me/public/logo/logo-poo-1x.png, https://s3.lesko.me/public/logo/logo-poo-2x.png 2x"
-            class="img-fluid" style="max-width: 100%; height: auto;" />
+            class="img-fluid logodark" style="max-width: 100%; height: auto;" />
+          <img
+            srcset="https://s3.lesko.me/public/logo/logo-poo-1x-invert.png, https://s3.lesko.me/public/logo/logo-poo-2x-invert.png 2x"
+            class="img-fluid logolight" style="max-width: 100%; height: auto;" />
         </div>
       </div>
     </div>

Web/src/app/pages/front-pages/homepage-details/homepage-details.component.ts

@@ -32,10 +32,10 @@ import { Router, RouterModule } from '@angular/router';
   styleUrl: './homepage-details.component.scss',
 })
 export class HomepageDetailsComponent {
- 
-  topcards=topcardsGrid;
 
- 
+  topcards = topcardsGrid;
+
+
   centered = false;
   disabled = false;
   unbounded = false;
@@ -103,14 +103,14 @@ export class HomepageDetailsComponent {
       this.currentIndex.update((i) => i + 1);
     }
   }
-  openDialog(showBackground:boolean){
+  openDialog(showBackground: boolean) {
     this.showBackground = showBackground;
 
     const dialogRef = this.dialog.open(TemplateVideoComponent, {
       data: {},
       width: '1000px',
     });
-  
+
     dialogRef.afterClosed().subscribe((result) => {
       if (result === false) {
         this.showBackground = false; // Reset or take any action
@@ -118,7 +118,7 @@ export class HomepageDetailsComponent {
     });
   }
 
- 
+
   onImageClick(path: string) {
     this.selectedPath = path;
 

Web/src/app/pages/front-pages/homepage/homepage.component.html

@@ -27,12 +27,40 @@
                 Kontakty
               </button>
             </div>
-            <a mat-flat-button color="primary" class="" [routerLink]="'/authentication/login'">Prihlásenie</a>
+            <div class="row">
-            } @if(isMobileView){
+              @if(settings.getOptions().theme=='light'){
-            <button mat-mini-fab class="bg-light" aria-label="Example icon button with a delete icon"
+              <button mat-icon-button aria-label="lightdark" class="d-flex justify-content-center"
-              (click)="customizerRight.toggle()">
+                (click)="setlightDark('dark')">
-              <i-tabler class="icon-18 d-flex" name="menu"></i-tabler>
+                <i-tabler class="d-flex icon-22" [name]="'moon'"></i-tabler>
-            </button>
+              </button>
+              }@else{
+              <button mat-icon-button aria-label="lightdark" class="d-flex justify-content-center"
+                (click)="setlightDark('light')">
+                <i-tabler class="d-flex icon-22" [name]="'sun'"></i-tabler>
+              </button>
+              }
+              <a mat-flat-button color="primary" class="" [routerLink]="'/authentication/login'">Prihlásenie</a>
+            </div>
+            }
+
+            @if(isMobileView){
+            <div class="row">
+              @if(settings.getOptions().theme=='light'){
+              <button mat-icon-button aria-label="lightdark" class="d-flex justify-content-center"
+                (click)="setlightDark('dark')">
+                <i-tabler class="d-flex icon-22" [name]="'moon'"></i-tabler>
+              </button>
+              }@else{
+              <button mat-icon-button aria-label="lightdark" class="d-flex justify-content-center"
+                (click)="setlightDark('light')">
+                <i-tabler class="d-flex icon-22" [name]="'sun'"></i-tabler>
+              </button>
+              }
+              <button mat-mini-fab class="bg-light" aria-label="Example icon button with a delete icon"
+                (click)="customizerRight.toggle()">
+                <i-tabler class="icon-18 d-flex" name="menu"></i-tabler>
+              </button>
+            </div>
             }
           </div>
         </div>

Web/src/app/pages/front-pages/homepage/homepage.component.ts

@@ -1,11 +1,12 @@
 import { MediaMatcher } from '@angular/cdk/layout';
 import { CommonModule } from '@angular/common';
-import { Component, HostListener, inject, ViewChild } from '@angular/core';
+import { Component, effect, HostListener, inject, ViewChild } from '@angular/core';
 import { MatSidenav } from '@angular/material/sidenav';
 import { ActivatedRoute, Router, RouterLink, RouterOutlet } from '@angular/router';
 import { IconModule } from '../../../icon/icon.module';
 import { BrandingComponent } from '../../../layouts/full/vertical/sidebar/branding.component';
 import { MaterialModule } from '../../../material.module';
+import { CoreService } from '../../../services/core.service';
 
 @Component({
   selector: 'app-homepage',
@@ -23,16 +24,34 @@ export class HomepageComponent {
   private mediaMatcher: MediaQueryList = matchMedia(`(max-width: 1199px)`);
   showBackToTop: boolean = false;
   isTopbarFixed: boolean = false;
-  constructor(private route: ActivatedRoute) {
+  constructor(private route: ActivatedRoute, protected settings: CoreService) {
     const media = inject(MediaMatcher);
     this.mobileQuery = media.matchMedia('(max-width: 1199px)');
     this.isMobileView = this.mobileQuery.matches;
 
     this.mobileQuery.addEventListener('change', (e) => {
-
       this.isMobileView = e.matches;
       this.closeSidenavIfNeeded();
     });
+    effect(() => {
+      const options = this.settings.getOptionsSignal()();
+      this.setTheme(options.theme);
+    });
+  }
+
+  setlightDark(theme: string) {
+    this.settings.setOptions({ theme: theme });
+  }
+
+  setTheme(theme: string) {
+    const html = document.querySelector('html')!;
+    if (theme === 'dark') {
+      html.classList.add('dark-theme');
+      html.classList.remove('light-theme');
+    } else {
+      html.classList.remove('dark-theme');
+      html.classList.add('light-theme');
+    }
   }
 
   close() {