From 7d5af7fcf9c2a2b8082707c3d4aaa610dbea29b4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=87etin?=
 <69278826+cetincakiroglu@users.noreply.github.com>
Date: Thu, 20 Jan 2022 12:03:45 +0300
Subject: [PATCH 1/4] pages updated - dynamic theme

---
 .../components/access/access.component.html   |  6 ++--
 src/app/components/access/access.component.ts | 27 +++++++++++++++--
 src/app/components/error/error.component.html |  6 ++--
 src/app/components/error/error.component.ts   | 26 +++++++++++++++--
 .../components/landing/landing.component.ts   | 17 +++++++++--
 src/app/components/login/login.component.html | 10 +++----
 src/app/components/login/login.component.ts   | 29 ++++++++++++-------
 .../notfound/notfound.component.html          | 22 +++++++-------
 .../components/notfound/notfound.component.ts | 26 +++++++++++++++--
 9 files changed, 127 insertions(+), 42 deletions(-)

diff --git a/src/app/components/access/access.component.html b/src/app/components/access/access.component.html
index e6e868c..99122f3 100644
--- a/src/app/components/access/access.component.html
+++ b/src/app/components/access/access.component.html
@@ -7,10 +7,10 @@
             <div class="surface-card h-full w-full m-0 py-7 px-4" style="border-radius:53px;">
                 <div class="grid flex flex-column align-items-center">
                     <div class="flex justify-content-center align-items-center bg-orange-500 border-circle" style="width:3.2rem; height:3.2rem;">
-                        <i class="pi pi-fw pi-lock text-2xl text-50"></i>
+                        <i class="pi pi-fw pi-lock text-2xl" [ngClass]="config.dark ? 'text-900' : 'text-50'"></i>
                     </div>
-                    <h1 class="text-gray-900 font-bold text-4xl lg:text-5xl mb-2">Access Denied</h1>
-                    <span class="text-gray-600 text-center">You do not have the necesary permisions. Please contact admins.</span>
+                    <h1 class="font-bold text-4xl lg:text-5xl mb-2" [ngClass]="config.dark ? 'text-900' : 'text-gray-900'">Access Denied</h1>
+                    <span class="text-center" [ngClass]="config.dark ? 'text-600' : 'text-gray-600'">You do not have the necesary permisions. Please contact admins.</span>
                     <img src="assets/layout/images/asset-access.svg" alt="Access denied" class="mt-5" width="80%">
                     <div class="col-12 mt-5 text-center">
                         <i class="pi pi-fw pi-arrow-left text-blue-500 mr-2" style="vertical-align:center;"></i><a href="#" class="text-blue-500">Go to Dashboard</a>
diff --git a/src/app/components/access/access.component.ts b/src/app/components/access/access.component.ts
index fb55ed1..1867c97 100644
--- a/src/app/components/access/access.component.ts
+++ b/src/app/components/access/access.component.ts
@@ -1,7 +1,28 @@
-import { Component } from '@angular/core';
-
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { ConfigService } from '../../service/app.config.service';
+import { AppConfig } from '../../api/appconfig';
+import { Subscription } from 'rxjs';
 @Component({
   selector: 'app-access',
   templateUrl: './access.component.html',
 })
-export class AccessComponent { }
+export class AccessComponent implements OnInit, OnDestroy {
+  
+  config: AppConfig;
+  subscription: Subscription;
+
+  constructor(public configService: ConfigService){ }
+
+  ngOnInit(): void {
+    this.config = this.configService.config;
+    this.subscription = this.configService.configUpdate$.subscribe(config => {
+      this.config = config;
+    });
+  }
+
+  ngOnDestroy(): void {
+    if(this.subscription){
+      this.subscription.unsubscribe();
+    }
+  }
+}
diff --git a/src/app/components/error/error.component.html b/src/app/components/error/error.component.html
index 1a061cf..9a19020 100644
--- a/src/app/components/error/error.component.html
+++ b/src/app/components/error/error.component.html
@@ -7,10 +7,10 @@
             <div class="surface-card h-full w-full m-0 py-7 px-4" style="border-radius:53px;">
                 <div class="grid flex flex-column align-items-center">
                     <div class="flex justify-content-center align-items-center bg-pink-500 border-circle" style="height:3.2rem; width:3.2rem;">
-                        <i class="pi pi-fw pi-exclamation-circle text-2xl text-50"></i>
+                        <i class="pi pi-fw pi-exclamation-circle text-2xl" [ngClass]="config.dark ? 'text-900' : 'text-50'"></i>
                     </div>
-                    <h1 class="font-bold text-5xl text-gray-900 mb-2">Error Occured</h1>
-                    <span class="text-gray-600">Requested resource is not available.</span>
+                    <h1 class="font-bold text-5xl mb-2" [ngClass]="config.dark ? 'text-900' : 'text-gray-900'">Error Occured</h1>
+                    <span [ngClass]="config.dark ? 'text-600' : 'text-gray-600'">Requested resource is not available.</span>
                     <img src="assets/layout/images/asset-error.svg" alt="Error" class="mt-5" width="80%">
                     <div class="col-12 mt-5 text-center">
                         <i class="pi pi-fw pi-arrow-left text-blue-500 mr-2" style="vertical-align:center;"></i><a href="#" class="text-blue-500">Go to Dashboard</a>
diff --git a/src/app/components/error/error.component.ts b/src/app/components/error/error.component.ts
index 8828f32..8f8fd3b 100644
--- a/src/app/components/error/error.component.ts
+++ b/src/app/components/error/error.component.ts
@@ -1,7 +1,29 @@
-import { Component } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { ConfigService } from '../../service/app.config.service';
+import { AppConfig } from '../../api/appconfig';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-error',
   templateUrl: './error.component.html',
 })
