Merge pull request 'Add dark mode theme with toggle button and improved UI styling' (#1 ) from ui-improvements into main

Reviewed-on: #1
Add dark mode theme with toggle button and improved UI styling
2026-01-31 17:31:37 +00:00 · 2026-01-31 18:30:35 +01:00 · 2026-01-31 17:58:50 +01:00 · 2026-01-31 17:41:20 +01:00 · 2026-01-31 17:12:45 +01:00 · 2026-01-31 01:50:34 +01:00
23 changed files with 1054 additions and 69 deletions
--- a/backend/Dockerfile
+++ b/backend/Dockerfile
@@ -5,6 +5,10 @@ WORKDIR /app

 # Copy go.mod and go.sum files to download dependencies
 COPY go.mod go.sum ./
+
+# Install the C compiler (gcc) and other build tools needed for CGO
+RUN apk add --no-cache build-base
+
 RUN go mod download

 # Copy the rest of the application source code
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -26,7 +26,7 @@ COPY nginx.conf /etc/nginx/conf.d/default.conf

 # Copy the built application from the builder stage to Nginx's web root directory
 # I am assuming the project name is 'dashboard'. If not, you may need to change the path 'dist/dashboard/browser'.
-COPY --from=builder /app/dist/frontend /usr/share/nginx/html
+COPY --from=builder /app/dist/frontend/browser/. /usr/share/nginx/html

 # Expose port 80 for the web server
 EXPOSE 80
--- a/frontend/angular.json
+++ b/frontend/angular.json
@@ -30,7 +30,6 @@
              }
            ],
            "styles": [
-              "node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.scss"
            ]
          },
@@ -48,7 +47,13 @@
                  "maximumError": "8kB"
                }
              ],
-              "outputHashing": "all"
+              "outputHashing": "all",
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ]
            },
            "development": {
              "optimization": false,
--- a/frontend/src/app/app.html
+++ b/frontend/src/app/app.html
@@ -5,6 +5,11 @@
  </a>
  <span class="spacer"></span>

+  <!-- Dark Mode Toggle -->
+  <button mat-icon-button (click)="toggleTheme()" [matTooltip]="(darkMode$ | async) ? 'Light Mode' : 'Dark Mode'">
+    <mat-icon>{{ (darkMode$ | async) ? 'light_mode' : 'dark_mode' }}</mat-icon>
+  </button>
+
  <!-- Show 'edit' icon if not in admin view -->
  <a *ngIf="!isAdminView" mat-icon-button routerLink="/admin" matTooltip="Edit Dashboard Items">
    <mat-icon>edit</mat-icon>
--- a/frontend/src/app/app.ts
+++ b/frontend/src/app/app.ts
@@ -1,8 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 import { RouterModule, RouterOutlet, Router, NavigationEnd } from '@angular/router';
 import { MaterialModule } from './material.module';
+import { ThemeService } from './services/theme.service';
 import { filter } from 'rxjs/operators';
 import { CommonModule } from '@angular/common';
+import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
@@ -14,8 +16,14 @@ import { CommonModule } from '@angular/common';
 export class AppComponent implements OnInit {
  title = 'frontend';
  isAdminView = false;
+  darkMode$: Observable<boolean>;

-  constructor(private router: Router) {}
+  constructor(
+    private router: Router,
+    private themeService: ThemeService
+  ) {
+    this.darkMode$ = this.themeService.darkMode$;
+  }

  ngOnInit() {
    this.router.events.pipe(
@@ -24,4 +32,8 @@ export class AppComponent implements OnInit {
      this.isAdminView = event.urlAfterRedirects === '/admin';
    });
  }
+
+  toggleTheme(): void {
+    this.themeService.toggleTheme();
+  }
 }
--- a/frontend/src/app/components/home/home.html
+++ b/frontend/src/app/components/home/home.html
@@ -1,17 +1,25 @@
-<div class="card-container">
-  <div *ngIf="items$ | async as items">
-    <a *ngFor="let item of items" [href]="item.target" target="_blank" rel="noopener noreferrer" class="card-link">
-      <mat-card class="item-card">
-        <mat-card-header>
-          <div class="card-header-content">
-            <img *ngIf="item.iconUrl && !imgErrorMap.get(item.id); else defaultIcon" mat-card-avatar [src]="item.iconUrl" (error)="onImgError(item.id)">
+<div class="card-container" *ngIf="items$ | async as items">
+  <a *ngFor="let item of items" [href]="item.target" target="_blank" rel="noopener noreferrer" class="card-link">
+    <mat-card class="item-card">
+      <mat-card-content>
+        <div class="card-content">
+          <!-- Material Icon wenn iconUrl ein Material Icon Name ist -->
+          <mat-icon *ngIf="isMaterialIcon(item.iconUrl)" class="card-icon material-icon">{{ item.iconUrl }}</mat-icon>
+          
+          <!-- Custom Image URL wenn nicht Material Icon -->
+          <ng-container *ngIf="!isMaterialIcon(item.iconUrl)">
+            <img *ngIf="item.iconUrl && !imgErrorMap.get(item.id); else defaultIcon" 
+                 class="card-icon" 
+                 [src]="item.iconUrl" 
+                 (error)="onImgError(item.id)">
            <ng-template #defaultIcon>
-              <mat-icon mat-card-avatar class="default-avatar-icon">dashboard</mat-icon>
+              <mat-icon class="card-icon default-avatar-icon">dashboard</mat-icon>
            </ng-template>
-            <mat-card-title>{{ item.displayName }}</mat-card-title>
-          </div>
-        </mat-card-header>
-      </mat-card>
-    </a>
-  </div>
+          </ng-container>
+          
+          <span class="card-title">{{ item.displayName }}</span>
+        </div>
+      </mat-card-content>
+    </mat-card>
+  </a>
 </div>
--- a/frontend/src/app/components/home/home.scss
+++ b/frontend/src/app/components/home/home.scss
@@ -1,45 +1,60 @@
 .card-container {
  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-  gap: 20px;
-  padding: 20px;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 32px;
+  padding: 32px;
 }

 .card-link {
  text-decoration: none;
  color: inherit;
+  display: block;
 }

 .item-card {
  cursor: pointer;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+  height: 100%;
 }

 .item-card:hover {
  transform: translateY(-5px);
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
 }

-// Custom flex container inside the header
-.card-header-content {
+.card-content {
  display: flex;
-  align-items: center; // Revert to center alignment
-  width: 100%;
-  height: 64px; // Give the container a fixed height
+  align-items: center;
+  gap: 16px;
+  padding: 8px 0;
 }

-// Remove margin from the title and add padding for spacing
-.card-header-content .mat-card-title {
-  margin: 0;
-  padding-left: 16px;
+.card-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 8px;
+  object-fit: cover;
+  flex-shrink: 0;
+  
+  &.material-icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 48px;
+    color: #1976d2;
+  }
 }

+.card-title {
+  font-size: 1.1rem;
+  font-weight: 500;
+  line-height: 1.4;
+}

 .default-avatar-icon {
-  // Vertically align the icon in the avatar space
  display: flex;
  justify-content: center;
  align-items: center;
-  width: 40px;
-  height: 40px;
+  font-size: 32px;
+  color: #666;
 }
--- a/frontend/src/app/components/home/home.spec.ts
+++ b/frontend/src/app/components/home/home.spec.ts
@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';

-import { Home } from './home';
+import { HomeComponent } from './home';

-describe('Home', () => {
-  let component: Home;
-  let fixture: ComponentFixture<Home>;
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
-      imports: [Home]
+      imports: [HomeComponent]
    })
    .compileComponents();

-    fixture = TestBed.createComponent(Home);
+    fixture = TestBed.createComponent(HomeComponent);
    component = fixture.componentInstance;
    await fixture.whenStable();
  });
