Apply dark mode to remote as well as to the host application.

apps/dashboard/src/app/app.component.html

@@ -1,18 +1,20 @@
 
-<div class="flex justify-end p-4">
-  <button
-    (click)="toggleDarkMode()"
-    class="bg-gray-200 dark:bg-gray-700 text-black dark:text-white px-4 py-2 rounded"
-  >
-    Toggle Dark Mode
-  </button>
-</div>
+<div class="min-h-screen w-full bg-gray-100 dark:bg-gray-900 text-black dark:text-gray-200">
+  <div class="flex justify-end p-4">
+    <button
+      (click)="toggleDarkMode()"
+      class="bg-gray-200 dark:bg-gray-700 text-black dark:text-white px-4 py-2 rounded"
+    >
+      Toggle Dark Mode
+    </button>
+  </div>
 
-<div class="dashboard-nav">Admin Dashboard</div>
-    <!-- This is the chat bot component that is exposed by the shared library -->
-    <ac-chat-bot></ac-chat-bot>
-    @if (isLoggedIn$ | async) {
-      You are authenticated so you can see this content.
-    } @else {
-      <router-outlet></router-outlet>
-    }
+  <div class="dashboard-nav">Admin Dashboard</div>
+      <!-- This is the chat bot component that is exposed by the shared library -->
+      <ac-chat-bot></ac-chat-bot>
+      @if (isLoggedIn$ | async) {
+        You are authenticated so you can see this content.
+      } @else {
+        <router-outlet></router-outlet>
+      }
+</div>

apps/login/src/app/remote-entry/entry.component.html

@@ -39,4 +39,13 @@
   >
     User is not logged in!
   </div>
+
+<div class="flex justify-end p-4">
+  <button
+    (click)="toggleDarkMode()"
+    class="bg-gray-200 dark:bg-gray-700 text-black dark:text-white px-4 py-2 rounded"
+  >
+    Toggle Dark Mode
+  </button>
+</div>
 </div>

apps/login/src/app/remote-entry/entry.component.ts

@@ -1,8 +1,9 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { UserService } from '@ng-mf/data-access-user';
 import { ChatBotComponent } from 'login/chatBot';
+import { DarkModeService } from '@ng-mf/dark-mode';
 
 @Component({
   imports: [CommonModule, FormsModule, ChatBotComponent],
@@ -13,7 +14,7 @@ import { ChatBotComponent } from 'login/chatBot';
 /**
  * This component is the entry point for the remote login application.
  */
-export class RemoteEntryComponent {
+export class RemoteEntryComponent implements OnInit {
   username = '';
   password = '';
   isLoggedIn$;
@@ -23,14 +24,29 @@ export class RemoteEntryComponent {
    * 
    * @param userService 
    */
-  constructor(private userService: UserService) {
+  constructor(private userService: UserService, private darkModeService: DarkModeService) {
     this.isLoggedIn$ = this.userService.isUserLoggedIn$;
   }
 
+  /**
+   * Lifecycle hook that runs when the component is initialized.
+   */
+  ngOnInit(): void {
+       // Load the dark mode preference from local storage
+    this.darkModeService.loadDarkModePreference();
+  }
+
   /**
    * Method to log in the user.
    */
   login() {
     this.userService.checkCredentials(this.username, this.password);
   }
+
+  /**
+   * This method is used to toggle the dark mode
+   */
+  toggleDarkMode(): void {
+    this.darkModeService.toggleDarkMode();
+  }
 }

apps/login/tailwind.config.js

@@ -1,4 +1,3 @@
-import { Config } from 'tailwindcss';
 import { createGlobPatternsForDependencies } from '@nx/angular/tailwind';
 import { join } from 'path';