-export class ErrorComponent { }
+export class ErrorComponent implements OnInit, OnDestroy { 
+
+  config: AppConfig;
+  subscription: Subscription;
+
+  constructor(public configService: ConfigService){ }
+
+  ngOnInit(): void {
+    this.config = this.configService.config;
+    this.subscription = this.configService.configUpdate$.subscribe(config => {
+      this.config = config;
+    });
+  }
+
+  ngOnDestroy(): void {
+    if(this.subscription){
+      this.subscription.unsubscribe();
+    }
+  }
+}
diff --git a/src/app/components/landing/landing.component.ts b/src/app/components/landing/landing.component.ts
index 5b75fa2..4fe1ea8 100644
--- a/src/app/components/landing/landing.component.ts
+++ b/src/app/components/landing/landing.component.ts
@@ -1,4 +1,7 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
+import { ConfigService } from '../../service/app.config.service';
+import { AppConfig } from '../../api/appconfig';
+import { Subscription } from 'rxjs';
 @Component({
   selector: 'app-landing',
   templateUrl: './landing.component.html',
@@ -49,19 +52,27 @@ import { Component, OnInit, OnDestroy } from '@angular/core';
     }
   `]
 })
-export class LandingComponent implements OnInit {
+export class LandingComponent implements OnInit, OnDestroy {
   
   themeElement: any;
 
-  constructor() { }
+  config: AppConfig;  
+
+  subscription: Subscription;
+
+  constructor(public configService: ConfigService) { }
 
   ngOnInit(): void {
+    this.config = this.configService.config;
+    this.subscription = this.configService.configUpdate$.subscribe(config => {
+      this.config = config;
+    });
     this.themeElement = document.getElementById('theme-css');
     this.themeElement.setAttribute('href','assets/theme/saga-blue/theme.css');
   }
 
   ngOnDestroy(): void {
-    this.themeElement.setAttribute('href', 'assets/theme/lara-light-indigo/theme.css');
+    this.themeElement.setAttribute('href',`assets/theme/${this.config.theme}/theme.css`);
   }
 
 }
diff --git a/src/app/components/login/login.component.html b/src/app/components/login/login.component.html
index 24c5559..f38c712 100644
--- a/src/app/components/login/login.component.html
+++ b/src/app/components/login/login.component.html
@@ -7,15 +7,15 @@
             <div class="surface-card h-full w-full m-0 py-7 px-4" style="border-radius:53px;">
                 <div class="text-center mb-5">
                     <img src="assets/layout/images/avatar.png" alt="Image" height="50" class="mb-3">
-                    <div class="text-900 text-3xl font-medium mb-3">Welcome, Isabel!</div>
-                    <span class="text-600 font-medium">Sign in to continue</span>
+                    <div class="text-3xl font-medium mb-3" [ngClass]="config.dark ? 'text-900' : 'text-gray-900'">Welcome, Isabel!</div>
+                    <span class="font-medium" [ngClass]="config.dark ? 'text-600' : 'text-gray-600'">Sign in to continue</span>
                 </div>
             
                 <div class="w-full md:w-10 mx-auto">
-                    <label for="email1" class="block text-900 text-xl font-medium mb-2">Email</label>
+                    <label for="email1" class="block text-900 text-xl font-medium mb-2" [ngClass]="config.dark ? 'text-900' : 'text-gray-900'">Email</label>
                     <input id="email1" type="text" pInputText class="w-full mb-3" style="padding:1rem;">
             
-                    <label for="password1" class="block text-900 font-medium text-xl mb-2">Password</label>
+                    <label for="password1" class="block text-900 font-medium text-xl mb-2" [ngClass]="config.dark ? 'text-900' : 'text-gray-900'">Password</label>
                     <p-password id="password1" [(ngModel)]="password" placeholder="Password" [toggleMask]="true" styleClass="w-full mb-3"></p-password>
             
                     <div class="flex align-items-center justify-content-between mb-5">
@@ -25,7 +25,7 @@
                         </div>
                         <a class="font-medium no-underline ml-2 text-blue-500 text-right cursor-pointer">Forgot password?</a>
                     </div>
-                    <button pButton pRipple label="Sign In" class="w-full p-3 text-xl"></button>
+                    <button pButton pRipple label="Sign In" class="w-full p-3 text-xl bg-blue-500 border-none" [ngClass]="config.dark ? 'text-900' : 'text-50'"></button>
                 </div>
             </div>
         </div>
diff --git a/src/app/components/login/login.component.ts b/src/app/components/login/login.component.ts
index 81f11f3..edf5b6b 100644
--- a/src/app/components/login/login.component.ts
+++ b/src/app/components/login/login.component.ts
@@ -1,5 +1,7 @@
-import { Component, OnInit } from '@angular/core';
-
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { ConfigService } from '../../service/app.config.service';
+import { AppConfig } from '../../api/appconfig';
+import { Subscription } from 'rxjs';
 @Component({
   selector: 'app-login',
   templateUrl: './login.component.html',
@@ -20,21 +22,28 @@ import { Component, OnInit } from '@angular/core';
     }
   `]
 })
-export class LoginComponent implements OnInit {
+export class LoginComponent implements OnInit, OnDestroy {
 
   valCheck: string[] = ['remember'];
-  password: string;
-  themeElement: any;
 
-  constructor() { }
+  password: string;
+  
+  config: AppConfig;
+  
+  subscription: Subscription;
+
+  constructor(public configService: ConfigService){ }
 
   ngOnInit(): void {
-    this.themeElement = document.getElementById('theme-css');
-    this.themeElement.setAttribute('href','assets/theme/saga-blue/theme.css');
+    this.config = this.configService.config;
+    this.subscription = this.configService.configUpdate$.subscribe(config => {
+      this.config = config;
+    });
   }
 
   ngOnDestroy(): void {
-    this.themeElement.setAttribute('href', 'assets/theme/lara-light-indigo/theme.css');
+    if(this.subscription){
+      this.subscription.unsubscribe();
+    }
   }
-
 }
diff --git a/src/app/components/notfound/notfound.component.html b/src/app/components/notfound/notfound.component.html
index a5d359d..44375d1 100644
--- a/src/app/components/notfound/notfound.component.html
+++ b/src/app/components/notfound/notfound.component.html
@@ -7,33 +7,33 @@
             <div class="surface-card flex justify-content-center h-full w-full m-0 py-7 px-4" style="border-radius:53px;">
                 <div class="grid flex-column align-items-center">
                     <span class="text-blue-500 font-bold text-3xl">404</span>
-                    <h1 class="text-gray-900 font-bold text-3xl lg:text-5xl mb-2">Looks like you are lost</h1>
-                    <span class="text-gray-600">Requested resource is not available.</span>
+                    <h1 class="font-bold text-3xl lg:text-5xl mb-2" [ngClass]="config.dark ? 'text-900' : 'text-gray-900'">Looks like you are lost</h1>
+                    <span [ngClass]="config.dark ? 'text-600' : 'text-gray-600'">Requested resource is not available.</span>
                     <div class="col-12 flex align-items-center py-5 mt-6 border-300 border-bottom-1">
                         <div class="flex justify-content-center align-items-center bg-cyan-400 border-round" style="height:3.5rem; width:3.5rem;">
-                            <i class="pi pi-fw pi-table text-50 text-2xl"></i>
+                            <i class="pi pi-fw pi-table text-2xl" [ngClass]="config.dark ? 'text-900' : 'text-50'"></i>
                         </div>
                         <div class="ml-4">
-                            <p class="text-gray-900 lg:text-xl font-medium mb-0">Frequently Asked Questions</p>
-                            <span class="text-gray-600 lg:text-xl">Ultricies mi quis hendrerit dolor.</span>
+                            <p class="lg:text-xl font-medium mb-0" [ngClass]="config.dark ? 'text-900' : 'text-gray-900'">Frequently Asked Questions</p>
+                            <span class="lg:text-xl" [ngClass]="config.dark ? 'text-600' : 'text-gray-600'">Ultricies mi quis hendrerit dolor.</span>
                         </div>
                     </div>
                     <div class="col-12 flex align-items-center py-5 border-300 border-bottom-1">
                         <div class="flex justify-content-center align-items-center bg-orange-400 border-round" style="height:3.5rem; width:3.5rem;">
-                            <i class="pi pi-fw pi-question-circle text-50 text-2xl"></i>
+                            <i class="pi pi-fw pi-question-circle text-2xl" [ngClass]="config.dark ? 'text-900' : 'text-50'"></i>
                         </div>
                         <div class="ml-4">
-                            <p class="text-gray-900 lg:text-xl font-medium mb-0">Solution Center</p>
-                            <span class="text-gray-600 lg:text-xl">Phasellus faucibus scelerisque eleifend.</span>
+                            <p class="lg:text-xl font-medium mb-0" [ngClass]="config.dark ? 'text-900' : 'text-gray-900'">Solution Center</p>
+                            <span class="lg:text-xl" [ngClass]="config.dark ? 'text-600' : 'text-gray-600'">Phasellus faucibus scelerisque eleifend.</span>
                         </div>
                     </div>
                     <div class="col-12 flex align-items-center py-5 border-300 border-bottom-1">
                         <div class="flex justify-content-center align-items-center bg-indigo-400 border-round" style="height:3.5rem; width:3.5rem;">
-                            <i class="pi pi-fw pi-unlock text-50 text-2xl"></i>
+                            <i class="pi pi-fw pi-unlock text-2xl" [ngClass]="config.dark ? 'text-900' : 'text-50'"></i>
                         </div>
                         <div class="ml-4">
-                            <p class="text-gray-900 lg:text-xl font-medium mb-0">Permission Manager</p>
-                            <span class="text-gray-600 lg:text-xl">Accumsan in nisl nisi scelerisque</span>
+                            <p class="lg:text-xl font-medium mb-0" [ngClass]="config.dark ? 'text-900' : 'text-gray-900'">Permission Manager</p>
+                            <span class="lg:text-xl" [ngClass]="config.dark ? 'text-600' : 'text-gray-600'">Accumsan in nisl nisi scelerisque</span>
                         </div>
                     </div>
                     <div class="col-12 mt-5 text-center">
diff --git a/src/app/components/notfound/notfound.component.ts b/src/app/components/notfound/notfound.component.ts
index 1d57db4..d607612 100644
--- a/src/app/components/notfound/notfound.component.ts
+++ b/src/app/components/notfound/notfound.component.ts
@@ -1,7 +1,29 @@
-import { Component } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { ConfigService } from '../../service/app.config.service';
+import { AppConfig } from '../../api/appconfig';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-notfound',
   templateUrl: './notfound.component.html',
 })