--- a/frontend/src/app/components/home/home.ts
+++ b/frontend/src/app/components/home/home.ts
@@ -1,8 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MaterialModule } from '../../material.module';
-import { ApiService } from '../../services/api';
+import { Api } from '../../services/api';
 import { Item } from '../../models/item';
+import { IconService } from '../../services/icon.service';
 import { Observable } from 'rxjs';

@Component({
@@ -16,7 +17,10 @@ export class HomeComponent implements OnInit {
  items$!: Observable<Item[]>;
  imgErrorMap = new Map<number, boolean>();

-  constructor(private apiService: ApiService) {}
+  constructor(
+    private apiService: Api,
+    private iconService: IconService
+  ) {}

  ngOnInit(): void {
    this.items$ = this.apiService.getItems();
@@ -25,4 +29,10 @@ export class HomeComponent implements OnInit {
  onImgError(itemId: number) {
    this.imgErrorMap.set(itemId, true);
  }
+  
+  isMaterialIcon(iconUrl: string): boolean {
+    // Akzeptiere alle Werte die wie Icon-Namen aussehen (nur Kleinbuchstaben und Unterstriche)
+    // Nicht nur die in der kuratierten Liste
+    return this.iconService.looksLikeIconName(iconUrl);
+  }
 }
--- a/frontend/src/app/components/item-form/item-form.html
+++ b/frontend/src/app/components/item-form/item-form.html
@@ -2,6 +2,13 @@
  <mat-card>
    <mat-card-title>{{ isEditMode ? 'Edit Item' : 'Create Item' }}</mat-card-title>
    <mat-card-content>
+      <!-- Icon Auswahl Toggle (außerhalb des Forms) -->
+      <div class="icon-mode-toggle">
+        <mat-slide-toggle [checked]="useCustomUrl" (change)="onToggleChange($event)">
+          Custom Icon URL verwenden
+        </mat-slide-toggle>
+      </div>
+
      <form [formGroup]="itemForm" (ngSubmit)="onSubmit()">
        <mat-form-field appearance="fill">
          <mat-label>Name</mat-label>
@@ -18,7 +25,42 @@
          <input matInput formControlName="target">
        </mat-form-field>

-        <mat-form-field appearance="fill">
+        <!-- Material Icon Picker (Standard) -->
+        <div *ngIf="!useCustomUrl" class="icon-picker-section">
+          <mat-form-field appearance="fill">
+            <mat-label>Icon auswählen</mat-label>
+            <input type="text" 
+                   matInput 
+                   formControlName="iconName"
+                   [matAutocomplete]="auto"
+                   placeholder="Icon suchen...">
+            <mat-icon matPrefix>search</mat-icon>
+            <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
+              <mat-option *ngFor="let icon of filteredIcons$ | async" [value]="icon.name">
+                <mat-icon>{{ icon.name }}</mat-icon>
+                <span class="icon-option-text">{{ icon.name }}</span>
+                <span class="icon-category">{{ icon.category }}</span>
+              </mat-option>
+            </mat-autocomplete>
+          </mat-form-field>
+          
+          <!-- Link zu allen Material Icons -->
+          <div class="icon-browse-link">
+            <a href="https://fonts.google.com/icons?icon.set=Material+Icons" target="_blank" rel="noopener noreferrer">
+              <mat-icon>open_in_new</mat-icon>
+              Alle 2000+ Material Icons durchsuchen
+            </a>
+          </div>
+          
+          <!-- Icon Vorschau -->
+          <div class="icon-preview" *ngIf="itemForm.get('iconName')?.value">
+            <span class="preview-label">Vorschau:</span>
+            <mat-icon class="preview-icon">{{ getSelectedIconName() }}</mat-icon>
+          </div>
+        </div>
+
+        <!-- Custom Icon URL Feld -->
+        <mat-form-field appearance="fill" *ngIf="useCustomUrl">
          <mat-label>Icon URL</mat-label>
          <input matInput formControlName="iconUrl">
        </mat-form-field>
--- a/frontend/src/app/components/item-form/item-form.scss
+++ b/frontend/src/app/components/item-form/item-form.scss
@@ -8,6 +8,20 @@ mat-card {
  width: 100%;
 }

+::ng-deep .mat-mdc-card-title {
+  display: block !important;
+  margin-bottom: 24px !important;
+  padding: 16px 0 !important;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
+  font-size: 24px !important;
+  font-weight: 500 !important;
+  text-align: center !important;
+}
+
+:host-context(.dark-theme) ::ng-deep .mat-mdc-card-title {
+  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
+}
+
 mat-form-field {
  width: 100%;
  margin-bottom: 10px;
@@ -19,3 +33,91 @@ mat-form-field {
  gap: 10px;
  margin-top: 20px;
 }
+
+:host-context(.dark-theme) .actions button[mat-stroked-button] {
+  border-color: rgba(255, 255, 255, 0.3) !important;
+  color: #ffffff !important;
+
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.08) !important;
+    border-color: rgba(255, 255, 255, 0.5) !important;
+  }
+}
+
+::ng-deep .dark-theme .mat-mdc-stroked-button {
+  border-color: rgba(255, 255, 255, 0.3) !important;
+  color: #ffffff !important;
+
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.08) !important;
+    border-color: rgba(255, 255, 255, 0.5) !important;
+  }
+}
+
+.icon-mode-toggle {
+  margin: 16px 0;
+}
+
+.icon-picker-section {
+  .icon-browse-link {
+    margin-bottom: 16px;
+    
+    a {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      color: #1976d2;
+      text-decoration: none;
+      font-size: 14px;
+      transition: color 0.2s;
+      
+      &:hover {
+        color: #1565c0;
+        text-decoration: underline;
+      }
+      
+      mat-icon {
+        font-size: 18px;
+        width: 18px;
+        height: 18px;
+      }
+    }
+  }
+  
+  .icon-preview {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 16px;
+    background-color: #f5f5f5;
+    border-radius: 4px;
+    margin-bottom: 16px;
+    
+    .preview-label {
+      font-weight: 500;
+      color: #666;
+    }
+    
+    .preview-icon {
+      font-size: 48px;
+      width: 48px;
+      height: 48px;
+      color: #1976d2;
+    }
+  }
+}
+
+::ng-deep {
+  .mat-mdc-option {
+    .icon-option-text {
+      margin-left: 12px;
+      margin-right: auto;
+    }
+    
+    .icon-category {
+      font-size: 12px;
+      color: #666;
+      margin-left: 8px;
+    }
+  }
+}
--- a/frontend/src/app/components/item-form/item-form.spec.ts
+++ b/frontend/src/app/components/item-form/item-form.spec.ts
@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';

-import { ItemForm } from './item-form';
+import { ItemFormComponent } from './item-form';

-describe('ItemForm', () => {
-  let component: ItemForm;
-  let fixture: ComponentFixture<ItemForm>;
+describe('ItemFormComponent', () => {
+  let component: ItemFormComponent;
+  let fixture: ComponentFixture<ItemFormComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
-      imports: [ItemForm]
+      imports: [ItemFormComponent]
    })
    .compileComponents();

-    fixture = TestBed.createComponent(ItemForm);
+    fixture = TestBed.createComponent(ItemFormComponent);
    component = fixture.componentInstance;
    await fixture.whenStable();
  });
--- a/frontend/src/app/components/item-form/item-form.ts
+++ b/frontend/src/app/components/item-form/item-form.ts
@@ -1,64 +1,134 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
-import { ApiService } from '../../services/api';
+import { FormBuilder, FormGroup, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { Api } from '../../services/api';
 import { Item } from '../../models/item';
 import { MaterialModule } from '../../material.module';
 import { CommonModule } from '@angular/common';
+import { IconService, MaterialIcon } from '../../services/icon.service';
+import { Observable } from 'rxjs';
+import { map, startWith } from 'rxjs/operators';

@Component({
  selector: 'app-item-form',
  templateUrl: './item-form.html',
  styleUrls: ['./item-form.scss'],
  standalone: true,
-  imports: [MaterialModule, CommonModule, ReactiveFormsModule],
+  imports: [MaterialModule, CommonModule, ReactiveFormsModule, FormsModule],
 })
 export class ItemFormComponent implements OnInit {
  itemForm: FormGroup;
  isEditMode = false;
  itemId: number | null = null;
  
+  // Icon-Auswahl Eigenschaften
+  filteredIcons$!: Observable<MaterialIcon[]>;
+  allIcons: MaterialIcon[] = [];
+  useCustomUrl = false;
+
  constructor(
    private fb: FormBuilder,
-    private apiService: ApiService,
+    private apiService: Api,
    private router: Router,
-    private route: ActivatedRoute
+    private route: ActivatedRoute,
+    private iconService: IconService
  ) {
    this.itemForm = this.fb.group({
      name: ['', Validators.required],
      displayName: ['', Validators.required],
      target: ['', Validators.required],
-      iconUrl: ['']
+      iconUrl: [''],
+      iconName: ['']
    });
  }

  ngOnInit(): void {
+    // Icons laden
+    this.allIcons = this.iconService.getAllIcons();
+    
+    // Autocomplete für Icons einrichten
+    this.filteredIcons$ = this.itemForm.get('iconName')!.valueChanges.pipe(
+      startWith(''),
+      map(value => this._filterIcons(value || ''))
+    );
+    
    const idParam = this.route.snapshot.params['id'];
    if (idParam) {
      this.isEditMode = true;
      this.itemId = +idParam; // Convert string to number
      this.apiService.getItem(this.itemId).subscribe(item => {
        this.itemForm.patchValue(item);
+        
+        // Prüfen ob Custom URL oder Material Icon verwendet wird
+        if (item.iconUrl) {
+          if (this.iconService.isValidIcon(item.iconUrl)) {
+            // Es ist ein Material Icon Name
+            this.itemForm.patchValue({ iconName: item.iconUrl, iconUrl: '' });
+            this.useCustomUrl = false;
+          } else {
+            // Es ist eine Custom URL
+            this.useCustomUrl = true;
+          }
+        }
      });
    }
  }
  
+  private _filterIcons(value: string): MaterialIcon[] {
+    const filterValue = value.toLowerCase();
+    return this.allIcons.filter(icon => 
+      icon.name.toLowerCase().includes(filterValue) || 
+      icon.category.toLowerCase().includes(filterValue)
+    );
+  }
+  
+  onToggleChange(event: any): void {
+    this.useCustomUrl = event.checked;
+    if (this.useCustomUrl) {
+      this.itemForm.patchValue({ iconName: '' });
+    } else {
+      this.itemForm.patchValue({ iconUrl: '' });
+    }
+  }
+  
+  getSelectedIconName(): string {
+    return this.itemForm.get('iconName')?.value || 'dashboard';
+  }
+
+  displayFn(iconName: string): string {
+    return iconName;
+  }
+
  onSubmit(): void {
    if (this.itemForm.valid) {
-      const itemData: Item = { id: this.itemId, ...this.itemForm.value };
+      // Bestimme welches Icon-Feld verwendet werden soll
+      let finalIconUrl = this.itemForm.value.iconUrl;
+      if (!this.useCustomUrl && this.itemForm.value.iconName) {
+        // Verwende Material Icon Namen als iconUrl
+        finalIconUrl = this.itemForm.value.iconName;
+      }
+      
+      const itemData: Item = { 
+        id: this.itemId ?? 0, 
+        name: this.itemForm.value.name,
+        displayName: this.itemForm.value.displayName,
+        target: this.itemForm.value.target,
+        iconUrl: finalIconUrl
+      };
+      
      if (this.isEditMode) {
        this.apiService.updateItem(this.itemId!, itemData).subscribe(() => {
-          this.router.navigate(['/']);
+          this.router.navigate(['/admin']);
        });
      } else {
        this.apiService.createItem(itemData).subscribe(() => {
-          this.router.navigate(['/']);
+          this.router.navigate(['/admin']);
        });
      }
    }
  }

  cancel(): void {
-    this.router.navigate(['/']);
+    this.router.navigate(['/admin']);
  }
 }
--- a/frontend/src/app/components/item-list/item-list.scss
+++ b/frontend/src/app/components/item-list/item-list.scss
@@ -2,6 +2,22 @@
  padding: 20px;
 }

+mat-card {
+  ::ng-deep .mat-mdc-card-title {
+    display: block !important;
+    margin-bottom: 24px !important;
+    padding: 16px 0 !important;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
+    font-size: 24px !important;
+    font-weight: 500 !important;
+    text-align: center !important;
+  }
+}
+
+:host-context(.dark-theme) mat-card ::ng-deep .mat-mdc-card-title {
+  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
+}
+
 .fab-button {
  position: fixed;
  bottom: 20px;
--- a/frontend/src/app/components/item-list/item-list.spec.ts
+++ b/frontend/src/app/components/item-list/item-list.spec.ts
@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';

-import { ItemList } from './item-list';
+import { ItemListComponent } from './item-list';

-describe('ItemList', () => {
-  let component: ItemList;
-  let fixture: ComponentFixture<ItemList>;
+describe('ItemListComponent', () => {
+  let component: ItemListComponent;
+  let fixture: ComponentFixture<ItemListComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
-      imports: [ItemList]
+      imports: [ItemListComponent]
    })
    .compileComponents();

-    fixture = TestBed.createComponent(ItemList);
+    fixture = TestBed.createComponent(ItemListComponent);
    component = fixture.componentInstance;
    await fixture.whenStable();
  });
--- a/frontend/src/app/components/item-list/item-list.ts
+++ b/frontend/src/app/components/item-list/item-list.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { ApiService } from '../../services/api';
+import { Api } from '../../services/api';
 import { Item } from '../../models/item';
 import { Router } from '@angular/router';
 import { MaterialModule } from '../../material.module';
@@ -17,7 +17,7 @@ export class ItemListComponent implements OnInit {
  displayedColumns: string[] = ['id', 'name', 'displayName', 'target', 'actions'];
  dataSource = new MatTableDataSource<Item>();

-  constructor(private apiService: ApiService, private router: Router) { }
+  constructor(private apiService: Api, private router: Router) { }

  ngOnInit(): void {
    this.loadItems();
--- a/frontend/src/app/material.module.ts
+++ b/frontend/src/app/material.module.ts
@@ -7,6 +7,8 @@ import { MatTableModule } from '@angular/material/table';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';

@NgModule({
  exports: [
@@ -18,6 +20,8 @@ import { MatTooltipModule } from '@angular/material/tooltip';
    MatToolbarModule,
    MatIconModule,
    MatTooltipModule,
+    MatSlideToggleModule,
+    MatAutocompleteModule,
  ]
 })
 export class MaterialModule { }
--- a/frontend/src/app/services/api.ts
+++ b/frontend/src/app/services/api.ts
@@ -2,12 +2,13 @@ import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { Item } from '../models/item';
+import { environment } from '../../environments/environment';

@Injectable({
  providedIn: 'root'
 })
-export class ApiService {
-  private apiUrl = '/api/items';
+export class Api {
+  private apiUrl = environment.apiUrl;

  constructor(private http: HttpClient) { }

--- a/frontend/src/app/services/icon.service.ts
+++ b/frontend/src/app/services/icon.service.ts
@@ -0,0 +1,358 @@
+import { Injectable } from '@angular/core';
+
+export interface MaterialIcon {
+  name: string;
+  category: string;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class IconService {
+  // Häufig verwendete Material Icons, gruppiert nach Kategorien
+  private icons: MaterialIcon[] = [
+    // Navigation
+    { name: 'home', category: 'Navigation' },
+    { name: 'dashboard', category: 'Navigation' },
+    { name: 'menu', category: 'Navigation' },
+    { name: 'apps', category: 'Navigation' },
+    { name: 'arrow_back', category: 'Navigation' },
+    { name: 'arrow_forward', category: 'Navigation' },
+    { name: 'arrow_upward', category: 'Navigation' },
+    { name: 'arrow_downward', category: 'Navigation' },
+    { name: 'expand_more', category: 'Navigation' },
+    { name: 'expand_less', category: 'Navigation' },
+    { name: 'fullscreen', category: 'Navigation' },
+    { name: 'fullscreen_exit', category: 'Navigation' },
+    { name: 'refresh', category: 'Navigation' },
+    { name: 'more_vert', category: 'Navigation' },
+    { name: 'more_horiz', category: 'Navigation' },
+    { name: 'close', category: 'Navigation' },
+    { name: 'check', category: 'Navigation' },
+    
+    // Web & Browser
+    { name: 'web', category: 'Web' },
+    { name: 'language', category: 'Web' },
+    { name: 'public', category: 'Web' },
+    { name: 'link', category: 'Web' },
+    { name: 'http', category: 'Web' },
+    { name: 'https', category: 'Web' },
+    { name: 'vpn_lock', category: 'Web' },
+    { name: 'domain', category: 'Web' },
+    { name: 'dns', category: 'Web' },
+    { name: 'wifi', category: 'Web' },
+    { name: 'router', category: 'Web' },
+    { name: 'storage', category: 'Web' },
+    { name: 'cloud_queue', category: 'Web' },
+    { name: 'cloud_done', category: 'Web' },
+    { name: 'cloud_off', category: 'Web' },
+    
+    // Kommunikation
+    { name: 'email', category: 'Kommunikation' },
+    { name: 'mail', category: 'Kommunikation' },
+    { name: 'mail_outline', category: 'Kommunikation' },
+    { name: 'chat', category: 'Kommunikation' },
+    { name: 'chat_bubble', category: 'Kommunikation' },
+    { name: 'message', category: 'Kommunikation' },
+    { name: 'forum', category: 'Kommunikation' },
+    { name: 'phone', category: 'Kommunikation' },
+    { name: 'call', category: 'Kommunikation' },
+    { name: 'video_call', category: 'Kommunikation' },
+    { name: 'voicemail', category: 'Kommunikation' },
+    { name: 'textsms', category: 'Kommunikation' },
+    { name: 'contact_mail', category: 'Kommunikation' },
+    { name: 'contacts', category: 'Kommunikation' },
+    
+    // Content
+    { name: 'create', category: 'Content' },
+    { name: 'edit', category: 'Content' },
+    { name: 'add', category: 'Content' },
+    { name: 'add_circle', category: 'Content' },
+    { name: 'remove', category: 'Content' },
+    { name: 'delete', category: 'Content' },
+    { name: 'delete_outline', category: 'Content' },
+    { name: 'content_copy', category: 'Content' },
+    { name: 'content_cut', category: 'Content' },
+    { name: 'content_paste', category: 'Content' },
+    { name: 'save', category: 'Content' },
+    { name: 'save_alt', category: 'Content' },
+    { name: 'undo', category: 'Content' },
+    { name: 'redo', category: 'Content' },
+    { name: 'archive', category: 'Content' },
+    { name: 'unarchive', category: 'Content' },
+    { name: 'flag', category: 'Content' },
+    { name: 'sort', category: 'Content' },
+    { name: 'filter_list', category: 'Content' },
+    
+    // Dateien & Ordner
+    { name: 'folder', category: 'Dateien' },
+    { name: 'folder_open', category: 'Dateien' },
+    { name: 'folder_shared', category: 'Dateien' },
+    { name: 'folder_special', category: 'Dateien' },
+    { name: 'create_new_folder', category: 'Dateien' },
+    { name: 'description', category: 'Dateien' },
+    { name: 'insert_drive_file', category: 'Dateien' },
+    { name: 'text_snippet', category: 'Dateien' },
+    { name: 'article', category: 'Dateien' },
+    { name: 'attachment', category: 'Dateien' },
+    { name: 'cloud', category: 'Dateien' },
+    { name: 'cloud_upload', category: 'Dateien' },
+    { name: 'cloud_download', category: 'Dateien' },
+    { name: 'download', category: 'Dateien' },
+    { name: 'upload', category: 'Dateien' },
+    { name: 'file_download', category: 'Dateien' },
+    { name: 'file_upload', category: 'Dateien' },
+    
+    // Medien
+    { name: 'image', category: 'Medien' },
+    { name: 'photo', category: 'Medien' },
+    { name: 'photo_camera', category: 'Medien' },
+    { name: 'photo_library', category: 'Medien' },
+    { name: 'video_library', category: 'Medien' },
+    { name: 'movie', category: 'Medien' },
+    { name: 'videocam', category: 'Medien' },
+    { name: 'music_note', category: 'Medien' },
+    { name: 'audiotrack', category: 'Medien' },
+    { name: 'library_music', category: 'Medien' },
+    { name: 'play_arrow', category: 'Medien' },
+    { name: 'pause', category: 'Medien' },
+    { name: 'stop', category: 'Medien' },
+    { name: 'skip_next', category: 'Medien' },
+    { name: 'skip_previous', category: 'Medien' },
+    { name: 'volume_up', category: 'Medien' },
+    { name: 'volume_off', category: 'Medien' },
+    
+    // Business
+    { name: 'work', category: 'Business' },
+    { name: 'business', category: 'Business' },
+    { name: 'business_center', category: 'Business' },
+    { name: 'store', category: 'Business' },
+    { name: 'storefront', category: 'Business' },
+    { name: 'shopping_cart', category: 'Business' },
+    { name: 'shopping_bag', category: 'Business' },
+    { name: 'payment', category: 'Business' },
+    { name: 'credit_card', category: 'Business' },
+    { name: 'account_balance', category: 'Business' },
+    { name: 'account_balance_wallet', category: 'Business' },
+    { name: 'monetization_on', category: 'Business' },
+    { name: 'attach_money', category: 'Business' },
+    { name: 'trending_up', category: 'Business' },
+    { name: 'trending_down', category: 'Business' },
+    { name: 'show_chart', category: 'Business' },
+    { name: 'bar_chart', category: 'Business' },
+    { name: 'pie_chart', category: 'Business' },
+    
+    // Sozial
+    { name: 'person', category: 'Sozial' },
+    { name: 'person_outline', category: 'Sozial' },
+    { name: 'people', category: 'Sozial' },
+    { name: 'group', category: 'Sozial' },
+    { name: 'account_circle', category: 'Sozial' },
+    { name: 'account_box', category: 'Sozial' },
+    { name: 'favorite', category: 'Sozial' },
+    { name: 'favorite_border', category: 'Sozial' },
+    { name: 'thumb_up', category: 'Sozial' },
+    { name: 'thumb_down', category: 'Sozial' },
+    { name: 'share', category: 'Sozial' },
+    { name: 'cake', category: 'Sozial' },
+    { name: 'public', category: 'Sozial' },
+    { name: 'sentiment_satisfied', category: 'Sozial' },
+    { name: 'mood', category: 'Sozial' },
+    
+    // System
+    { name: 'settings', category: 'System' },
+    { name: 'settings_applications', category: 'System' },
+    { name: 'build', category: 'System' },
+    { name: 'build_circle', category: 'System' },
+    { name: 'search', category: 'System' },
+    { name: 'info', category: 'System' },
+    { name: 'info_outline', category: 'System' },
+    { name: 'help', category: 'System' },
+    { name: 'help_outline', category: 'System' },
+    { name: 'warning', category: 'System' },
+    { name: 'error', category: 'System' },
+    { name: 'error_outline', category: 'System' },
+    { name: 'check_circle', category: 'System' },
+    { name: 'check_circle_outline', category: 'System' },
+    { name: 'notifications', category: 'System' },
+    { name: 'notifications_active', category: 'System' },
+    { name: 'notifications_off', category: 'System' },
+    { name: 'update', category: 'System' },
+    { name: 'sync', category: 'System' },
+    { name: 'power_settings_new', category: 'System' },
+    { name: 'visibility', category: 'System' },
+    { name: 'visibility_off', category: 'System' },
+    
+    // Geräte
+    { name: 'computer', category: 'Geräte' },
+    { name: 'desktop_windows', category: 'Geräte' },
+    { name: 'phone_android', category: 'Geräte' },
+    { name: 'phone_iphone', category: 'Geräte' },
+    { name: 'tablet', category: 'Geräte' },
+    { name: 'tablet_mac', category: 'Geräte' },
+    { name: 'laptop', category: 'Geräte' },
+    { name: 'laptop_mac', category: 'Geräte' },
+    { name: 'tv', category: 'Geräte' },
+    { name: 'watch', category: 'Geräte' },
+    { name: 'smartphone', category: 'Geräte' },
+    { name: 'devices', category: 'Geräte' },
+    { name: 'headset', category: 'Geräte' },
+    { name: 'keyboard', category: 'Geräte' },
+    { name: 'mouse', category: 'Geräte' },
+    { name: 'print', category: 'Geräte' },
+    { name: 'scanner', category: 'Geräte' },
+    
+    // Entwicklung & Git
+    { name: 'code', category: 'Entwicklung' },
+    { name: 'code_off', category: 'Entwicklung' },
+    { name: 'developer_mode', category: 'Entwicklung' },
+    { name: 'bug_report', category: 'Entwicklung' },
+    { name: 'terminal', category: 'Entwicklung' },
+    { name: 'api', category: 'Entwicklung' },
+    { name: 'integration_instructions', category: 'Entwicklung' },
+    { name: 'source', category: 'Entwicklung' },
+    { name: 'account_tree', category: 'Entwicklung' },
+    { name: 'fork_right', category: 'Entwicklung' },
+    { name: 'merge_type', category: 'Entwicklung' },
+    { name: 'commit', category: 'Entwicklung' },
+    { name: 'compare_arrows', category: 'Entwicklung' },
+    { name: 'difference', category: 'Entwicklung' },
+    { name: 'webhook', category: 'Entwicklung' },
+    { name: 'data_object', category: 'Entwicklung' },
+    { name: 'database', category: 'Entwicklung' },
+    { name: 'schema', category: 'Entwicklung' },
+    { name: 'memory', category: 'Entwicklung' },
+    { name: 'developer_board', category: 'Entwicklung' },
+    
+    // Sicherheit
+    { name: 'lock', category: 'Sicherheit' },
+    { name: 'lock_open', category: 'Sicherheit' },
+    { name: 'lock_outline', category: 'Sicherheit' },
+    { name: 'security', category: 'Sicherheit' },
+    { name: 'verified_user', category: 'Sicherheit' },
+    { name: 'verified', category: 'Sicherheit' },
+    { name: 'vpn_key', category: 'Sicherheit' },
+    { name: 'vpn_lock', category: 'Sicherheit' },
+    { name: 'shield', category: 'Sicherheit' },
+    { name: 'fingerprint', category: 'Sicherheit' },
+    { name: 'admin_panel_settings', category: 'Sicherheit' },
+    { name: 'privacy_tip', category: 'Sicherheit' },
+    { name: 'key', category: 'Sicherheit' },
+    
+    // Orte & Karten
+    { name: 'location_on', category: 'Orte' },
+    { name: 'location_off', category: 'Orte' },
+    { name: 'map', category: 'Orte' },
+    { name: 'place', category: 'Orte' },
+    { name: 'navigation', category: 'Orte' },
+    { name: 'explore', category: 'Orte' },
+    { name: 'local_cafe', category: 'Orte' },
+    { name: 'local_restaurant', category: 'Orte' },
+    { name: 'local_pizza', category: 'Orte' },
+    { name: 'local_bar', category: 'Orte' },
+    { name: 'local_hotel', category: 'Orte' },
+    { name: 'local_airport', category: 'Orte' },
+    { name: 'flight', category: 'Orte' },
+    { name: 'directions_car', category: 'Orte' },
+    { name: 'directions_bus', category: 'Orte' },
+    { name: 'train', category: 'Orte' },
+    
+    // Zeit & Kalender
+    { name: 'schedule', category: 'Zeit' },
+    { name: 'access_time', category: 'Zeit' },
+    { name: 'alarm', category: 'Zeit' },
+    { name: 'timer', category: 'Zeit' },
+    { name: 'event', category: 'Zeit' },
+    { name: 'calendar_today', category: 'Zeit' },
+    { name: 'calendar_month', category: 'Zeit' },
+    { name: 'date_range', category: 'Zeit' },
+    { name: 'today', category: 'Zeit' },
+    { name: 'history', category: 'Zeit' },
+    
+    // Tools & Utilities
+    { name: 'construction', category: 'Tools' },
+    { name: 'handyman', category: 'Tools' },
+    { name: 'engineering', category: 'Tools' },
+    { name: 'science', category: 'Tools' },
+    { name: 'calculate', category: 'Tools' },
+    { name: 'rule', category: 'Tools' },
+    { name: 'colorize', category: 'Tools' },
+    { name: 'palette', category: 'Tools' },
+    { name: 'brush', category: 'Tools' },
+    { name: 'gradient', category: 'Tools' },
+    
+    // Verschiedenes
+    { name: 'star', category: 'Verschiedenes' },
+    { name: 'star_border', category: 'Verschiedenes' },
+    { name: 'star_half', category: 'Verschiedenes' },
+    { name: 'bookmark', category: 'Verschiedenes' },
+    { name: 'bookmark_border', category: 'Verschiedenes' },
+    { name: 'label', category: 'Verschiedenes' },
+    { name: 'label_important', category: 'Verschiedenes' },
+    { name: 'lightbulb', category: 'Verschiedenes' },
+    { name: 'lightbulb_outline', category: 'Verschiedenes' },
+    { name: 'extension', category: 'Verschiedenes' },
+    { name: 'widgets', category: 'Verschiedenes' },
+    { name: 'grade', category: 'Verschiedenes' },
+    { name: 'emoji_objects', category: 'Verschiedenes' },
+    { name: 'emoji_events', category: 'Verschiedenes' },
+    { name: 'sports_esports', category: 'Verschiedenes' },
+    { name: 'rocket_launch', category: 'Verschiedenes' },
+    { name: 'campaign', category: 'Verschiedenes' },
+  ];
+
+  constructor() { }
+
+  /**
+   * Gibt alle verfügbaren Icons zurück
+   */
+  getAllIcons(): MaterialIcon[] {
+    return this.icons;
+  }
+
+  /**
+   * Filtert Icons nach Suchbegriff
+   */
+  filterIcons(searchTerm: string): MaterialIcon[] {
+    if (!searchTerm) {
+      return this.icons;
+    }
+    
+    const term = searchTerm.toLowerCase();
+    return this.icons.filter(icon => 
+      icon.name.toLowerCase().includes(term) || 
+      icon.category.toLowerCase().includes(term)
+    );
+  }
+
+  /**
+   * Gibt Icon-Namen zurück (für Autocomplete-Display)
+   */
+  getIconNames(): string[] {
+    return this.icons.map(icon => icon.name);
+  }
+
+  /**
+   * Prüft, ob ein Icon-Name in der kuratierten Liste existiert
+   * Hinweis: Auch andere Material Icon Namen sind gültig, auch wenn sie nicht in der Liste sind
+   */
+  isValidIcon(iconName: string): boolean {
+    return this.icons.some(icon => icon.name === iconName);
+  }
+
+  /**
+   * Prüft, ob ein Icon in der kuratierten Liste ist
+   * Gibt true zurück für bekannte Icons, false für unbekannte (aber möglicherweise gültige) Icons
+   */
+  isKnownIcon(iconName: string): boolean {
+    return this.icons.some(icon => icon.name === iconName);
+  }
+
+  /**
+   * Gibt true zurück, wenn der String wahrscheinlich ein Material Icon Name ist
+   * (nur Kleinbuchstaben und Unterstriche)
+   */
+  looksLikeIconName(value: string): boolean {
+    return /^[a-z0-9_]+$/.test(value);
+  }
+}
--- a/frontend/src/app/services/theme.service.ts
+++ b/frontend/src/app/services/theme.service.ts
@@ -0,0 +1,93 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ThemeService {
+  private readonly THEME_COOKIE = 'theme-preference';
+  private darkModeSubject = new BehaviorSubject<boolean>(this.getInitialTheme());
+  
+  darkMode$ = this.darkModeSubject.asObservable();
+
+  constructor() {
+    // Theme beim Start anwenden
+    this.applyTheme(this.darkModeSubject.value);
+  }
+
+  /**
+   * Ermittelt das initiale Theme:
+   * 1. Cookie-Präferenz (falls vorhanden)
+   * 2. Browser-System-Einstellung (prefers-color-scheme)
+   */
+  private getInitialTheme(): boolean {
+    const cookieTheme = this.getCookie(this.THEME_COOKIE);
+    
+    if (cookieTheme !== null) {
+      return cookieTheme === 'dark';
+    }
+    
+    // Fallback auf System-Präferenz
+    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+  }
+
+  /**
+   * Schaltet zwischen Light und Dark Mode um
+   */
+  toggleTheme(): void {
+    const newTheme = !this.darkModeSubject.value;
+    this.setTheme(newTheme);
+  }
+
+  /**
+   * Setzt ein spezifisches Theme
+   */
+  setTheme(isDark: boolean): void {
+    this.darkModeSubject.next(isDark);
+    this.applyTheme(isDark);
+    this.setCookie(this.THEME_COOKIE, isDark ? 'dark' : 'light', 365);
+  }
+
+  /**
+   * Gibt das aktuelle Theme zurück
+   */
+  isDarkMode(): boolean {
+    return this.darkModeSubject.value;
+  }
+
+  /**
+   * Wendet das Theme auf das Document an
+   */
+  private applyTheme(isDark: boolean): void {
+    if (isDark) {
+      document.body.classList.add('dark-theme');
+    } else {
+      document.body.classList.remove('dark-theme');
+    }
+  }
+
+  /**
+   * Setzt ein Cookie
+   */
+  private setCookie(name: string, value: string, days: number): void {
+    const expires = new Date();
+    expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
+    document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=/;SameSite=Lax`;
+  }
+
+  /**
+   * Liest ein Cookie aus
+   */
+  private getCookie(name: string): string | null {
+    const nameEQ = name + '=';
+    const ca = document.cookie.split(';');
+    
+    for (let i = 0; i < ca.length; i++) {
+      let c = ca[i];
+      while (c.charAt(0) === ' ') c = c.substring(1, c.length);
+      if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
+    }
+    
+    return null;
+  }
+}
--- a/frontend/src/environments/environment.prod.ts
+++ b/frontend/src/environments/environment.prod.ts
@@ -0,0 +1,5 @@
+// Production Environment (Container)
+export const environment = {
+  production: true,
+  apiUrl: '/api/items'  // Relativer Pfad für Nginx Proxy
+};
--- a/frontend/src/environments/environment.ts
+++ b/frontend/src/environments/environment.ts
@@ -0,0 +1,5 @@
+// Development Environment
+export const environment = {
+  production: false,
+  apiUrl: 'http://localhost:8080/api/items'
+};
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -1 +1,231 @@
 /* You can add global styles to this file, and also import other style files */
+
+/* Import Material Design Prebuilt Themes */
+@import '@angular/material/prebuilt-themes/indigo-pink.css';
+
+/* Light Theme (Default) */
+:root {
+  --background-color: #fafafa;
+  --card-background: #ffffff;
+  --text-color: #000000;
+  --text-secondary: #666666;
+  --border-color: #e0e0e0;
+}
+
+/* Dark Theme */
+body.dark-theme {
+  --background-color: #121212;
+  --card-background: #1e1e1e;
+  --text-color: #ffffff;
+  --text-secondary: #b0b0b0;
+  --border-color: #333333;
+
+  /* Material Components Dark Theme Override */
+  background-color: var(--background-color);
+  color: var(--text-color);
+
+  /* Material Card Styling */
+  .mat-mdc-card {
+    background-color: var(--card-background) !important;
+    color: var(--text-color) !important;
+  }
+
+  /* Material Form Fields */
+  .mat-mdc-form-field {
+    color: var(--text-color);
+
+    .mat-mdc-form-field-focus-overlay {
+      background-color: rgba(255, 255, 255, 0.05);
+    }
+  }
+
+  .mat-mdc-text-field-wrapper {
+    background-color: #2a2a2a !important;
+  }
+
+  .mat-mdc-form-field-flex {
+    background-color: #2a2a2a !important;
+  }
+
+  .mdc-text-field--filled {
+    background-color: #2a2a2a !important;
+  }
+
+  .mat-mdc-input-element {
+    color: var(--text-color) !important;
+    caret-color: var(--text-color);
+  }
+
+  .mat-mdc-form-field-label {
+    color: var(--text-secondary) !important;
+  }
+
+  .mat-mdc-floating-label {
+    color: var(--text-secondary) !important;
+  }
+
+  .mdc-floating-label {
+    color: var(--text-secondary) !important;
+  }
+
+  /* Material Slide Toggle */
+  .mat-mdc-slide-toggle {
+    color: var(--text-color);
+
+    .mdc-switch__track {
+      background-color: #424242 !important;
+      border-color: #424242 !important;
+    }
+
+    .mdc-switch--selected .mdc-switch__track {
+      background-color: #3f51b5 !important;
+      border-color: #3f51b5 !important;
+    }
+  }
+
+  /* Material Autocomplete */
+  .mat-mdc-autocomplete-panel {
+    background-color: #2a2a2a !important;
+    color: var(--text-color);
+  }
+
+  .mat-mdc-option {
+    color: var(--text-color) !important;
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.08) !important;
+    }
+
+    &.mat-mdc-option-active {
+      background-color: rgba(255, 255, 255, 0.08) !important;
+    }
+  }
+
+  /* Material Table */
+  .mat-mdc-table {
+    background-color: var(--card-background);
+    color: var(--text-color);
+  }
+
+  .mat-mdc-header-cell {
+    color: var(--text-color);
+  }
+
+  .mat-mdc-cell {
+    color: var(--text-color);
+  }
+
+  /* Material Buttons */
+  .mat-mdc-raised-button, .mat-mdc-stroked-button, .mat-mdc-button {
+    color: var(--text-color);
+  }
+
+  .mat-mdc-stroked-button {
+    border-color: var(--border-color);
+  }
+
+  /* Material Icon Colors */
+  .mat-icon {
+    color: var(--text-color);
+  }
+
+  /* Card Titles and Content */
+  .mat-mdc-card-title {
+    color: var(--text-color) !important;
+  }
+
+  .mat-mdc-card-content {
+    color: var(--text-color) !important;
+  }
+
+  mat-card-title {
+    color: var(--text-color) !important;
+    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
+  }
+
+  mat-card-content {
+    color: var(--text-color) !important;
+  }
+
+  /* Dark theme border for card titles */
+  mat-card mat-card-title {
+    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
+  }
+
+  /* Slide Toggle Label */
+  .mat-mdc-slide-toggle-label {
+    color: var(--text-color) !important;
+  }
+
+  .mdc-label {
+    color: var(--text-color) !important;
+  }
+
+  /* Button Text */
+  .mat-mdc-button, .mat-mdc-stroked-button, .mat-mdc-raised-button {
+    color: var(--text-color) !important;
+
+    .mdc-button__label {
+      color: var(--text-color) !important;
+    }
+  }
+
+  .mat-mdc-stroked-button {
+    border-color: rgba(255, 255, 255, 0.3) !important;
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.08) !important;
+      border-color: rgba(255, 255, 255, 0.5) !important;
+    }
+  }
+
+  .mat-mdc-button.mat-primary {
+    color: #90caf9 !important;
+  }
+
+  /* Links */
+  a {
+    color: #90caf9;
+
+    &:hover {
+      color: #64b5f6;
+    }
+  }
+
+  /* Specific styling for icon picker */
+  .icon-browse-link a {
+    color: #90caf9 !important;
+
+    mat-icon {
+      color: #90caf9 !important;
+    }
+  }
+
+  .icon-preview {
+    background-color: #2a2a2a !important;
+    color: var(--text-color) !important;
+
+    .preview-label {
+      color: var(--text-secondary) !important;
+    }
+  }
+
+  /* Icon category in autocomplete */
+  .icon-category {
+    color: var(--text-secondary) !important;
+  }
+
+  .icon-option-text {
+    color: var(--text-color) !important;
+  }
+}
+
+/* Global Body Styling */
+body {
+  margin: 0;
+  padding: 0;
+  background-color: var(--background-color);
+  color: var(--text-color);
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
Author	SHA1	Message	Date
jafreli	c923d8e20e	Merge pull request 'Add dark mode theme with toggle button and improved UI styling' (#1 ) from ui-improvements into main All checks were successful Build and Push Docker Images / build-and-push-backend (push) Successful in 8s Details Build and Push Docker Images / build-and-push-frontend (push) Successful in 16s Details Reviewed-on: #1	2026-01-31 17:31:37 +00:00
jafreli	0a5a941222	Add dark mode theme with toggle button and improved UI styling	2026-01-31 18:30:35 +01:00
jafreli	86068e257f	update: icons & prod file All checks were successful Build and Push Docker Images / build-and-push-backend (push) Successful in 8s Details Build and Push Docker Images / build-and-push-frontend (push) Successful in 15s Details	2026-01-31 17:58:50 +01:00
jafreli	fa86607af3	update: icon mechanic All checks were successful Build and Push Docker Images / build-and-push-backend (push) Successful in 7s Details Build and Push Docker Images / build-and-push-frontend (push) Successful in 15s Details	2026-01-31 17:41:20 +01:00
jafreli	be813ffbf0	fix: kachel spacing & /admin	2026-01-31 17:12:45 +01:00
jafreli	96bf262884	test All checks were successful Build and Push Docker Images / build-and-push-backend (push) Successful in 7s Details Build and Push Docker Images / build-and-push-frontend (push) Successful in 14s Details	2026-01-31 01:50:34 +01:00
jafreli	b479bdefa4	test All checks were successful Build and Push Docker Images / build-and-push-backend (push) Successful in 7s Details Build and Push Docker Images / build-and-push-frontend (push) Successful in 15s Details	2026-01-31 01:45:23 +01:00
jafreli	0112b35eee	test All checks were successful Build and Push Docker Images / build-and-push-backend (push) Successful in 6s Details Build and Push Docker Images / build-and-push-frontend (push) Successful in 15s Details	2026-01-31 01:42:18 +01:00
jafreli	7b90cac1d1	fix: path All checks were successful Build and Push Docker Images / build-and-push-backend (push) Successful in 7s Details Build and Push Docker Images / build-and-push-frontend (push) Successful in 14s Details	2026-01-31 01:38:56 +01:00
jafreli	894a6f01c2	fix: add gcc All checks were successful Build and Push Docker Images / build-and-push-backend (push) Successful in 1m4s Details Build and Push Docker Images / build-and-push-frontend (push) Successful in 6s Details	2026-01-31 01:32:32 +01:00