Issue/200 dark mode styling

src/app/adf-admins/df-manage-admins/df-manage-admins.component.html

@@ -7,13 +7,17 @@
       (change)="uploadAdminList($event)"
       style="display: none" />
     <button
+      class="save-btn"
+      [class]="(isDarkMode | async) ? 'dark-theme' : ''"
       mat-mini-fab
       color="primary"
       [attr.aria-label]="'importList' | transloco"
       (click)="fileInput.click()">
       <fa-icon [icon]="faUpload" size="xl"></fa-icon>
     </button>
     <button
+      class="save-btn"
+      [class]="(isDarkMode | async) ? 'dark-theme' : ''"
       mat-mini-fab
       color="primary"
       [attr.aria-label]="'exportList' | transloco"

src/app/adf-admins/df-manage-admins/df-manage-admins.component.ts

@@ -1,17 +1,18 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component, ViewChild, inject } from '@angular/core';
 import { DfManageAdminsTableComponent } from './df-manage-admins-table.component';
 import { EXPORT_TYPES } from 'src/app/shared/constants/supported-extensions';
 
-import { NgFor, UpperCasePipe } from '@angular/common';
+import { AsyncPipe, NgFor, UpperCasePipe } from '@angular/common';
 import { MatMenuModule } from '@angular/material/menu';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { MatButtonModule } from '@angular/material/button';
 import { faDownload, faUpload } from '@fortawesome/free-solid-svg-icons';
 import { TranslocoPipe } from '@ngneat/transloco';
-
+import { DfThemeService } from 'src/app/shared/services/df-theme.service';
 @Component({
   selector: 'df-manage-admins',
   templateUrl: './df-manage-admins.component.html',
+  styleUrls: ['./df-manage-admins.component.scss'],
   standalone: true,
   imports: [
     DfManageAdminsTableComponent,
@@ -21,15 +22,17 @@ import { TranslocoPipe } from '@ngneat/transloco';
     NgFor,
     UpperCasePipe,
     TranslocoPipe,
+    AsyncPipe,
   ],
 })
 export class DfManageAdminsComponent {
+  themeService = inject(DfThemeService);
   faUpload = faUpload;
   faDownload = faDownload;
   exportTypes = EXPORT_TYPES;
   @ViewChild(DfManageAdminsTableComponent)
   manageAdminTableComponent: DfManageAdminsTableComponent;
-
+  isDarkMode = this.themeService.darkMode$;
   uploadAdminList(event: Event) {
     const input = event.target as HTMLInputElement;
     if (input.files) {

src/app/adf-api-docs/df-api-docs/df-api-docs.component.html

@@ -1,8 +1,10 @@
-<div class="api-doc-button-container">
-  <button mat-raised-button (click)="goBackToList()">
+<div
+  class="api-doc-button-container"
+  [class]="(isDarkMode | async) ? 'dark-theme' : ''">
+  <button class="cancel-btn" mat-raised-button (click)="goBackToList()">
     {{ 'goBack' | transloco }}
   </button>
-  <button mat-raised-button color="primary" (click)="downloadApiDoc()">
+  <button class="save-btn" mat-raised-button (click)="downloadApiDoc()">
     {{ 'apiDocs.downloadApiDoc' | transloco }}
   </button>
 </div>

src/app/adf-api-docs/df-api-docs/df-api-docs.component.ts

@@ -14,14 +14,16 @@ import { UntilDestroy } from '@ngneat/until-destroy';
 import { DfUserDataService } from 'src/app/shared/services/df-user-data.service';
 import { SESSION_TOKEN_HEADER } from 'src/app/shared/constants/http-headers';
 import { mapCamelToSnake } from 'src/app/shared/utilities/case';
+import { DfThemeService } from 'src/app/shared/services/df-theme.service';
+import { AsyncPipe } from '@angular/common';
 
 @UntilDestroy({ checkProperties: true })
 @Component({
   selector: 'df-api-docs',
   templateUrl: './df-api-docs.component.html',
   styleUrls: ['./df-api-docs.component.scss'],
   standalone: true,
-  imports: [MatButtonModule, TranslocoModule],
+  imports: [MatButtonModule, TranslocoModule, AsyncPipe],
 })
 export class DfApiDocsComponent implements OnInit, AfterContentInit {
   @ViewChild('apiDocumentation', { static: true }) apiDocElement:
@@ -33,9 +35,10 @@ export class DfApiDocsComponent implements OnInit, AfterContentInit {
   constructor(
     private activatedRoute: ActivatedRoute,
     private router: Router,
-    private userDataService: DfUserDataService
+    private userDataService: DfUserDataService,
+    private themeService: DfThemeService
   ) {}
-
+  isDarkMode = this.themeService.darkMode$;
   ngOnInit(): void {
     this.activatedRoute.data.subscribe(({ data }) => {
       if (data) {