-export class NotfoundComponent { }
+export class NotfoundComponent implements OnInit, OnDestroy { 
+  
+  config: AppConfig;
+  subscription: Subscription;
+
+  constructor(public configService: ConfigService){ }
+
+  ngOnInit(): void {
+    this.config = this.configService.config;
+    this.subscription = this.configService.configUpdate$.subscribe(config => {
+      this.config = config;
+    });
+  }
+
+  ngOnDestroy(): void {
+    if(this.subscription){
+      this.subscription.unsubscribe();
+    }
+  }
+}

From 9ab4702fb66b3472f0fcc9a6cb57c25fa43d8c1a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=87etin?=
 <69278826+cetincakiroglu@users.noreply.github.com>
Date: Thu, 20 Jan 2022 13:54:11 +0300
Subject: [PATCH 2/4] update pages

---
 .../components/access/access.component.html   |  6 ++---
 src/app/components/access/access.component.ts | 27 +++----------------
 src/app/components/error/error.component.html |  6 ++---
 src/app/components/error/error.component.ts   | 26 ++----------------
 src/app/components/login/login.component.html | 16 +++++------
 src/app/components/login/login.component.ts   |  2 ++
 .../notfound/notfound.component.html          | 22 +++++++--------
 .../components/notfound/notfound.component.ts | 26 ++----------------
 8 files changed, 34 insertions(+), 97 deletions(-)

diff --git a/src/app/components/access/access.component.html b/src/app/components/access/access.component.html
index 99122f3..c03f388 100644
--- a/src/app/components/access/access.component.html
+++ b/src/app/components/access/access.component.html
@@ -7,10 +7,10 @@
             <div class="surface-card h-full w-full m-0 py-7 px-4" style="border-radius:53px;">
                 <div class="grid flex flex-column align-items-center">
                     <div class="flex justify-content-center align-items-center bg-orange-500 border-circle" style="width:3.2rem; height:3.2rem;">
-                        <i class="pi pi-fw pi-lock text-2xl" [ngClass]="config.dark ? 'text-900' : 'text-50'"></i>
+                        <i class="text-50 pi pi-fw pi-lock text-2xl"></i>
                     </div>
-                    <h1 class="font-bold text-4xl lg:text-5xl mb-2" [ngClass]="config.dark ? 'text-900' : 'text-gray-900'">Access Denied</h1>
-                    <span class="text-center" [ngClass]="config.dark ? 'text-600' : 'text-gray-600'">You do not have the necesary permisions. Please contact admins.</span>
+                    <h1 class="text-900 font-bold text-4xl lg:text-5xl mb-2">Access Denied</h1>
+                    <span class="text-600 text-center">You do not have the necesary permisions. Please contact admins.</span>
                     <img src="assets/layout/images/asset-access.svg" alt="Access denied" class="mt-5" width="80%">
                     <div class="col-12 mt-5 text-center">
                         <i class="pi pi-fw pi-arrow-left text-blue-500 mr-2" style="vertical-align:center;"></i><a href="#" class="text-blue-500">Go to Dashboard</a>
diff --git a/src/app/components/access/access.component.ts b/src/app/components/access/access.component.ts
index 1867c97..401b3be 100644
--- a/src/app/components/access/access.component.ts
+++ b/src/app/components/access/access.component.ts
@@ -1,28 +1,7 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { ConfigService } from '../../service/app.config.service';
-import { AppConfig } from '../../api/appconfig';
-import { Subscription } from 'rxjs';
+import { Component } from '@angular/core';
+
 @Component({
   selector: 'app-access',
   templateUrl: './access.component.html',
 })
-export class AccessComponent implements OnInit, OnDestroy {
-  
-  config: AppConfig;
-  subscription: Subscription;
-
-  constructor(public configService: ConfigService){ }
-
-  ngOnInit(): void {
-    this.config = this.configService.config;
-    this.subscription = this.configService.configUpdate$.subscribe(config => {
-      this.config = config;
-    });
-  }
-
-  ngOnDestroy(): void {
-    if(this.subscription){
-      this.subscription.unsubscribe();
-    }
-  }
-}
+export class AccessComponent {}
\ No newline at end of file
diff --git a/src/app/components/error/error.component.html b/src/app/components/error/error.component.html
index 9a19020..f65429a 100644
--- a/src/app/components/error/error.component.html
+++ b/src/app/components/error/error.component.html
@@ -7,10 +7,10 @@
             <div class="surface-card h-full w-full m-0 py-7 px-4" style="border-radius:53px;">
                 <div class="grid flex flex-column align-items-center">
                     <div class="flex justify-content-center align-items-center bg-pink-500 border-circle" style="height:3.2rem; width:3.2rem;">
-                        <i class="pi pi-fw pi-exclamation-circle text-2xl" [ngClass]="config.dark ? 'text-900' : 'text-50'"></i>
+                        <i class="pi pi-fw pi-exclamation-circle text-2xl text-900"></i>
                     </div>
-                    <h1 class="font-bold text-5xl mb-2" [ngClass]="config.dark ? 'text-900' : 'text-gray-900'">Error Occured</h1>
-                    <span [ngClass]="config.dark ? 'text-600' : 'text-gray-600'">Requested resource is not available.</span>
+                    <h1 class="text-900 font-bold text-5xl mb-2">Error Occured</h1>
+                    <span class="text-600">Requested resource is not available.</span>
                     <img src="assets/layout/images/asset-error.svg" alt="Error" class="mt-5" width="80%">
                     <div class="col-12 mt-5 text-center">
                         <i class="pi pi-fw pi-arrow-left text-blue-500 mr-2" style="vertical-align:center;"></i><a href="#" class="text-blue-500">Go to Dashboard</a>
diff --git a/src/app/components/error/error.component.ts b/src/app/components/error/error.component.ts
index 8f8fd3b..fff1795 100644
--- a/src/app/components/error/error.component.ts
+++ b/src/app/components/error/error.component.ts
@@ -1,29 +1,7 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { ConfigService } from '../../service/app.config.service';
-import { AppConfig } from '../../api/appconfig';
-import { Subscription } from 'rxjs';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-error',
   templateUrl: './error.component.html',
 })
-export class ErrorComponent implements OnInit, OnDestroy { 
-
-  config: AppConfig;
-  subscription: Subscription;
-
-  constructor(public configService: ConfigService){ }
-
-  ngOnInit(): void {
-    this.config = this.configService.config;
-    this.subscription = this.configService.configUpdate$.subscribe(config => {
-      this.config = config;
-    });
-  }
-
-  ngOnDestroy(): void {
-    if(this.subscription){
-      this.subscription.unsubscribe();
-    }
-  }
-}
+export class ErrorComponent {}
\ No newline at end of file
diff --git a/src/app/components/login/login.component.html b/src/app/components/login/login.component.html
index f38c712..3b6922f 100644
--- a/src/app/components/login/login.component.html
+++ b/src/app/components/login/login.component.html
@@ -1,21 +1,21 @@
 <div class="surface-card flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
     <div class="grid justify-content-center p-2 lg:p-0" style="min-width:80%">
         <div class="col-12 mt-5 xl:mt-0 text-center">
-            <img src="assets/layout/images/logo-blue.svg" alt="Sakai logo" class="mb-5" style="width:81px; height:60px;">
+            <img src="assets/layout/images/{{config.dark ? 'logo-white' : 'logo-dark'}}.svg" alt="Sakai logo" class="mb-5" style="width:81px; height:60px;">
         </div>
-        <div class="col-12 xl:col-6" style="border-radius:56px; padding:0.3rem; background: linear-gradient(180deg, rgba(33, 150, 243, 0.4) 10%, rgba(33, 150, 243, 0) 30%);">
+        <div class="col-12 xl:col-6" style="border-radius:56px; padding:0.3rem; background: linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%);">
             <div class="surface-card h-full w-full m-0 py-7 px-4" style="border-radius:53px;">
                 <div class="text-center mb-5">
                     <img src="assets/layout/images/avatar.png" alt="Image" height="50" class="mb-3">
-                    <div class="text-3xl font-medium mb-3" [ngClass]="config.dark ? 'text-900' : 'text-gray-900'">Welcome, Isabel!</div>
-                    <span class="font-medium" [ngClass]="config.dark ? 'text-600' : 'text-gray-600'">Sign in to continue</span>
+                    <div class="text-900 text-3xl font-medium mb-3">Welcome, Isabel!</div>
+                    <span class="text-600 font-medium">Sign in to continue</span>
                 </div>
             
                 <div class="w-full md:w-10 mx-auto">
-                    <label for="email1" class="block text-900 text-xl font-medium mb-2" [ngClass]="config.dark ? 'text-900' : 'text-gray-900'">Email</label>
+                    <label for="email1" class="block text-900 text-xl font-medium mb-2">Email</label>
                     <input id="email1" type="text" pInputText class="w-full mb-3" style="padding:1rem;">
             
-                    <label for="password1" class="block text-900 font-medium text-xl mb-2" [ngClass]="config.dark ? 'text-900' : 'text-gray-900'">Password</label>
+                    <label for="password1" class="block text-900 font-medium text-xl mb-2">Password</label>
                     <p-password id="password1" [(ngModel)]="password" placeholder="Password" [toggleMask]="true" styleClass="w-full mb-3"></p-password>
             
                     <div class="flex align-items-center justify-content-between mb-5">
@@ -23,9 +23,9 @@
                             <p-checkbox id="rememberme1" [binary]="true" styleClass="mr-2"></p-checkbox>
                             <label for="rememberme1">Remember me</label>
                         </div>
-                        <a class="font-medium no-underline ml-2 text-blue-500 text-right cursor-pointer">Forgot password?</a>
+                        <a class="font-medium no-underline ml-2 text-right cursor-pointer" style="color: var(--primary-color)">Forgot password?</a>
                     </div>
-                    <button pButton pRipple label="Sign In" class="w-full p-3 text-xl bg-blue-500 border-none" [ngClass]="config.dark ? 'text-900' : 'text-50'"></button>
+                    <button pButton pRipple label="Sign In" class="w-full p-3 text-xl"></button>
                 </div>
             </div>
         </div>
diff --git a/src/app/components/login/login.component.ts b/src/app/components/login/login.component.ts
index edf5b6b..0bca5d9 100644
--- a/src/app/components/login/login.component.ts
+++ b/src/app/components/login/login.component.ts
@@ -14,11 +14,13 @@ import { Subscription } from 'rxjs';
     :host ::ng-deep .pi-eye{
       transform:scale(1.6);
       margin-right: 1rem;
+      color: var(--primary-color) !important;
     }
 
     :host ::ng-deep .pi-eye-slash{
       transform:scale(1.6);
       margin-right: 1rem;
+      color: var(--primary-color) !important;
     }
   `]
 })
diff --git a/src/app/components/notfound/notfound.component.html b/src/app/components/notfound/notfound.component.html
index 44375d1..242095f 100644
--- a/src/app/components/notfound/notfound.component.html
+++ b/src/app/components/notfound/notfound.component.html
@@ -7,33 +7,33 @@
             <div class="surface-card flex justify-content-center h-full w-full m-0 py-7 px-4" style="border-radius:53px;">
                 <div class="grid flex-column align-items-center">
                     <span class="text-blue-500 font-bold text-3xl">404</span>
-                    <h1 class="font-bold text-3xl lg:text-5xl mb-2" [ngClass]="config.dark ? 'text-900' : 'text-gray-900'">Looks like you are lost</h1>
-                    <span [ngClass]="config.dark ? 'text-600' : 'text-gray-600'">Requested resource is not available.</span>
+                    <h1 class="text-900 font-bold text-3xl lg:text-5xl mb-2">Looks like you are lost</h1>
+                    <span class="text-600">Requested resource is not available.</span>
                     <div class="col-12 flex align-items-center py-5 mt-6 border-300 border-bottom-1">
                         <div class="flex justify-content-center align-items-center bg-cyan-400 border-round" style="height:3.5rem; width:3.5rem;">
-                            <i class="pi pi-fw pi-table text-2xl" [ngClass]="config.dark ? 'text-900' : 'text-50'"></i>
+                            <i class="text-50 pi pi-fw pi-table text-2xl"></i>
                         </div>
                         <div class="ml-4">
-                            <p class="lg:text-xl font-medium mb-0" [ngClass]="config.dark ? 'text-900' : 'text-gray-900'">Frequently Asked Questions</p>
-                            <span class="lg:text-xl" [ngClass]="config.dark ? 'text-600' : 'text-gray-600'">Ultricies mi quis hendrerit dolor.</span>
+                            <p class="text-900 lg:text-xl font-medium mb-0">Frequently Asked Questions</p>
+                            <span class="text-600 lg:text-xl">Ultricies mi quis hendrerit dolor.</span>
                         </div>
                     </div>
                     <div class="col-12 flex align-items-center py-5 border-300 border-bottom-1">
                         <div class="flex justify-content-center align-items-center bg-orange-400 border-round" style="height:3.5rem; width:3.5rem;">
-                            <i class="pi pi-fw pi-question-circle text-2xl" [ngClass]="config.dark ? 'text-900' : 'text-50'"></i>
+                            <i class="pi pi-fw pi-question-circle text-50 text-2xl"></i>
                         </div>
                         <div class="ml-4">
-                            <p class="lg:text-xl font-medium mb-0" [ngClass]="config.dark ? 'text-900' : 'text-gray-900'">Solution Center</p>
-                            <span class="lg:text-xl" [ngClass]="config.dark ? 'text-600' : 'text-gray-600'">Phasellus faucibus scelerisque eleifend.</span>
+                            <p class="text-900 lg:text-xl font-medium mb-0">Solution Center</p>
+                            <span class="text-600 lg:text-xl">Phasellus faucibus scelerisque eleifend.</span>
                         </div>
                     </div>
                     <div class="col-12 flex align-items-center py-5 border-300 border-bottom-1">
                         <div class="flex justify-content-center align-items-center bg-indigo-400 border-round" style="height:3.5rem; width:3.5rem;">
-                            <i class="pi pi-fw pi-unlock text-2xl" [ngClass]="config.dark ? 'text-900' : 'text-50'"></i>
+                            <i class="pi pi-fw pi-unlock text-50 text-2xl"></i>
                         </div>
                         <div class="ml-4">
-                            <p class="lg:text-xl font-medium mb-0" [ngClass]="config.dark ? 'text-900' : 'text-gray-900'">Permission Manager</p>
-                            <span class="lg:text-xl" [ngClass]="config.dark ? 'text-600' : 'text-gray-600'">Accumsan in nisl nisi scelerisque</span>
+                            <p class="text-900 lg:text-xl font-medium mb-0">Permission Manager</p>
+                            <span class="text-600 lg:text-xl">Accumsan in nisl nisi scelerisque</span>
                         </div>
                     </div>
                     <div class="col-12 mt-5 text-center">
diff --git a/src/app/components/notfound/notfound.component.ts b/src/app/components/notfound/notfound.component.ts
index d607612..567c8c3 100644
--- a/src/app/components/notfound/notfound.component.ts
+++ b/src/app/components/notfound/notfound.component.ts
@@ -1,29 +1,7 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { ConfigService } from '../../service/app.config.service';
-import { AppConfig } from '../../api/appconfig';
-import { Subscription } from 'rxjs';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-notfound',
   templateUrl: './notfound.component.html',
 })
-export class NotfoundComponent implements OnInit, OnDestroy { 
-  
-  config: AppConfig;
-  subscription: Subscription;
-
-  constructor(public configService: ConfigService){ }
-
-  ngOnInit(): void {
-    this.config = this.configService.config;
-    this.subscription = this.configService.configUpdate$.subscribe(config => {
-      this.config = config;
-    });
-  }
-
-  ngOnDestroy(): void {
-    if(this.subscription){
-      this.subscription.unsubscribe();
-    }
-  }
-}
+export class NotfoundComponent {}
\ No newline at end of file

From f93aa058c9d80659998ec3217858a9df6fcb2759 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=87etin?=
 <69278826+cetincakiroglu@users.noreply.github.com>
Date: Thu, 20 Jan 2022 13:55:19 +0300
Subject: [PATCH 3/4] Merge branch 'landing' of
 https://github.com/primefaces/sakai-ng into landing

---
 src/app/app.menu.component.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/app/app.menu.component.ts b/src/app/app.menu.component.ts
index 9ac5d8f..6c203a8 100644
--- a/src/app/app.menu.component.ts
+++ b/src/app/app.menu.component.ts
@@ -55,15 +55,16 @@ export class AppMenuComponent implements OnInit {
                 ]
             },
             {
-                label:'UI Blocks',
+                label:'Prime Blocks',
                 items:[
                     {label: 'Free Blocks', icon: 'pi pi-fw pi-eye', routerLink: ['/blocks'], badge: 'NEW'},
                     {label: 'All Blocks', icon: 'pi pi-fw pi-globe', url: ['https://www.primefaces.org/primeblocks-ng'], target: '_blank'},
                 ]
             },
-            {label:'Icons',
+            {label:'Utilities',
                 items:[
                     {label: 'PrimeIcons', icon: 'pi pi-fw pi-prime', routerLink: ['/icons']},
+                    {label: 'PrimeFlex', icon: 'pi pi-fw pi-desktop', url: ['https://www.primefaces.org/primeflex/'], target: '_blank'},
                 ]
             },
             {

From b90be59e9044796f057d36c0c8db65d2e48fc226 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=87etin?=
 <69278826+cetincakiroglu@users.noreply.github.com>
Date: Thu, 20 Jan 2022 14:26:39 +0300
Subject: [PATCH 4/4] update landing

---
 .../components/landing/landing.component.html | 146 +++++++++---------
 .../components/landing/landing.component.ts   |   8 +-
 2 files changed, 76 insertions(+), 78 deletions(-)

diff --git a/src/app/components/landing/landing.component.html b/src/app/components/landing/landing.component.html
index f96ae3d..1cf4b67 100644
--- a/src/app/components/landing/landing.component.html
+++ b/src/app/components/landing/landing.component.html
@@ -1,37 +1,37 @@
 <div class="surface-card overflow-hidden">
     <div class="py-4 px-4 mx-0 md:mx-6 lg:mx-8 lg:px-8 flex align-items-center justify-content-between relative lg:static">
         <a class="flex align-items-center">
-            <img src="assets/layout/images/logo-blue.svg" alt="Sakai Logo" height="50" class="mr-0 lg:mr-2"><span class="text-gray-900 font-medium text-2xl line-height-3 mr-8">SAKAI</span>
+            <img src="assets/layout/images/{{config.dark ? 'logo-white' : 'logo-dark'}}.svg" alt="Sakai Logo" height="50" class="mr-0 lg:mr-2"><span class="text-900 font-medium text-2xl line-height-3 mr-8">SAKAI</span>
         </a>
         <a pRipple class="cursor-pointer block lg:hidden text-700" pStyleClass="@next" enterClass="hidden" leaveToClass="hidden" [hideOnOutsideClick]="true">
             <i class="pi pi-bars text-4xl"></i>
         </a>
-        <div class="align-items-center flex-grow-1 justify-content-between hidden lg:flex absolute lg:static w-full surface-overlay left-0 px-6 lg:px-0 z-2" style="top:92%">
+        <div class="align-items-center flex-grow-1 justify-content-between hidden lg:flex absolute lg:static w-full left-0 px-6 lg:px-0 z-2" style="top:92%">
             <ul class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row cursor-pointer">
                 <li>
-                    <a pRipple class="flex m-0 md:ml-5 px-0 py-3 text-gray-900 font-medium line-height-3">
+                    <a pRipple class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3">
                         <span>Home</span>
                     </a>
                 </li>
                 <li>
-                    <a pRipple class="flex m-0 md:ml-5 px-0 py-3 text-gray-900 font-medium line-height-3">
+                    <a pRipple class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3">
                         <span>Features</span>
                     </a>
                 </li>
                 <li>
-                    <a pRipple class="flex m-0 md:ml-5 px-0 py-3 text-gray-900 font-medium line-height-3">
+                    <a pRipple class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3">
                         <span>Pricing</span>
                     </a>
                 </li>
                 <li>
-                    <a pRipple class="flex m-0 md:ml-5 px-0 py-3 text-gray-900 font-medium line-height-3">
+                    <a pRipple class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3">
                         <span>Contact</span>
                     </a>
                 </li>
             </ul>
             <div class="flex justify-content-between lg:block border-top-1 lg:border-top-none surface-border py-3 lg:py-0 mt-3 lg:mt-0">
                 <button pButton pRipple label="Login" class="p-button-text p-button-rounded border-none font-light line-height-2 text-blue-500"></button>
-                <button pButton pRipple label="Register" class="p-button-rounded border-none ml-5 font-light line-height-2 bg-blue-500"></button>
+                <button pButton pRipple label="Register" class="p-button-rounded border-none ml-5 font-light line-height-2 bg-blue-500" style="color:#fff"></button>
             </div>
         </div>
     </div>
@@ -40,7 +40,7 @@
         <div class="mx-4 md:mx-8 mt-0 md:mt-4">
             <h1 class="text-6xl font-bold text-gray-900 line-height-2"><span class="font-light block">Eu sem integer</span>eget magna fermentum</h1>
             <p class="font-normal text-2xl line-height-3 md:mt-3 text-gray-700">Sed blandit libero volutpat sed cras. Fames ac turpis egestas integer. Placerat in egestas erat... </p>
-            <button pButton pRipple type="button" label="Get Started" class="p-button-rounded text-xl border-none mt-5 bg-blue-500 font-normal line-height-3 px-3"></button>
+            <button pButton pRipple type="button" label="Get Started" class="p-button-rounded text-xl border-none mt-5 bg-blue-500 font-normal line-height-3 px-3" style="color:#fff"></button>
         </div>
         <img src="assets/layout/images/screen-1.png" alt="" class="sm:mt-5 md:mt-0" style="right:10%;">
     </div>
@@ -48,8 +48,8 @@
     <div class="py-4 px-4 lg:px-8 mt-5 mx-0 lg:mx-8">
         <div class="grid justify-content-center">
             <div class="col-12 text-center mt-8 mb-4">
-                <h2 class="text-gray-900 font-normal mb-2">Marvelous Features</h2>
-                <span class="text-gray-600 text-2xl">Placerat in egestas erat...</span>
+                <h2 class="text-900 font-normal mb-2">Marvelous Features</h2>
+                <span class="text-600 text-2xl">Placerat in egestas erat...</span>
             </div>
 
             <div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 lg:pb-5 mt-4 lg:mt-0">
@@ -58,8 +58,8 @@
                         <div class="flex align-items-center justify-content-center bg-yellow-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
                             <i class="pi pi-fw pi-users text-2xl text-yellow-700"></i>
                         </div>
-                        <h5 class="mb-2 text-gray-900">Easy to Use</h5>
-                        <span class="text-gray-600">Posuere morbi leo urna molestie.</span>
+                        <h5 class="mb-2 text-900">Easy to Use</h5>
+                        <span class="text-600">Posuere morbi leo urna molestie.</span>
                     </div>
                 </div>
             </div>
@@ -70,8 +70,8 @@
                         <div class="flex align-items-center justify-content-center bg-cyan-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
                             <i class="pi pi-fw pi-palette text-2xl text-cyan-700"></i>
                         </div>
-                        <h5 class="mb-2 text-gray-900">Fresh Design</h5>
-                        <span class="text-gray-600">Semper risus in hendrerit.</span>
+                        <h5 class="mb-2 text-900">Fresh Design</h5>
+                        <span class="text-600">Semper risus in hendrerit.</span>
                     </div>
                 </div>
             </div>
@@ -82,8 +82,8 @@
                         <div class="flex align-items-center justify-content-center bg-indigo-200" style="width:3.5rem;height:3.5rem; border-radius:10px;">
                             <i class="pi pi-fw pi-map text-2xl text-indigo-700"></i>
                         </div>
-                        <h5 class="mb-2 text-gray-900">Well Documented</h5>
-                        <span class="text-gray-600">Non arcu risus quis varius quam quisque.</span>
+                        <h5 class="mb-2 text-900">Well Documented</h5>
+                        <span class="text-600">Non arcu risus quis varius quam quisque.</span>
                     </div>
                 </div>
             </div>
@@ -94,8 +94,8 @@
                         <div class="flex align-items-center justify-content-center bg-bluegray-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
                             <i class="pi pi-fw pi-id-card text-2xl text-bluegray-700"></i>
                         </div>
-                        <h5 class="mb-2 text-gray-900">Responsive Layout</h5>
-                        <span class="text-gray-600">Nulla malesuada pellentesque elit.</span>
+                        <h5 class="mb-2 text-900">Responsive Layout</h5>
+                        <span class="text-600">Nulla malesuada pellentesque elit.</span>
                     </div>
                 </div>
             </div>
@@ -106,8 +106,8 @@
                         <div class="flex align-items-center justify-content-center bg-orange-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
                             <i class="pi pi-fw pi-star text-2xl text-orange-700"></i>
                         </div>
-                        <h5 class="mb-2 text-gray-900">Clean Code</h5>
-                        <span class="text-gray-600">Condimentum lacinia quis vel eros.</span>
+                        <h5 class="mb-2 text-900">Clean Code</h5>
+                        <span class="text-600">Condimentum lacinia quis vel eros.</span>
                     </div>
                 </div>
             </div>
@@ -118,8 +118,8 @@
                         <div class="flex align-items-center justify-content-center bg-pink-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
                             <i class="pi pi-fw pi-moon text-2xl text-pink-700"></i>
                         </div>
-                        <h5 class="mb-2 text-gray-900">Dark Mode</h5>
-                        <span class="text-gray-600">Convallis tellus id interdum velit laoreet.</span>
+                        <h5 class="mb-2 text-900">Dark Mode</h5>
+                        <span class="text-600">Convallis tellus id interdum velit laoreet.</span>
                     </div>
                 </div>
             </div>
@@ -130,8 +130,8 @@
                         <div class="flex align-items-center justify-content-center bg-teal-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
                             <i class="pi pi-fw pi-shopping-cart text-2xl text-teal-700"></i>
                         </div>
-                        <h5 class="mb-2 text-gray-900">Ready to Use</h5>
-                        <span class="text-gray-600">Mauris sit amet massa vitae.</span>
+                        <h5 class="mb-2 text-900">Ready to Use</h5>
+                        <span class="text-600">Mauris sit amet massa vitae.</span>
                     </div>
                 </div>
             </div>
@@ -142,8 +142,8 @@
                         <div class="flex align-items-center justify-content-center bg-blue-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
                             <i class="pi pi-fw pi-globe text-2xl text-blue-700"></i>
                         </div>
-                        <h5 class="mb-2 text-gray-900">Modern Practices</h5>
-                        <span class="text-gray-600">Elementum nibh tellus molestie nunc non.</span>
+                        <h5 class="mb-2 text-900">Modern Practices</h5>
+                        <span class="text-600">Elementum nibh tellus molestie nunc non.</span>
                     </div>
                 </div>
             </div>
@@ -154,8 +154,8 @@
                         <div class="flex align-items-center justify-content-center bg-purple-200 mb-3" style="width:3.5rem;height:3.5rem; border-radius:10px;">
                             <i class="pi pi-fw pi-eye text-2xl text-purple-700"></i>
                         </div>
-                        <h5 class="mb-2 text-gray-900">Privacy</h5>
-                        <span class="text-gray-600">Neque egestas congue quisque.</span>
+                        <h5 class="mb-2 text-900">Privacy</h5>
+                        <span class="text-600">Neque egestas congue quisque.</span>
                     </div>
                 </div>
             </div>
@@ -165,7 +165,7 @@
                     <h3 class="text-gray-900 mb-2">Joséphine Miller</h3>
                     <span class="text-gray-600 text-2xl">Peak Interactive</span>
                     <p class="text-gray-900 sm:line-height-2 md:line-height-4 text-2xl mt-4" style="max-width:800px;">“Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”</p>
-                    <img src="assets/layout/images/peak-logo.svg" class="mt-4" alt="">
+                    <img src="assets/layout/images/peak-logo.svg" class="mt-4" alt="Company logo">
 
                 </div>
             </div>
@@ -174,8 +174,8 @@
         
     <div class="py-4 px-4 lg:px-8 mx-0 my-6 lg:mx-8">
         <div class="text-center">
-            <h2 class="text-gray-900 font-normal mb-2">Powerful Everywhere</h2>
-            <span class="text-gray-600 text-2xl">Amet consectetur adipiscing elit...</span>
+            <h2 class="text-900 font-normal mb-2">Powerful Everywhere</h2>
+            <span class="text-600 text-2xl">Amet consectetur adipiscing elit...</span>
         </div>
 
         <div class="grid mt-8 pb-2 md:pb-8">
@@ -187,8 +187,8 @@
                 <div class="flex align-items-center justify-content-center bg-purple-200" style="width:4.2rem; height:4.2rem; border-radius: 10px;">
                     <i class="pi pi-fw pi-mobile text-5xl text-purple-700"></i>
                 </div>
-                <h2 class="line-height-1 text-gray-900 text-4xl font-normal">Congue Quisque Egestas</h2>
-                <span class="text-gray-700 text-2xl line-height-3 ml-0 md:ml-2" style="max-width:650px;">Lectus arcu bibendum at varius vel pharetra vel turpis nunc. Eget aliquet nibh praesent tristique magna sit amet purus gravida. Sit amet mattis vulputate enim nulla aliquet.</span>
+                <h2 class="line-height-1 text-900 text-4xl font-normal">Congue Quisque Egestas</h2>
+                <span class="text-700 text-2xl line-height-3 ml-0 md:ml-2" style="max-width:650px;">Lectus arcu bibendum at varius vel pharetra vel turpis nunc. Eget aliquet nibh praesent tristique magna sit amet purus gravida. Sit amet mattis vulputate enim nulla aliquet.</span>
             </div>
         </div>
 
@@ -197,8 +197,8 @@
                 <div class="flex align-items-center justify-content-center bg-yellow-200" style="width:4.2rem; height:4.2rem; border-radius:10px;">
                     <i class="pi pi-fw pi-desktop text-5xl text-yellow-700"></i>
                 </div>
-                <h2 class="line-height-1 text-gray-900 text-4xl font-normal">Celerisque Eu Ultrices</h2>
-                <span class="text-gray-700 text-2xl line-height-3 mr-0 md:mr-2" style="max-width:650px;">Adipiscing commodo elit at imperdiet dui. Viverra nibh cras pulvinar mattis nunc sed blandit libero. Suspendisse in est ante in. Mauris pharetra et ultrices neque ornare aenean euismod elementum nisi.</span>
+                <h2 class="line-height-1 text-900 text-4xl font-normal">Celerisque Eu Ultrices</h2>
+                <span class="text-700 text-2xl line-height-3 mr-0 md:mr-2" style="max-width:650px;">Adipiscing commodo elit at imperdiet dui. Viverra nibh cras pulvinar mattis nunc sed blandit libero. Suspendisse in est ante in. Mauris pharetra et ultrices neque ornare aenean euismod elementum nisi.</span>
             </div>
 
             <div class="flex justify-content-end flex-order-1 sm:flex-order-2 col-12 lg:col-6 bg-yellow-100 p-0" style="border-radius:8px;">
@@ -209,22 +209,22 @@
 
     <div class="py-4 px-4 lg:px-8 my-2 md:my-4">
         <div class="text-center">
-            <h2 class="text-gray-900 font-normal mb-2">Matchless Pricing</h2>
-            <span class="text-gray-600 text-2xl">Amet consectetur adipiscing elit...</span>
+            <h2 class="text-900 font-normal mb-2">Matchless Pricing</h2>
+            <span class="text-600 text-2xl">Amet consectetur adipiscing elit...</span>
         </div>
 
        <div class="grid justify-content-between mt-8 md:mt-0">
             <div class="col-12 lg:col-4 p-0 md:p-3">
                 <div class="p-3 flex flex-column border-200" style="border:2px solid; border-radius:10px;">
-                    <h3 class="text-gray-900 text-center">Free</h3>
+                    <h3 class="text-900 text-center">Free</h3>
                     <img src="assets/layout/images/free.png" class="w-10 h-10 mx-auto" alt="">
                     <div class="my-5 text-center">
-                        <span class="text-5xl font-bold mr-2 text-gray-900">$0</span>
-                        <span class="text-gray-600">per month</span>
-                        <button pButton pRipple label="Get Started" class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light line-height-2 bg-blue-500"></button>
+                        <span class="text-5xl font-bold mr-2 text-900">$0</span>
+                        <span class="text-600">per month</span>
+                        <button pButton pRipple label="Get Started" class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light line-height-2 bg-blue-500" style="color:#fff"></button>
                     </div>
                     <p-divider class="w-full bg-surface-200"></p-divider>
-                    <ul class="my-5 list-none p-0 flex text-gray-900 flex-column">
+                    <ul class="my-5 list-none p-0 flex text-900 flex-column">
                         <li class="py-2">
                             <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
                             <span class="text-xl line-height-3">Responsive Layout</span>
@@ -247,15 +247,15 @@
             
             <div class="col-12 lg:col-4 p-0 md:p-3 mt-4 md:mt-0">
                 <div class="p-3 flex flex-column border-200" style="border:2px solid; border-radius:10px;">
-                    <h3 class="text-gray-900 text-center">Startup</h3>
+                    <h3 class="text-900 text-center">Startup</h3>
                     <img src="assets/layout/images/free.png" class="w-10 h-10 mx-auto" alt="">
                     <div class="my-5 text-center">
-                        <span class="text-5xl font-bold mr-2 text-gray-900">$1</span>
-                        <span class="text-gray-600">per month</span>
-                        <button pButton pRipple label="Try Free" class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light line-height-2 bg-blue-500"></button>
+                        <span class="text-5xl font-bold mr-2 text-900">$1</span>
+                        <span class="text-600">per month</span>
+                        <button pButton pRipple label="Try Free" class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light line-height-2 bg-blue-500" style="color:#fff"></button>
                     </div>
                     <p-divider class="w-full bg-surface-200"></p-divider>
-                    <ul class="my-5 list-none p-0 flex text-gray-900 flex-column">
+                    <ul class="my-5 list-none p-0 flex text-900 flex-column">
                         <li class="py-2">
                             <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
                             <span class="text-xl line-height-3">Responsive Layout</span>
@@ -278,15 +278,15 @@
             
             <div class="col-12 lg:col-4 p-0 md:p-3 mt-4 md:mt-0">
                 <div class="p-3 flex flex-column border-cyan-200" style="border:2px solid; border-radius:10px;">
-                    <h3 class="text-gray-900 text-center">Free</h3>
+                    <h3 class="text-900 text-center">Free</h3>
                     <img src="assets/layout/images/free.png" class="w-10 h-10 mx-auto" alt="">
                     <div class="my-5 text-center">
-                        <span class="text-5xl font-bold mr-2 text-gray-900">$999</span>
-                        <span class="text-gray-600">per month</span>
-                        <button pButton pRipple label="Get a Quote" class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light line-height-2 bg-blue-500"></button>
+                        <span class="text-5xl font-bold mr-2 text-900">$999</span>
+                        <span class="text-600">per month</span>
+                        <button pButton pRipple label="Get a Quote" class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light line-height-2 bg-blue-500" style="color:#fff"></button>
                     </div>
                     <p-divider class="w-full bg-surface-200"></p-divider>
-                    <ul class="my-5 list-none p-0 flex text-gray-900 flex-column">
+                    <ul class="my-5 list-none p-0 flex text-900 flex-column">
                         <li class="py-2">
                             <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
                             <span class="text-xl line-height-3">Responsive Layout</span>
@@ -313,42 +313,42 @@
         <div class="grid justify-content-between">
             <div class="col-12 md:col-2" style="margin-top:-1.5rem;">
                 <div class="flex flex-wrap align-items-center justify-content-center md:justify-content-start md:mb-0 mb-3">
-                    <img src="assets/layout/images/logo-blue.svg" alt="footer sections" width="50" height="50" class="mr-2">
-                    <h4 class="font-medium text-3xl text-gray-900">SAKAI</h4>
+                    <img src="assets/layout/images/{{config.dark ? 'logo-white' : 'logo-dark'}}.svg" alt="footer sections" width="50" height="50" class="mr-2">
+                    <h4 class="font-medium text-3xl text-900">SAKAI</h4>
                 </div>
             </div>
 
             <div class="col-12 md:col-10 lg:col-7">
                 <div class="grid text-center md:text-left">
                     <div class="col-12 md:col-3">
-                        <h4 class="font-medium text-2xl line-height-3 mb-3 text-gray-900">Company</h4>
-                        <a class="line-height-3 text-xl block cursor-pointer mb-2 text-gray-700">About Us</a>
-                        <a class="line-height-3 text-xl block cursor-pointer mb-2 text-gray-700">News</a>
-                        <a class="line-height-3 text-xl block cursor-pointer mb-2 text-gray-700">Investor Relations</a>
-                        <a class="line-height-3 text-xl block cursor-pointer mb-2 text-gray-700">Careers</a>
-                        <a class="line-height-3 text-xl block cursor-pointer text-gray-700">Media Kit</a>
+                        <h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Company</h4>
+                        <a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">About Us</a>
+                        <a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">News</a>
+                        <a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Investor Relations</a>
+                        <a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Careers</a>
+                        <a class="line-height-3 text-xl block cursor-pointer text-700">Media Kit</a>
                     </div>
                     
                     <div class="col-12 md:col-3 mt-4 md:mt-0">
-                        <h4 class="font-medium text-2xl line-height-3 mb-3 text-gray-900">Resources</h4>
-                        <a class="line-height-3 text-xl block cursor-pointer mb-2 text-gray-700">Get Started</a>
-                        <a class="line-height-3 text-xl block cursor-pointer mb-2 text-gray-700">Learn</a>
-                        <a class="line-height-3 text-xl block cursor-pointer text-gray-700">Case Studies</a>
+                        <h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Resources</h4>
+                        <a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Get Started</a>
+                        <a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Learn</a>
+                        <a class="line-height-3 text-xl block cursor-pointer text-700">Case Studies</a>
                     </div>
     
                     <div class="col-12 md:col-3 mt-4 md:mt-0">
-                        <h4 class="font-medium text-2xl line-height-3 mb-3 text-gray-900">Community</h4>
-                        <a class="line-height-3 text-xl block cursor-pointer mb-2 text-gray-700">Discord</a>
-                        <a class="line-height-3 text-xl block cursor-pointer mb-2 text-gray-700">Events<img src="assets/layout/images/new-badge.svg" class="ml-2"/></a>
-                        <a class="line-height-3 text-xl block cursor-pointer mb-2 text-gray-700">FAQ</a>
-                        <a class="line-height-3 text-xl block cursor-pointer text-gray-700">Blog</a>
+                        <h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Community</h4>
+                        <a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Discord</a>
+                        <a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Events<img src="assets/layout/images/new-badge.svg" class="ml-2"/></a>
+                        <a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">FAQ</a>
+                        <a class="line-height-3 text-xl block cursor-pointer text-700">Blog</a>
                     </div>
     
                     <div class="col-12 md:col-3 mt-4 md:mt-0">
-                        <h4 class="font-medium text-2xl line-height-3 mb-3 text-gray-900">Legal</h4>
-                        <a class="line-height-3 text-xl block cursor-pointer mb-2 text-gray-700">Brand Policy</a>
-                        <a class="line-height-3 text-xl block cursor-pointer mb-2 text-gray-700">Privacy Policy</a>
-                        <a class="line-height-3 text-xl block cursor-pointer text-gray-700">Terms of Service</a>
+                        <h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Legal</h4>
+                        <a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Brand Policy</a>
+                        <a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Privacy Policy</a>
+                        <a class="line-height-3 text-xl block cursor-pointer text-700">Terms of Service</a>
                     </div>
                 </div>
             </div>
diff --git a/src/app/components/landing/landing.component.ts b/src/app/components/landing/landing.component.ts
index 4fe1ea8..a178afa 100644
--- a/src/app/components/landing/landing.component.ts
+++ b/src/app/components/landing/landing.component.ts
@@ -54,8 +54,6 @@ import { Subscription } from 'rxjs';
 })
 export class LandingComponent implements OnInit, OnDestroy {
   
-  themeElement: any;
-
   config: AppConfig;  
 
   subscription: Subscription;
@@ -67,12 +65,12 @@ export class LandingComponent implements OnInit, OnDestroy {
     this.subscription = this.configService.configUpdate$.subscribe(config => {
       this.config = config;
     });
-    this.themeElement = document.getElementById('theme-css');
-    this.themeElement.setAttribute('href','assets/theme/saga-blue/theme.css');
   }
 
   ngOnDestroy(): void {
-    this.themeElement.setAttribute('href',`assets/theme/${this.config.theme}/theme.css`);
+    if(this.subscription){
+      this.subscription.unsubscribe();
+    }
   }
 
 }