From 76c02434655f67b07e6a1fe8a84ff50b63e1b5b9 Mon Sep 17 00:00:00 2001
From: "Felix T.J. Dietrich" <felix_dietrich@gmx.de>
Date: Mon, 26 Aug 2024 18:05:35 +0200
Subject: [PATCH 01/24] Update theme components to use signals

---
 src/main/webapp/app/app.module.ts             |   4 +-
 .../core/theme/theme-switch.component.html    |  10 +-
 .../app/core/theme/theme-switch.component.ts  |  79 ++++++-----
 .../webapp/app/core/theme/theme.module.ts     |  12 --
 .../webapp/app/core/theme/theme.service.ts    | 125 +++++++-----------
 .../example-modeling-submission.component.ts  |  31 ++---
 ...gramming-exercise-instruction.component.ts |   3 +-
 .../programming-exercise-plant-uml.service.ts |   8 +-
 .../progress-bar/progress-bar.component.ts    |  13 +-
 .../ace-editor/ace-editor.component.ts        |   6 +-
 .../metis/emoji/emoji-picker.component.ts     |   3 +-
 .../app/shared/metis/emoji/emoji.component.ts |   3 +-
 .../monaco-diff-editor.component.ts           |   3 +-
 .../monaco-editor/monaco-editor.component.ts  |   4 +-
 14 files changed, 136 insertions(+), 168 deletions(-)
 delete mode 100644 src/main/webapp/app/core/theme/theme.module.ts

diff --git a/src/main/webapp/app/app.module.ts b/src/main/webapp/app/app.module.ts
index 0a415aa50d80..c8b74314e07a 100644
--- a/src/main/webapp/app/app.module.ts
+++ b/src/main/webapp/app/app.module.ts
@@ -22,7 +22,7 @@ import { OrionOutdatedComponent } from 'app/shared/orion/outdated-plugin-warning
 import { LoadingNotificationComponent } from 'app/shared/notification/loading-notification/loading-notification.component';
 import { NotificationPopupComponent } from 'app/shared/notification/notification-popup/notification-popup.component';
 import { UserSettingsModule } from 'app/shared/user-settings/user-settings.module';
-import { ThemeModule } from 'app/core/theme/theme.module';
+import { ThemeSwitchComponent } from 'app/core/theme/theme-switch.component';
 import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module';
 import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
 import { artemisIconPack } from 'src/main/webapp/content/icons/icons';
@@ -44,7 +44,7 @@ import { ScrollingModule } from '@angular/cdk/scrolling';
         ArtemisComplaintsModule,
         ArtemisHeaderExercisePageWithDetailsModule,
         UserSettingsModule,
-        ThemeModule,
+        ThemeSwitchComponent,
         ArtemisSharedComponentModule,
         ScrollingModule,
     ],
diff --git a/src/main/webapp/app/core/theme/theme-switch.component.html b/src/main/webapp/app/core/theme/theme-switch.component.html
index 24772ad09ea6..d7dd855f628b 100644
--- a/src/main/webapp/app/core/theme/theme-switch.component.html
+++ b/src/main/webapp/app/core/theme/theme-switch.component.html
@@ -2,9 +2,9 @@
     <div class="popover-content" (mouseenter)="openPopover()" id="theme-switch-popover-content">
         <div class="head">☾ <span jhiTranslate="artemisApp.theme.darkMode"></span> ☾</div>
         <div class="switch-box">
-            <div><fa-icon [icon]="faSync" /> {{ 'artemisApp.theme.sync' | artemisTranslate }}</div>
+            <div><fa-icon [icon]="faSync" /> <span jhiTranslate="artemisApp.theme.sync"></span></div>
             <div class="form-switch">
-                <input class="form-check-input" type="checkbox" (click)="toggleSynced()" [checked]="isSynced" />
+                <input class="form-check-input" type="checkbox" (click)="toggleSynced()" [checked]="isSyncedWithOS()" />
             </div>
         </div>
     </div>
@@ -17,10 +17,10 @@
         [triggers]="''"
         #popover="ngbPopover"
         [autoClose]="false"
-        [animation]="animate"
-        [placement]="popoverPlacement"
+        [animation]="animate()"
+        [placement]="popoverPlacement()"
     >
-        <div class="theme-toggle" [ngClass]="{ dark: isDark }" id="theme-toggle">
+        <div class="theme-toggle" [class.dark]="isDarkTheme()" id="theme-toggle">
             <svg class="sun-and-moon" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24">
                 <circle class="sun" cx="12" cy="12" r="6" mask="url(#moon-mask)" fill="currentColor" />
                 <g class="sun-beams" stroke="currentColor">
diff --git a/src/main/webapp/app/core/theme/theme-switch.component.ts b/src/main/webapp/app/core/theme/theme-switch.component.ts
index 06aa8bab270c..76f2c041f28a 100644
--- a/src/main/webapp/app/core/theme/theme-switch.component.ts
+++ b/src/main/webapp/app/core/theme/theme-switch.component.ts
@@ -1,8 +1,13 @@
-import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnDestroy, OnInit, computed, inject, input, signal, viewChild } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
 import { NgbPopover } from '@ng-bootstrap/ng-bootstrap';
+import { PlacementArray } from '@ng-bootstrap/ng-bootstrap/util/positioning';
 import { Theme, ThemeService } from 'app/core/theme/theme.service';
-import { fromEvent } from 'rxjs';
+import { Subscription, delay, fromEvent, timer } from 'rxjs';
 import { faSync } from '@fortawesome/free-solid-svg-icons';
+import { ArtemisSharedModule } from 'app/shared/shared.module';
+import { toObservable } from '@angular/core/rxjs-interop';
 
 /**
  * Displays a sun or a moon in the navbar, depending on the current theme.
@@ -13,70 +18,72 @@ import { faSync } from '@fortawesome/free-solid-svg-icons';
     selector: 'jhi-theme-switch',
     templateUrl: './theme-switch.component.html',
     styleUrls: ['theme-switch.component.scss'],
+    imports: [TranslateModule, CommonModule, ArtemisSharedModule],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
 })
-export class ThemeSwitchComponent implements OnInit {
-    @ViewChild('popover') popover: NgbPopover;
+export class ThemeSwitchComponent implements OnInit, OnDestroy {
+    popoverPlacement = input.required<PlacementArray>();
+    popover = viewChild.required<NgbPopover>('popover');
 
-    @Input() popoverPlacement: string;
+    isDarkTheme = computed(() => this.themeService.currentTheme() === Theme.DARK);
+    isSyncedWithOS = computed(() => this.themeService.preference() === undefined);
 
-    isDark = false;
-    isSynced = false;
-    animate = true;
-    openPopupAfterNextChange = false;
-    closeTimeout: any;
+    animate = signal(true);
+    openPopupAfterNextChange = signal(false);
 
-    // Icons
-    faSync = faSync;
+    private themeService = inject(ThemeService);
 
-    constructor(private themeService: ThemeService) {}
+    protected readonly faSync = faSync;
 
-    ngOnInit() {
-        // Listen to theme changes to change our own state accordingly
-        this.themeService.getCurrentThemeObservable().subscribe((theme) => {
-            this.isDark = theme === Theme.DARK;
-            this.animate = true;
+    private closeTimerSubscription: Subscription | undefined;
+    private reopenPopupSubscription = toObservable(this.themeService.currentTheme)
+        .pipe(delay(250))
+        .subscribe(() => {
+            this.animate.set(true);
             if (this.openPopupAfterNextChange) {
-                this.openPopupAfterNextChange = false;
-                setTimeout(() => this.openPopover(), 250);
+                this.openPopupAfterNextChange.set(false);
+                this.openPopover();
             }
         });
 
-        // Listen to preference changes
-        this.themeService.getPreferenceObservable().subscribe((themeOrUndefined) => {
-            this.isSynced = !themeOrUndefined;
-        });
-
+    ngOnInit() {
         // Workaround as we can't dynamically change the "autoClose" property on popovers
         fromEvent(window, 'click').subscribe((e) => {
             const popoverContentElement = document.getElementById('theme-switch-popover-content');
-            if (this.popover.isOpen() && !popoverContentElement?.contains(e.target as Node)) {
+            if (this.popover().isOpen() && !popoverContentElement?.contains(e.target as Node)) {
                 this.closePopover();
             }
         });
     }
 
+    ngOnDestroy() {
+        this.reopenPopupSubscription.unsubscribe();
+        this.closeTimerSubscription?.unsubscribe();
+    }
+
     openPopover() {
-        this.popover?.open();
-        clearTimeout(this.closeTimeout);
+        this.popover().open();
+        this.closeTimerSubscription?.unsubscribe();
     }
 
     closePopover() {
-        clearTimeout(this.closeTimeout);
-        this.popover?.close();
+        this.popover().close();
+        this.closeTimerSubscription?.unsubscribe();
     }
 
     mouseLeave() {
-        clearTimeout(this.closeTimeout);
-        this.closeTimeout = setTimeout(() => this.closePopover(), 250);
+        this.closeTimerSubscription?.unsubscribe();
+        this.closeTimerSubscription = timer(250).subscribe(() => this.closePopover());
     }
 
     /**
      * Changes the theme to the currently not active theme.
      */
     toggleTheme() {
-        this.animate = false;
-        this.openPopupAfterNextChange = true;
-        setTimeout(() => this.themeService.applyThemeExplicitly(this.isDark ? Theme.LIGHT : Theme.DARK));
+        this.animate.set(false);
+        this.openPopupAfterNextChange.set(true);
+        this.themeService.applyTheme(this.isDarkTheme() ? Theme.LIGHT : Theme.DARK);
     }
 
     /**
@@ -85,6 +92,6 @@ export class ThemeSwitchComponent implements OnInit {
      * - if it's currently not synced, we remove the preference to apply the system theme
      */
     toggleSynced() {
-        this.themeService.applyThemeExplicitly(this.isSynced ? this.themeService.getCurrentTheme() : undefined);
+        this.themeService.applyTheme(this.isSyncedWithOS() ? this.themeService.currentTheme() : undefined);
     }
 }
diff --git a/src/main/webapp/app/core/theme/theme.module.ts b/src/main/webapp/app/core/theme/theme.module.ts
deleted file mode 100644
index 30ce3f4c73c7..000000000000
--- a/src/main/webapp/app/core/theme/theme.module.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ArtemisSharedModule } from 'app/shared/shared.module';
-import { TranslateModule } from '@ngx-translate/core';
-import { ThemeSwitchComponent } from 'app/core/theme/theme-switch.component';
-
-@NgModule({
-    declarations: [ThemeSwitchComponent],
-    imports: [TranslateModule, CommonModule, ArtemisSharedModule],
-    exports: [ThemeSwitchComponent],
-})
-export class ThemeModule {}
diff --git a/src/main/webapp/app/core/theme/theme.service.ts b/src/main/webapp/app/core/theme/theme.service.ts
index a6fa87c0c01a..8eec0eeaf57b 100644
--- a/src/main/webapp/app/core/theme/theme.service.ts
+++ b/src/main/webapp/app/core/theme/theme.service.ts
@@ -1,7 +1,6 @@
-import { Injectable } from '@angular/core';
+import { Injectable, effect, inject, signal } from '@angular/core';
 import { IconDefinition, faMoon, faSun } from '@fortawesome/free-solid-svg-icons';
 import { LocalStorageService } from 'ngx-webstorage';
-import { BehaviorSubject, Observable } from 'rxjs';
 
 export const THEME_LOCAL_STORAGE_KEY = 'artemisapp.theme.preference';
 export const THEME_OVERRIDE_ID = 'artemis-theme-override';
@@ -48,43 +47,42 @@ export class Theme {
 })
 export class ThemeService {
     /**
-     * The currently applied theme
+     * The currently applied theme as WritableSignal.
      */
-    private currentTheme: Theme = Theme.LIGHT;
-    /**
-     * A behavior subject that fires for each new applied theme.
-     */
-    private currentThemeSubject: BehaviorSubject<Theme> = new BehaviorSubject<Theme>(Theme.LIGHT);
-    /**
-     * A behavior subject that fires if the user preference changes.
-     * Can be either a theme for an explicit theme or undefined if system settings are preferred
-     */
-    private preferenceSubject: BehaviorSubject<Theme | undefined> = new BehaviorSubject<Theme | undefined>(undefined);
-
-    private darkSchemeMediaQuery: MediaQueryList;
-
-    constructor(private localStorageService: LocalStorageService) {}
+    private _currentTheme = signal(Theme.LIGHT);
 
     /**
-     * Returns the currently active theme.
+     * The currently applied theme as ReadonlySignal.
      */
-    public getCurrentTheme(): Theme {
-        return this.currentTheme;
-    }
+    public readonly currentTheme = this._currentTheme.asReadonly();
 
     /**
-     * Returns an observable that will be fired immediately for the current theme and for each future theme change until unsubscribed.
+     * The user preference changes as WritableSignal.
+     * If changed, the theme is applied immediately.
      */
-    public getCurrentThemeObservable(): Observable<Theme> {
-        return this.currentThemeSubject.asObservable();
-    }
+    private _preference = signal<Theme | undefined>(undefined);
 
     /**
-     * Returns an observable that will be fired immediately for the current user preference and if the user preference changes.
-     * Can be either a theme for an explicit theme or undefined if system settings are preferred
+     * The user preference changes as ReadonlySignal.
+     * Can be either a theme for an explicit theme or undefined if system settings are preferred.
      */
-    public getPreferenceObservable(): Observable<Theme | undefined> {
-        return this.preferenceSubject.asObservable();
+    public readonly preference = this._preference.asReadonly();
+
+    private localStorageService = inject(LocalStorageService);
+
+    private darkSchemeMediaQuery: MediaQueryList;
+
+    constructor() {
+        // Apply the theme as soon as the preference changes
+        effect(
+            () => {
+                this.applyThemeInternal(this.preference() ?? Theme.LIGHT);
+            },
+            {
+                // This should usually be avoided in favor of `computed()`
+                allowSignalWrites: true,
+            },
+        );
     }
 
     /**
@@ -95,40 +93,22 @@ export class ThemeService {
     initialize() {
         this.darkSchemeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
         if (this.darkSchemeMediaQuery.media !== 'not all') {
-            this.darkSchemeMediaQuery.addEventListener('change', () => this.applyPreferredTheme());
+            this.darkSchemeMediaQuery.addEventListener('change', () => {
+                if (this.darkSchemeMediaQuery.matches) {
+                    this._preference.set(Theme.DARK);
+                } else {
+                    this._preference.set(Theme.LIGHT);
+                }
+            });
         }
 
         addEventListener('storage', (event) => {
             if (event.key === 'jhi-' + THEME_LOCAL_STORAGE_KEY) {
-                this.preferenceSubject.next(this.getStoredTheme());
-                this.applyPreferredTheme();
+                this._preference.set(this.getStoredTheme());
             }
         });
 
-        this.applyPreferredTheme();
-        this.preferenceSubject.next(this.getStoredTheme());
-    }
-
-    /**
-     * Applies the preferred theme.
-     * The preferred theme is either
-     * - the theme stored in local storage, if present, or else
-     * - the system preference, if present, or else
-     * - the default theme
-     */
-    private applyPreferredTheme() {
-        const storedTheme = this.getStoredTheme();
-        if (storedTheme) {
-            this.applyThemeInternal(storedTheme);
-            return;
-        }
-
-        if (this.darkSchemeMediaQuery.matches) {
-            this.applyThemeInternal(Theme.DARK);
-            return;
-        }
-
-        this.applyThemeInternal(Theme.LIGHT);
+        this._preference.set(this.getStoredTheme());
     }
 
     /**
@@ -140,7 +120,7 @@ export class ThemeService {
 
         // An unknown theme was stored. Let's clear it
         if (storedIdentifier && !storedTheme) {
-            this.storePreference(undefined);
+            this.localStorageService.clear(THEME_LOCAL_STORAGE_KEY);
         }
 
         return storedTheme;
@@ -180,9 +160,13 @@ export class ThemeService {
      *
      * @param theme the theme to be applied; pass undefined to use system preference mode
      */
-    public applyThemeExplicitly(theme: Theme | undefined) {
-        this.storePreference(theme);
-        this.applyPreferredTheme();
+    public applyTheme(theme: Theme | undefined) {
+        if (theme) {
+            this.localStorageService.store(THEME_LOCAL_STORAGE_KEY, theme.identifier);
+        } else {
+            this.localStorageService.clear(THEME_LOCAL_STORAGE_KEY);
+        }
+        this._preference.set(theme);
     }
 
     private applyThemeInternal(theme: Theme) {
@@ -191,7 +175,7 @@ export class ThemeService {
         }
 
         // Do not inject or remove anything from the DOM if the applied theme is the current theme
-        if (this.currentTheme === theme) {
+        if (this._currentTheme() === theme) {
             return;
         }
 
@@ -202,9 +186,7 @@ export class ThemeService {
             // The default theme is always injected by Angular; therefore, we just need to remove
             // our theme override, if present
             overrideTag?.remove();
-
-            this.currentTheme = theme;
-            this.currentThemeSubject.next(theme);
+            this._currentTheme.set(theme);
         } else {
             // If the theme is not the default theme, we need to add a theme override stylesheet to the page header
 
@@ -222,8 +204,7 @@ export class ThemeService {
             // and fire the subject to inform other services and components
             newTag.onload = () => {
                 overrideTag?.remove();
-                this.currentTheme = theme;
-                this.currentThemeSubject.next(theme);
+                this._currentTheme.set(theme);
             };
 
             // Insert the new stylesheet link tag after the last existing link tag
@@ -233,18 +214,6 @@ export class ThemeService {
         }
     }
 
-    private storePreference(theme?: Theme) {
-        if (theme) {
-            this.localStorageService.store(THEME_LOCAL_STORAGE_KEY, theme.identifier);
-        } else {
-            this.localStorageService.clear(THEME_LOCAL_STORAGE_KEY);
-        }
-
-        if (this.preferenceSubject.getValue() !== theme) {
-            this.preferenceSubject.next(theme);
-        }
-    }
-
     /**
      * Hides the notification sidebar as there will be an overlay ove the whole page
      * that covers details of the exam summary (=> exam summary cannot be read).
diff --git a/src/main/webapp/app/exercises/modeling/manage/example-modeling/example-modeling-submission.component.ts b/src/main/webapp/app/exercises/modeling/manage/example-modeling/example-modeling-submission.component.ts
index 72328f495613..1800026ba5a1 100644
--- a/src/main/webapp/app/exercises/modeling/manage/example-modeling/example-modeling-submission.component.ts
+++ b/src/main/webapp/app/exercises/modeling/manage/example-modeling/example-modeling-submission.component.ts
@@ -28,6 +28,7 @@ import { forkJoin } from 'rxjs';
 import { filterInvalidFeedback } from 'app/exercises/modeling/assess/modeling-assessment.util';
 import { Theme, ThemeService } from 'app/core/theme/theme.service';
 import { scrollToTopOfPage } from 'app/shared/util/utils';
+import { toObservable } from '@angular/core/rxjs-interop';
 
 @Component({
     selector: 'jhi-example-modeling-submission',
@@ -116,7 +117,21 @@ export class ExampleModelingSubmissionComponent implements OnInit, FeedbackMarke
         private navigationUtilService: ArtemisNavigationUtilService,
         private changeDetector: ChangeDetectorRef,
         private themeService: ThemeService,
-    ) {}
+    ) {
+        toObservable(this.themeService.preference).subscribe((themeOrUndefined) => {
+            if (themeOrUndefined === Theme.DARK) {
+                this.highlightColor = 'darkblue';
+            } else {
+                this.highlightColor = 'lightblue';
+            }
+
+            const updatedHighlights = new Map<string, string>();
+            this.highlightedElements.forEach((_, key) => {
+                updatedHighlights.set(key, this.highlightColor);
+            });
+            this.highlightedElements = updatedHighlights;
+        });
+    }
 
     ngOnInit(): void {
         this.exerciseId = Number(this.route.snapshot.paramMap.get('exerciseId'));
@@ -138,20 +153,6 @@ export class ExampleModelingSubmissionComponent implements OnInit, FeedbackMarke
             this.assessmentMode = true;
         }
         this.loadAll();
-
-        this.themeService.getPreferenceObservable().subscribe((themeOrUndefined) => {
-            if (themeOrUndefined === Theme.DARK) {
-                this.highlightColor = 'darkblue';
-            } else {
-                this.highlightColor = 'lightblue';
-            }
-
-            const updatedHighlights = new Map<string, string>();
-            this.highlightedElements.forEach((_, key) => {
-                updatedHighlights.set(key, this.highlightColor);
-            });
-            this.highlightedElements = updatedHighlights;
-        });
     }
 
     private loadAll(): void {
diff --git a/src/main/webapp/app/exercises/programming/shared/instructions-render/programming-exercise-instruction.component.ts b/src/main/webapp/app/exercises/programming/shared/instructions-render/programming-exercise-instruction.component.ts
index 75e060446c19..6652ccf7183d 100644
--- a/src/main/webapp/app/exercises/programming/shared/instructions-render/programming-exercise-instruction.component.ts
+++ b/src/main/webapp/app/exercises/programming/shared/instructions-render/programming-exercise-instruction.component.ts
@@ -39,6 +39,7 @@ import diff from 'html-diff-ts';
 import { ProgrammingExerciseInstructionService } from 'app/exercises/programming/shared/instructions-render/service/programming-exercise-instruction.service';
 import { escapeStringForUseInRegex } from 'app/shared/util/global.utils';
 import { ProgrammingExerciseInstructionTaskStatusComponent } from 'app/exercises/programming/shared/instructions-render/task/programming-exercise-instruction-task-status.component';
+import { toObservable } from '@angular/core/rxjs-interop';
 
 @Component({
     selector: 'jhi-programming-exercise-instructions',
@@ -105,7 +106,7 @@ export class ProgrammingExerciseInstructionComponent implements OnChanges, OnDes
         private injector: EnvironmentInjector,
     ) {
         this.programmingExerciseTaskWrapper.viewContainerRef = this.viewContainerRef;
-        this.themeChangeSubscription = themeService.getCurrentThemeObservable().subscribe(() => {
+        this.themeChangeSubscription = toObservable(themeService.currentTheme).subscribe(() => {
             this.updateMarkdown();
         });
     }
diff --git a/src/main/webapp/app/exercises/programming/shared/instructions-render/service/programming-exercise-plant-uml.service.ts b/src/main/webapp/app/exercises/programming/shared/instructions-render/service/programming-exercise-plant-uml.service.ts
index 801bdaa4d19c..c6fa278c336b 100644
--- a/src/main/webapp/app/exercises/programming/shared/instructions-render/service/programming-exercise-plant-uml.service.ts
+++ b/src/main/webapp/app/exercises/programming/shared/instructions-render/service/programming-exercise-plant-uml.service.ts
@@ -4,6 +4,7 @@ import { Cacheable } from 'ts-cacheable';
 import { Observable, Subject } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
 import { Theme, ThemeService } from 'app/core/theme/theme.service';
+import { toObservable } from '@angular/core/rxjs-interop';
 
 const themeChangedSubject = new Subject<void>();
 
@@ -21,8 +22,7 @@ export class ProgrammingExercisePlantUmlService {
         private themeService: ThemeService,
     ) {
         this.encoder = new HttpUrlCustomEncoder();
-        this.themeService
-            .getCurrentThemeObservable()
+        toObservable(this.themeService.currentTheme)
             .pipe(tap(() => themeChangedSubject.next()))
             .subscribe();
     }
@@ -43,7 +43,7 @@ export class ProgrammingExercisePlantUmlService {
     getPlantUmlImage(plantUml: string) {
         return this.http
             .get(`${this.resourceUrl}/png`, {
-                params: new HttpParams({ encoder: this.encoder }).set('plantuml', plantUml).set('useDarkTheme', this.themeService.getCurrentTheme() === Theme.DARK),
+                params: new HttpParams({ encoder: this.encoder }).set('plantuml', plantUml).set('useDarkTheme', this.themeService.currentTheme() === Theme.DARK),
                 responseType: 'arraybuffer',
             })
             .pipe(map((res) => this.convertPlantUmlResponseToBase64(res)));
@@ -64,7 +64,7 @@ export class ProgrammingExercisePlantUmlService {
     })
     getPlantUmlSvg(plantUml: string): Observable<string> {
         return this.http.get(`${this.resourceUrl}/svg`, {
-            params: new HttpParams({ encoder: this.encoder }).set('plantuml', plantUml).set('useDarkTheme', this.themeService.getCurrentTheme() === Theme.DARK),
+            params: new HttpParams({ encoder: this.encoder }).set('plantuml', plantUml).set('useDarkTheme', this.themeService.currentTheme() === Theme.DARK),
             responseType: 'text',
         });
     }
diff --git a/src/main/webapp/app/shared/dashboards/tutor-participation-graph/progress-bar/progress-bar.component.ts b/src/main/webapp/app/shared/dashboards/tutor-participation-graph/progress-bar/progress-bar.component.ts
index ee9ba578b47b..1da8f8762db0 100644
--- a/src/main/webapp/app/shared/dashboards/tutor-participation-graph/progress-bar/progress-bar.component.ts
+++ b/src/main/webapp/app/shared/dashboards/tutor-participation-graph/progress-bar/progress-bar.component.ts
@@ -1,13 +1,14 @@
-import { ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
 import { round } from 'app/shared/util/utils';
 import { Theme, ThemeService } from 'app/core/theme/theme.service';
 import { Subscription } from 'rxjs';
+import { toObservable } from '@angular/core/rxjs-interop';
 
 @Component({
     selector: 'jhi-progress-bar',
     templateUrl: './progress-bar.component.html',
 })
-export class ProgressBarComponent implements OnInit, OnChanges, OnDestroy {
+export class ProgressBarComponent implements OnChanges, OnDestroy {
     @Input() public tooltip: string;
     @Input() public percentage: number;
     @Input() public numerator: number;
@@ -20,10 +21,8 @@ export class ProgressBarComponent implements OnInit, OnChanges, OnDestroy {
     constructor(
         private themeService: ThemeService,
         private ref: ChangeDetectorRef,
-    ) {}
-
-    ngOnInit() {
-        this.themeSubscription = this.themeService.getCurrentThemeObservable().subscribe(() => {
+    ) {
+        this.themeSubscription = toObservable(this.themeService.currentTheme).subscribe(() => {
             this.chooseProgressBarTextColor();
 
             // Manually run change detection as it doesn't do it automatically for some reason
@@ -60,7 +59,7 @@ export class ProgressBarComponent implements OnInit, OnChanges, OnDestroy {
      * Function to change the text color to indicate a finished status
      */
     chooseProgressBarTextColor() {
-        switch (this.themeService.getCurrentTheme()) {
+        switch (this.themeService.currentTheme()) {
             case Theme.DARK:
                 this.foregroundColorClass = 'text-white';
                 break;
diff --git a/src/main/webapp/app/shared/markdown-editor/ace-editor/ace-editor.component.ts b/src/main/webapp/app/shared/markdown-editor/ace-editor/ace-editor.component.ts
index d0ddebb5007b..453595cdf205 100644
--- a/src/main/webapp/app/shared/markdown-editor/ace-editor/ace-editor.component.ts
+++ b/src/main/webapp/app/shared/markdown-editor/ace-editor/ace-editor.component.ts
@@ -22,6 +22,7 @@ import 'brace/mode/assembly_x86';
 import 'brace/mode/vhdl';
 import { ThemeService } from 'app/core/theme/theme.service';
 import { Subscription } from 'rxjs';
+import { toObservable } from '@angular/core/rxjs-interop';
 
 declare let ace: any;
 
@@ -80,6 +81,7 @@ export class AceEditorComponent implements ControlValueAccessor, OnInit, OnDestr
             this._editor = ace['edit'](el);
         });
         this._editor.$blockScrolling = Infinity;
+        this.themeSubscription = toObservable(this.themeService.currentTheme).subscribe(() => this.setThemeFromMode());
     }
 
     ngOnInit() {
@@ -101,8 +103,6 @@ export class AceEditorComponent implements ControlValueAccessor, OnInit, OnDestr
     initEvents() {
         this._editor.on('change', () => this.updateText());
         this._editor.on('paste', () => this.updateText());
-
-        this.themeSubscription = this.themeService.getCurrentThemeObservable().subscribe(() => this.setThemeFromMode());
     }
 
     updateText() {
@@ -171,7 +171,7 @@ export class AceEditorComponent implements ControlValueAccessor, OnInit, OnDestr
     }
 
     private setThemeFromMode() {
-        const currentApplicationTheme = this.themeService.getCurrentTheme();
+        const currentApplicationTheme = this.themeService.currentTheme();
         this._theme = this._mode.toLowerCase() === 'markdown' ? currentApplicationTheme.markdownAceTheme : currentApplicationTheme.codeAceTheme;
         this._editor.setTheme(`ace/theme/${this._theme}`);
     }
diff --git a/src/main/webapp/app/shared/metis/emoji/emoji-picker.component.ts b/src/main/webapp/app/shared/metis/emoji/emoji-picker.component.ts
index 7dcaa9cfbfeb..3f180a6bbdc8 100644
--- a/src/main/webapp/app/shared/metis/emoji/emoji-picker.component.ts
+++ b/src/main/webapp/app/shared/metis/emoji/emoji-picker.component.ts
@@ -3,6 +3,7 @@ import { Theme, ThemeService } from 'app/core/theme/theme.service';
 import { Subscription } from 'rxjs';
 import { EmojiUtils } from 'app/shared/metis/emoji/emoji.utils';
 import { EmojiData } from '@ctrl/ngx-emoji-mart/ngx-emoji';
+import { toObservable } from '@angular/core/rxjs-interop';
 
 @Component({
     selector: 'jhi-emoji-picker',
@@ -21,7 +22,7 @@ export class EmojiPickerComponent implements OnDestroy {
     themeSubscription: Subscription;
 
     constructor(private themeService: ThemeService) {
-        this.themeSubscription = themeService.getCurrentThemeObservable().subscribe((theme) => {
+        this.themeSubscription = toObservable(themeService.currentTheme).subscribe((theme) => {
             this.dark = theme === Theme.DARK;
             this.singleImageFunction = this.dark ? EmojiUtils.singleDarkModeEmojiUrlFn : () => '';
         });
diff --git a/src/main/webapp/app/shared/metis/emoji/emoji.component.ts b/src/main/webapp/app/shared/metis/emoji/emoji.component.ts
index 75d21024aad9..6b5d3749a41f 100644
--- a/src/main/webapp/app/shared/metis/emoji/emoji.component.ts
+++ b/src/main/webapp/app/shared/metis/emoji/emoji.component.ts
@@ -2,6 +2,7 @@ import { Component, Input, OnDestroy } from '@angular/core';
 import { Theme, ThemeService } from 'app/core/theme/theme.service';
 import { Subscription } from 'rxjs';
 import { EmojiUtils } from 'app/shared/metis/emoji/emoji.utils';
+import { toObservable } from '@angular/core/rxjs-interop';
 
 @Component({
     selector: 'jhi-emoji',
@@ -17,7 +18,7 @@ export class EmojiComponent implements OnDestroy {
     themeSubscription: Subscription;
 
     constructor(private themeService: ThemeService) {
-        this.themeSubscription = themeService.getCurrentThemeObservable().subscribe((theme) => {
+        this.themeSubscription = toObservable(themeService.currentTheme).subscribe((theme) => {
             this.dark = theme === Theme.DARK;
         });
     }
diff --git a/src/main/webapp/app/shared/monaco-editor/monaco-diff-editor.component.ts b/src/main/webapp/app/shared/monaco-editor/monaco-diff-editor.component.ts
index 4f66f4813804..91a281094413 100644
--- a/src/main/webapp/app/shared/monaco-editor/monaco-diff-editor.component.ts
+++ b/src/main/webapp/app/shared/monaco-editor/monaco-diff-editor.component.ts
@@ -1,4 +1,5 @@
 import { Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, Renderer2, ViewEncapsulation } from '@angular/core';
+import { toObservable } from '@angular/core/rxjs-interop';
 import { Theme, ThemeService } from 'app/core/theme/theme.service';
 
 import * as monaco from 'monaco-editor';
@@ -62,6 +63,7 @@ export class MonacoDiffEditorComponent implements OnInit, OnDestroy {
         renderer.appendChild(elementRef.nativeElement, this.monacoDiffEditorContainerElement);
         this.setupDiffListener();
         this.setupContentHeightListeners();
+        this.themeSubscription = toObservable(this.themeService.currentTheme).subscribe((theme) => this.changeTheme(theme));
     }
 
     ngOnInit(): void {
@@ -69,7 +71,6 @@ export class MonacoDiffEditorComponent implements OnInit, OnDestroy {
             this.layout();
         });
         this.resizeObserver.observe(this.monacoDiffEditorContainerElement);
-        this.themeSubscription = this.themeService.getCurrentThemeObservable().subscribe((theme) => this.changeTheme(theme));
     }
 
     ngOnDestroy(): void {
diff --git a/src/main/webapp/app/shared/monaco-editor/monaco-editor.component.ts b/src/main/webapp/app/shared/monaco-editor/monaco-editor.component.ts
index 1f28308ecb11..14ab7807e2e4 100644
--- a/src/main/webapp/app/shared/monaco-editor/monaco-editor.component.ts
+++ b/src/main/webapp/app/shared/monaco-editor/monaco-editor.component.ts
@@ -10,6 +10,7 @@ import { MonacoEditorLineDecorationsHoverButton } from './model/monaco-editor-li
 import { MonacoEditorAction } from 'app/shared/monaco-editor/model/actions/monaco-editor-action.model';
 import { TranslateService } from '@ngx-translate/core';
 import { MonacoEditorOptionPreset } from 'app/shared/monaco-editor/model/monaco-editor-option-preset.model';
+import { toObservable } from '@angular/core/rxjs-interop';
 
 type EditorPosition = { row: number; column: number };
 @Component({
@@ -62,6 +63,7 @@ export class MonacoEditorComponent implements OnInit, OnDestroy {
         });
         this._editor.getModel()?.setEOL(monaco.editor.EndOfLineSequence.LF);
         renderer.appendChild(elementRef.nativeElement, this.monacoEditorContainerElement);
+        this.themeSubscription = toObservable(this.themeService.currentTheme).subscribe((theme) => this.changeTheme(theme));
     }
 
     @Input()
@@ -127,8 +129,6 @@ export class MonacoEditorComponent implements OnInit, OnDestroy {
         this.blurEditorWidgetListener = this._editor.onDidBlurEditorWidget(() => {
             this.onBlurEditor.emit();
         });
-
-        this.themeSubscription = this.themeService.getCurrentThemeObservable().subscribe((theme) => this.changeTheme(theme));
     }
 
     ngOnDestroy() {

From 2df316c2689b1cc848a66b064311221189b34c76 Mon Sep 17 00:00:00 2001
From: "Felix T.J. Dietrich" <felix_dietrich@gmx.de>
Date: Mon, 26 Aug 2024 20:22:03 +0200
Subject: [PATCH 02/24] move variables around

---
 src/main/webapp/app/core/theme/theme-switch.component.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/main/webapp/app/core/theme/theme-switch.component.ts b/src/main/webapp/app/core/theme/theme-switch.component.ts
index 76f2c041f28a..703aa68d970e 100644
--- a/src/main/webapp/app/core/theme/theme-switch.component.ts
+++ b/src/main/webapp/app/core/theme/theme-switch.component.ts
@@ -23,6 +23,8 @@ import { toObservable } from '@angular/core/rxjs-interop';
     standalone: true,
 })
 export class ThemeSwitchComponent implements OnInit, OnDestroy {
+    protected readonly faSync = faSync;
+
     popoverPlacement = input.required<PlacementArray>();
     popover = viewChild.required<NgbPopover>('popover');
 
@@ -34,8 +36,6 @@ export class ThemeSwitchComponent implements OnInit, OnDestroy {
 
     private themeService = inject(ThemeService);
 
-    protected readonly faSync = faSync;
-
     private closeTimerSubscription: Subscription | undefined;
     private reopenPopupSubscription = toObservable(this.themeService.currentTheme)
         .pipe(delay(250))

From 33c849ee04739553a1798157e7b955ab3534245f Mon Sep 17 00:00:00 2001
From: "Felix T.J. Dietrich" <felix_dietrich@gmx.de>
Date: Mon, 26 Aug 2024 20:22:16 +0200
Subject: [PATCH 03/24] move more variables

---
 src/main/webapp/app/core/theme/theme-switch.component.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/main/webapp/app/core/theme/theme-switch.component.ts b/src/main/webapp/app/core/theme/theme-switch.component.ts
index 703aa68d970e..f1ebf1d29cca 100644
--- a/src/main/webapp/app/core/theme/theme-switch.component.ts
+++ b/src/main/webapp/app/core/theme/theme-switch.component.ts
@@ -25,6 +25,8 @@ import { toObservable } from '@angular/core/rxjs-interop';
 export class ThemeSwitchComponent implements OnInit, OnDestroy {
     protected readonly faSync = faSync;
 
+    private readonly themeService = inject(ThemeService);
+
     popoverPlacement = input.required<PlacementArray>();
     popover = viewChild.required<NgbPopover>('popover');
 
@@ -34,8 +36,6 @@ export class ThemeSwitchComponent implements OnInit, OnDestroy {
     animate = signal(true);
     openPopupAfterNextChange = signal(false);
 
-    private themeService = inject(ThemeService);
-
     private closeTimerSubscription: Subscription | undefined;
     private reopenPopupSubscription = toObservable(this.themeService.currentTheme)
         .pipe(delay(250))

From 92d26d66489fcf0c8e44ccf0a11aabd51b0d4cef Mon Sep 17 00:00:00 2001
From: "Felix T.J. Dietrich" <felix_dietrich@gmx.de>
Date: Tue, 27 Aug 2024 11:55:59 +0200
Subject: [PATCH 04/24] try fixing tests

---
 .../app/core/theme/theme-switch.component.ts  | 17 ++++-----
 .../theme/theme-switch.component.spec.ts      | 38 +++++++++----------
 .../mocks/service/mock-theme.service.ts       | 31 ++++-----------
 3 files changed, 33 insertions(+), 53 deletions(-)

diff --git a/src/main/webapp/app/core/theme/theme-switch.component.ts b/src/main/webapp/app/core/theme/theme-switch.component.ts
index f1ebf1d29cca..9a2b02f3c819 100644
--- a/src/main/webapp/app/core/theme/theme-switch.component.ts
+++ b/src/main/webapp/app/core/theme/theme-switch.component.ts
@@ -4,7 +4,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { NgbPopover } from '@ng-bootstrap/ng-bootstrap';
 import { PlacementArray } from '@ng-bootstrap/ng-bootstrap/util/positioning';
 import { Theme, ThemeService } from 'app/core/theme/theme.service';
-import { Subscription, delay, fromEvent, timer } from 'rxjs';
+import { Subscription, delay, filter, fromEvent, tap, timer } from 'rxjs';
 import { faSync } from '@fortawesome/free-solid-svg-icons';
 import { ArtemisSharedModule } from 'app/shared/shared.module';
 import { toObservable } from '@angular/core/rxjs-interop';
@@ -38,14 +38,13 @@ export class ThemeSwitchComponent implements OnInit, OnDestroy {
 
     private closeTimerSubscription: Subscription | undefined;
     private reopenPopupSubscription = toObservable(this.themeService.currentTheme)
-        .pipe(delay(250))
-        .subscribe(() => {
-            this.animate.set(true);
-            if (this.openPopupAfterNextChange) {
-                this.openPopupAfterNextChange.set(false);
-                this.openPopover();
-            }
-        });
+        .pipe(
+            tap(() => this.animate.set(true)),
+            filter(() => this.openPopupAfterNextChange()),
+            tap(() => this.openPopupAfterNextChange.set(false)),
+            delay(250),
+        )
+        .subscribe(() => this.openPopover());
 
     ngOnInit() {
         // Workaround as we can't dynamically change the "autoClose" property on popovers
diff --git a/src/test/javascript/spec/component/theme/theme-switch.component.spec.ts b/src/test/javascript/spec/component/theme/theme-switch.component.spec.ts
index 3bc9282cb8ed..11ddf2af98e8 100644
--- a/src/test/javascript/spec/component/theme/theme-switch.component.spec.ts
+++ b/src/test/javascript/spec/component/theme/theme-switch.component.spec.ts
@@ -1,7 +1,7 @@
 import { ArtemisTestModule } from '../../test.module';
 import { ThemeSwitchComponent } from 'app/core/theme/theme-switch.component';
 import { ComponentFixture, TestBed, fakeAsync, flush, tick } from '@angular/core/testing';
-import { ThemeService } from 'app/core/theme/theme.service';
+import { Theme, ThemeService } from 'app/core/theme/theme.service';
 import { MockLocalStorageService } from '../../helpers/mocks/service/mock-local-storage.service';
 import { LocalStorageService } from 'ngx-webstorage';
 import { NgbPopover } from '@ng-bootstrap/ng-bootstrap';
@@ -22,6 +22,7 @@ describe('ThemeSwitchComponent', () => {
             .then(() => {
                 fixture = TestBed.createComponent(ThemeSwitchComponent);
                 themeService = TestBed.inject(ThemeService);
+                fixture.componentRef.setInput('popoverPlacement', ['bottom']);
                 component = fixture.componentInstance;
                 // @ts-ignore
                 component.popover = { open: jest.fn(), close: jest.fn() };
@@ -30,18 +31,15 @@ describe('ThemeSwitchComponent', () => {
 
     afterEach(() => jest.restoreAllMocks());
 
-    it('oninit: subscribe to theme service', fakeAsync(() => {
-        const subscribeSpy = jest.spyOn(themeService, 'getCurrentThemeObservable');
-
-        component.ngOnInit();
-        expect(subscribeSpy).toHaveBeenCalledOnce();
-    }));
-
     it('theme toggles correctly', fakeAsync(() => {
+        const applyThemeSpy = jest.spyOn(themeService, 'applyTheme');
+
         component.ngOnInit();
         component.toggleTheme();
-        expect(component.animate).toBeFalse();
-        expect(component.openPopupAfterNextChange).toBeTrue();
+
+        expect(applyThemeSpy).toHaveBeenCalledWith(Theme.DARK);
+        expect(component.animate()).toBeFalse();
+        expect(component.openPopupAfterNextChange()).toBeTrue();
 
         tick();
 
@@ -51,19 +49,17 @@ describe('ThemeSwitchComponent', () => {
     }));
 
     it('os sync toggles correctly', fakeAsync(() => {
+        const applyThemeSpy = jest.spyOn(themeService, 'applyTheme');
+
         component.ngOnInit();
         component.toggleSynced();
 
-        tick();
-
-        expect(component.isSynced).toBeFalse();
+        expect(applyThemeSpy).toHaveBeenCalledWith(Theme.LIGHT);
+        expect(component.isSyncedWithOS()).toBeFalse();
         component.toggleSynced();
 
-        tick();
-
-        expect(component.isSynced).toBeTrue();
-
-        flush();
+        expect(applyThemeSpy).toHaveBeenCalledWith(undefined);
+        expect(component.isSyncedWithOS()).toBeTrue();
     }));
 
     it('opens and closes the popover', fakeAsync(() => {
@@ -83,9 +79,9 @@ describe('ThemeSwitchComponent', () => {
     }));
 
     function expectSwitchToDark() {
-        expect(component.isDark).toBeTrue();
-        expect(component.animate).toBeTrue();
-        expect(component.openPopupAfterNextChange).toBeFalse();
+        expect(component.isDarkTheme()).toBeTrue();
+        expect(component.animate()).toBeTrue();
+        expect(component.openPopupAfterNextChange()).toBeFalse();
 
         tick(250);
 
diff --git a/src/test/javascript/spec/helpers/mocks/service/mock-theme.service.ts b/src/test/javascript/spec/helpers/mocks/service/mock-theme.service.ts
index 1bb4519a3ff0..f65eb1cdb0da 100644
--- a/src/test/javascript/spec/helpers/mocks/service/mock-theme.service.ts
+++ b/src/test/javascript/spec/helpers/mocks/service/mock-theme.service.ts
@@ -1,31 +1,16 @@
+import { signal } from '@angular/core';
 import { Theme } from 'app/core/theme/theme.service';
-import { BehaviorSubject, Observable } from 'rxjs';
 
 export class MockThemeService {
-    private currentTheme: Theme = Theme.LIGHT;
-    private currentThemeSubject: BehaviorSubject<Theme> = new BehaviorSubject<Theme>(Theme.LIGHT);
-    private preferenceSubject: BehaviorSubject<Theme | undefined> = new BehaviorSubject<Theme | undefined>(undefined);
+    private _currentTheme = signal(Theme.LIGHT);
+    public readonly currentTheme = this._currentTheme.asReadonly();
 
-    public isByAutoDetection = false;
+    private _preference = signal<Theme | undefined>(undefined);
+    public readonly preference = this._preference.asReadonly();
 
-    public getCurrentTheme(): Theme {
-        return this.currentTheme;
-    }
-
-    public getCurrentThemeObservable(): Observable<Theme> {
-        return this.currentThemeSubject.asObservable();
-    }
-
-    public getPreferenceObservable(): Observable<Theme | undefined> {
-        return this.preferenceSubject.asObservable();
-    }
-
-    public restoreTheme() {}
-
-    public applyThemeExplicitly(theme: Theme) {
-        this.currentTheme = theme;
-        this.currentThemeSubject.next(theme);
-        this.preferenceSubject.next(theme);
+    public applyTheme(theme: Theme | undefined) {
+        this._preference.set(theme);
+        this._currentTheme.set(theme ?? Theme.LIGHT);
     }
 
     public print() {}

From 639bda75b5da5d9706221042e03d0726908fe64b Mon Sep 17 00:00:00 2001
From: "Felix T.J. Dietrich" <felix_dietrich@gmx.de>
Date: Thu, 29 Aug 2024 14:55:51 +0200
Subject: [PATCH 05/24] try fixing tests

---
 docs/dev/guidelines/client-design.rst            |  2 +-
 .../emoji/emoji-picker.component.spec.ts         |  4 ++--
 ...amming-exercise-instruction.component.spec.ts |  2 +-
 .../shared/progress-bar.component.spec.ts        |  2 +-
 .../theme/theme-switch.component.spec.ts         | 15 ++++++++-------
 .../spec/service/theme.service.spec.ts           | 16 ++++++++--------
 6 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/docs/dev/guidelines/client-design.rst b/docs/dev/guidelines/client-design.rst
index 21f18733fb61..8fe03440fa41 100644
--- a/docs/dev/guidelines/client-design.rst
+++ b/docs/dev/guidelines/client-design.rst
@@ -237,7 +237,7 @@ Example:
 
 .. code-block:: ts
 
-    this.themeService.applyThemeExplicitly(Theme.DARK);
+    this.themeService.applyTheme(Theme.DARK);
 
 
 
diff --git a/src/test/javascript/spec/component/emoji/emoji-picker.component.spec.ts b/src/test/javascript/spec/component/emoji/emoji-picker.component.spec.ts
index fce5fe967272..9106482224e1 100644
--- a/src/test/javascript/spec/component/emoji/emoji-picker.component.spec.ts
+++ b/src/test/javascript/spec/component/emoji/emoji-picker.component.spec.ts
@@ -21,7 +21,7 @@ describe('EmojiPickerComponent', () => {
             .compileComponents()
             .then(() => {
                 mockThemeService = TestBed.inject(ThemeService);
-                themeSpy = jest.spyOn(mockThemeService, 'getCurrentThemeObservable');
+                themeSpy = jest.spyOn(mockThemeService, 'currentTheme');
                 fixture = TestBed.createComponent(EmojiPickerComponent);
                 comp = fixture.componentInstance;
             });
@@ -37,7 +37,7 @@ describe('EmojiPickerComponent', () => {
         expect(comp.themeSubscription).toBeDefined();
 
         expect(comp.singleImageFunction({ unified: '1F519' } as EmojiData)).toBe('');
-        mockThemeService.applyThemeExplicitly(Theme.DARK);
+        mockThemeService.applyTheme(Theme.DARK);
         expect(comp.singleImageFunction({ unified: '1F519' } as EmojiData)).toBe('public/emoji/1f519.png');
 
         const subSpy = jest.spyOn(comp.themeSubscription, 'unsubscribe');
diff --git a/src/test/javascript/spec/component/programming-exercise/programming-exercise-instruction.component.spec.ts b/src/test/javascript/spec/component/programming-exercise/programming-exercise-instruction.component.spec.ts
index 4a4bee296170..9a6807b7b850 100644
--- a/src/test/javascript/spec/component/programming-exercise/programming-exercise-instruction.component.spec.ts
+++ b/src/test/javascript/spec/component/programming-exercise/programming-exercise-instruction.component.spec.ts
@@ -447,7 +447,7 @@ describe('ProgrammingExerciseInstructionComponent', () => {
 
     it('should update the markdown on a theme change', () => {
         const updateMarkdownStub = jest.spyOn(comp, 'updateMarkdown');
-        themeService.applyThemeExplicitly(Theme.DARK);
+        themeService.applyTheme(Theme.DARK);
         expect(updateMarkdownStub).toHaveBeenCalledOnce();
     });
 
diff --git a/src/test/javascript/spec/component/shared/progress-bar.component.spec.ts b/src/test/javascript/spec/component/shared/progress-bar.component.spec.ts
index 8fc59c1a7e0e..ff532f7660f7 100644
--- a/src/test/javascript/spec/component/shared/progress-bar.component.spec.ts
+++ b/src/test/javascript/spec/component/shared/progress-bar.component.spec.ts
@@ -49,7 +49,7 @@ describe('ProgressBarComponent', () => {
         component.ngOnChanges({ percentage: {} as SimpleChange });
         expect(component.foregroundColorClass).toBe('text-dark');
 
-        themeService.applyThemeExplicitly(Theme.DARK);
+        themeService.applyTheme(Theme.DARK);
         expect(component.foregroundColorClass).toBe('text-white');
     });
 
diff --git a/src/test/javascript/spec/component/theme/theme-switch.component.spec.ts b/src/test/javascript/spec/component/theme/theme-switch.component.spec.ts
index 11ddf2af98e8..b00b669c8953 100644
--- a/src/test/javascript/spec/component/theme/theme-switch.component.spec.ts
+++ b/src/test/javascript/spec/component/theme/theme-switch.component.spec.ts
@@ -31,7 +31,7 @@ describe('ThemeSwitchComponent', () => {
 
     afterEach(() => jest.restoreAllMocks());
 
-    it('theme toggles correctly', fakeAsync(() => {
+    it('theme toggles correctly', fakeAsync(async () => {
         const applyThemeSpy = jest.spyOn(themeService, 'applyTheme');
 
         component.ngOnInit();
@@ -42,6 +42,7 @@ describe('ThemeSwitchComponent', () => {
         expect(component.openPopupAfterNextChange()).toBeTrue();
 
         tick();
+        await fixture.whenStable();
 
         expectSwitchToDark();
 
@@ -64,18 +65,18 @@ describe('ThemeSwitchComponent', () => {
 
     it('opens and closes the popover', fakeAsync(() => {
         component.openPopover();
-        expect(component.popover.open).toHaveBeenCalledOnce();
+        expect(component.popover().open).toHaveBeenCalledOnce();
         component.closePopover();
-        expect(component.popover.close).toHaveBeenCalledOnce();
+        expect(component.popover().close).toHaveBeenCalledOnce();
     }));
 
     it('closes on mouse leave after 200ms', fakeAsync(() => {
         component.openPopover();
-        expect(component.popover.open).toHaveBeenCalledOnce();
+        expect(component.popover().open).toHaveBeenCalledOnce();
         component.mouseLeave();
-        expect(component.popover.close).not.toHaveBeenCalled();
+        expect(component.popover().close).not.toHaveBeenCalled();
         tick(250);
-        expect(component.popover.close).toHaveBeenCalledOnce();
+        expect(component.popover().close).toHaveBeenCalledOnce();
     }));
 
     function expectSwitchToDark() {
@@ -85,6 +86,6 @@ describe('ThemeSwitchComponent', () => {
 
         tick(250);
 
-        expect(component.popover.open).toHaveBeenCalledOnce();
+        expect(component.popover().open).toHaveBeenCalledOnce();
     }
 });
diff --git a/src/test/javascript/spec/service/theme.service.spec.ts b/src/test/javascript/spec/service/theme.service.spec.ts
index 16441b4c4bd8..7542b15c7cb2 100644
--- a/src/test/javascript/spec/service/theme.service.spec.ts
+++ b/src/test/javascript/spec/service/theme.service.spec.ts
@@ -61,7 +61,7 @@ describe('ThemeService', () => {
     });
 
     it('applies theme changes correctly', () => {
-        service.applyThemeExplicitly(Theme.DARK);
+        service.applyTheme(Theme.DARK);
 
         expect(documentGetElementMock).toHaveBeenCalledOnce();
         expect(documentGetElementMock).toHaveBeenCalledWith(THEME_OVERRIDE_ID);
@@ -80,21 +80,21 @@ describe('ThemeService', () => {
         expect(headElement.insertBefore).toHaveBeenCalledOnce();
         expect(headElement.insertBefore).toHaveBeenCalledWith(newElement, undefined);
 
-        expect(service.getCurrentTheme()).toBe(Theme.LIGHT);
+        expect(service.currentTheme()).toBe(Theme.LIGHT);
         expect(storeSpy).toHaveBeenCalledWith(THEME_LOCAL_STORAGE_KEY, 'DARK');
 
         // @ts-ignore
         newElement.onload();
 
         expect(linkElement.remove).toHaveBeenCalledOnce();
-        expect(service.getCurrentTheme()).toBe(Theme.DARK);
+        expect(service.currentTheme()).toBe(Theme.DARK);
 
-        service.applyThemeExplicitly(Theme.LIGHT);
+        service.applyTheme(Theme.LIGHT);
 
         expect(documentGetElementMock).toHaveBeenCalledTimes(2);
         expect(documentGetElementMock).toHaveBeenNthCalledWith(2, THEME_OVERRIDE_ID);
         expect(linkElement.remove).toHaveBeenCalledTimes(2);
-        expect(service.getCurrentTheme()).toBe(Theme.LIGHT);
+        expect(service.currentTheme()).toBe(Theme.LIGHT);
     });
 
     it('restores stored theme correctly', () => {
@@ -103,7 +103,7 @@ describe('ThemeService', () => {
         service.initialize();
 
         expect(retrieveSpy).toHaveBeenCalledTimes(2);
-        expect(service.getCurrentTheme()).toBe(Theme.LIGHT);
+        expect(service.currentTheme()).toBe(Theme.LIGHT);
     });
 
     it('applies dark OS preferences', () => {
@@ -126,7 +126,7 @@ describe('ThemeService', () => {
         expect(retrieveSpy).toHaveBeenCalledTimes(2);
         expect(windowMatchMediaSpy).toHaveBeenCalledOnce();
         expect(windowMatchMediaSpy).toHaveBeenNthCalledWith(1, '(prefers-color-scheme: dark)');
-        expect(service.getCurrentTheme()).toBe(Theme.DARK);
+        expect(service.currentTheme()).toBe(Theme.DARK);
     });
 
     it('applies light OS preferences', () => {
@@ -137,7 +137,7 @@ describe('ThemeService', () => {
         expect(retrieveSpy).toHaveBeenCalledTimes(2);
         expect(windowMatchMediaSpy).toHaveBeenCalledOnce();
         expect(windowMatchMediaSpy).toHaveBeenNthCalledWith(1, '(prefers-color-scheme: dark)');
-        expect(service.getCurrentTheme()).toBe(Theme.LIGHT);
+        expect(service.currentTheme()).toBe(Theme.LIGHT);
     });
 
     it('does print correctly', fakeAsync(() => {

From 5ddeab526d3de8ad2f1d0c3603ae959e150dc584 Mon Sep 17 00:00:00 2001
From: "Felix T.J. Dietrich" <felix_dietrich@gmx.de>
Date: Fri, 30 Aug 2024 15:53:11 +0200
Subject: [PATCH 06/24] fix theme service tests

---
 src/main/webapp/app/core/theme/theme.service.ts       |  3 ++-
 .../javascript/spec/service/theme.service.spec.ts     | 11 ++++++++---
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/main/webapp/app/core/theme/theme.service.ts b/src/main/webapp/app/core/theme/theme.service.ts
index 379244ead9f5..0be7392eb343 100644
--- a/src/main/webapp/app/core/theme/theme.service.ts
+++ b/src/main/webapp/app/core/theme/theme.service.ts
@@ -104,7 +104,8 @@ export class ThemeService {
             }
         });
 
-        this._preference.set(this.getStoredTheme());
+        const osTheme = this.darkSchemeMediaQuery.matches ? Theme.DARK : Theme.LIGHT;
+        this._preference.set(this.getStoredTheme() ?? osTheme);
     }
 
     /**
diff --git a/src/test/javascript/spec/service/theme.service.spec.ts b/src/test/javascript/spec/service/theme.service.spec.ts
index 7542b15c7cb2..64a0f42282c4 100644
--- a/src/test/javascript/spec/service/theme.service.spec.ts
+++ b/src/test/javascript/spec/service/theme.service.spec.ts
@@ -62,6 +62,7 @@ describe('ThemeService', () => {
 
     it('applies theme changes correctly', () => {
         service.applyTheme(Theme.DARK);
+        TestBed.flushEffects();
 
         expect(documentGetElementMock).toHaveBeenCalledOnce();
         expect(documentGetElementMock).toHaveBeenCalledWith(THEME_OVERRIDE_ID);
@@ -90,6 +91,7 @@ describe('ThemeService', () => {
         expect(service.currentTheme()).toBe(Theme.DARK);
 
         service.applyTheme(Theme.LIGHT);
+        TestBed.flushEffects();
 
         expect(documentGetElementMock).toHaveBeenCalledTimes(2);
         expect(documentGetElementMock).toHaveBeenNthCalledWith(2, THEME_OVERRIDE_ID);
@@ -101,8 +103,9 @@ describe('ThemeService', () => {
         const retrieveSpy = jest.spyOn(localStorageService, 'retrieve').mockReturnValue('LIGHT');
 
         service.initialize();
+        TestBed.flushEffects();
 
-        expect(retrieveSpy).toHaveBeenCalledTimes(2);
+        expect(retrieveSpy).toHaveBeenCalledOnce();
         expect(service.currentTheme()).toBe(Theme.LIGHT);
     });
 
@@ -120,10 +123,11 @@ describe('ThemeService', () => {
         });
 
         service.initialize();
+        TestBed.flushEffects();
         // @ts-ignore
         newElement?.onload();
 
-        expect(retrieveSpy).toHaveBeenCalledTimes(2);
+        expect(retrieveSpy).toHaveBeenCalledOnce();
         expect(windowMatchMediaSpy).toHaveBeenCalledOnce();
         expect(windowMatchMediaSpy).toHaveBeenNthCalledWith(1, '(prefers-color-scheme: dark)');
         expect(service.currentTheme()).toBe(Theme.DARK);
@@ -133,8 +137,9 @@ describe('ThemeService', () => {
         const retrieveSpy = jest.spyOn(localStorageService, 'retrieve').mockReturnValue(undefined);
 
         service.initialize();
+        TestBed.flushEffects();
 
-        expect(retrieveSpy).toHaveBeenCalledTimes(2);
+        expect(retrieveSpy).toHaveBeenCalledOnce();
         expect(windowMatchMediaSpy).toHaveBeenCalledOnce();
         expect(windowMatchMediaSpy).toHaveBeenNthCalledWith(1, '(prefers-color-scheme: dark)');
         expect(service.currentTheme()).toBe(Theme.LIGHT);

From aca687e837e83a1cbe9559576ef1aa21e1d281e3 Mon Sep 17 00:00:00 2001
From: "Felix T.J. Dietrich" <felix_dietrich@gmx.de>
Date: Thu, 12 Sep 2024 11:56:56 +0200
Subject: [PATCH 07/24] remove effect and replace with RxJS

---
 .../app/core/theme/theme-switch.component.ts  |  4 +-
 .../webapp/app/core/theme/theme.service.ts    | 78 ++++++++-----------
 .../monaco-editor/monaco-editor.component.ts  |  5 +-
 .../emoji/emoji-picker.component.spec.ts      |  2 +-
 ...ing-exercise-instruction.component.spec.ts |  2 +-
 .../theme/theme-switch.component.spec.ts      |  4 +-
 .../spec/service/theme.service.spec.ts        |  4 +-
 7 files changed, 44 insertions(+), 55 deletions(-)

diff --git a/src/main/webapp/app/core/theme/theme-switch.component.ts b/src/main/webapp/app/core/theme/theme-switch.component.ts
index 9a2b02f3c819..473caf42b873 100644
--- a/src/main/webapp/app/core/theme/theme-switch.component.ts
+++ b/src/main/webapp/app/core/theme/theme-switch.component.ts
@@ -82,7 +82,7 @@ export class ThemeSwitchComponent implements OnInit, OnDestroy {
     toggleTheme() {
         this.animate.set(false);
         this.openPopupAfterNextChange.set(true);
-        this.themeService.applyTheme(this.isDarkTheme() ? Theme.LIGHT : Theme.DARK);
+        this.themeService.applyThemePreference(this.isDarkTheme() ? Theme.LIGHT : Theme.DARK);
     }
 
     /**
@@ -91,6 +91,6 @@ export class ThemeSwitchComponent implements OnInit, OnDestroy {
      * - if it's currently not synced, we remove the preference to apply the system theme
      */
     toggleSynced() {
-        this.themeService.applyTheme(this.isSyncedWithOS() ? this.themeService.currentTheme() : undefined);
+        this.themeService.applyThemePreference(this.isSyncedWithOS() ? this.themeService.currentTheme() : undefined);
     }
 }
diff --git a/src/main/webapp/app/core/theme/theme.service.ts b/src/main/webapp/app/core/theme/theme.service.ts
index 0be7392eb343..1c7689c661f1 100644
--- a/src/main/webapp/app/core/theme/theme.service.ts
+++ b/src/main/webapp/app/core/theme/theme.service.ts
@@ -1,6 +1,8 @@
-import { Injectable, effect, inject, signal } from '@angular/core';
+import { Injectable, inject, signal } from '@angular/core';
+import { toObservable, toSignal } from '@angular/core/rxjs-interop';
 import { IconDefinition, faMoon, faSun } from '@fortawesome/free-solid-svg-icons';
 import { LocalStorageService } from 'ngx-webstorage';
+import { distinctUntilChanged, map, tap } from 'rxjs';
 
 export const THEME_LOCAL_STORAGE_KEY = 'artemisapp.theme.preference';
 export const THEME_OVERRIDE_ID = 'artemis-theme-override';
@@ -42,16 +44,6 @@ export class Theme {
     providedIn: 'root',
 })
 export class ThemeService {
-    /**
-     * The currently applied theme as WritableSignal.
-     */
-    private _currentTheme = signal(Theme.LIGHT);
-
-    /**
-     * The currently applied theme as ReadonlySignal.
-     */
-    public readonly currentTheme = this._currentTheme.asReadonly();
-
     /**
      * The user preference changes as WritableSignal.
      * If changed, the theme is applied immediately.
@@ -64,23 +56,22 @@ export class ThemeService {
      */
     public readonly preference = this._preference.asReadonly();
 
+    /**
+     * The currently applied theme as Signal.
+     */
+    public currentTheme = toSignal(
+        toObservable(this._preference).pipe(
+            map((preference) => preference ?? (this.darkSchemeMediaQuery.matches ? Theme.DARK : Theme.LIGHT)),
+            distinctUntilChanged(),
+            tap((theme) => this.applyTheme(theme)),
+        ),
+        { initialValue: Theme.LIGHT },
+    );
+
     private localStorageService = inject(LocalStorageService);
 
     private darkSchemeMediaQuery: MediaQueryList;
 
-    constructor() {
-        // Apply the theme as soon as the preference changes
-        effect(
-            () => {
-                this.applyThemeInternal(this.preference() ?? Theme.LIGHT);
-            },
-            {
-                // This should usually be avoided in favor of `computed()`
-                allowSignalWrites: true,
-            },
-        );
-    }
-
     /**
      * Should be called once on application startup.
      * Sets up the system preference listener and applies the theme initially
@@ -100,18 +91,18 @@ export class ThemeService {
 
         addEventListener('storage', (event) => {
             if (event.key === 'jhi-' + THEME_LOCAL_STORAGE_KEY) {
-                this._preference.set(this.getStoredTheme());
+                this._preference.set(this.getStoredThemePreference());
             }
         });
 
         const osTheme = this.darkSchemeMediaQuery.matches ? Theme.DARK : Theme.LIGHT;
-        this._preference.set(this.getStoredTheme() ?? osTheme);
+        this._preference.set(this.getStoredThemePreference() ?? osTheme);
     }
 
     /**
      * Returns the theme preference stored in local storage or undefined if no preference is stored
      */
-    private getStoredTheme(): Theme | undefined {
+    private getStoredThemePreference(): Theme | undefined {
         const storedIdentifier = this.localStorageService.retrieve(THEME_LOCAL_STORAGE_KEY);
         const storedTheme = Theme.all.find((theme) => theme.identifier === storedIdentifier);
 
@@ -151,31 +142,30 @@ export class ThemeService {
     }
 
     /**
-     * Applies the specified theme.
+     * Applies the specified theme preference.
      * Should only be called upon user request.
      * Stores the preference in local storage.
      *
-     * @param theme the theme to be applied; pass undefined to use system preference mode
+     * @param preference the theme to be applied; pass undefined to use system preference mode
      */
-    public applyTheme(theme: Theme | undefined) {
-        if (theme) {
-            this.localStorageService.store(THEME_LOCAL_STORAGE_KEY, theme.identifier);
+    public applyThemePreference(preference: Theme | undefined) {
+        if (preference) {
+            this.localStorageService.store(THEME_LOCAL_STORAGE_KEY, preference.identifier);
         } else {
             this.localStorageService.clear(THEME_LOCAL_STORAGE_KEY);
         }
-        this._preference.set(theme);
+        this._preference.set(preference);
     }
 
-    private applyThemeInternal(theme: Theme) {
-        if (!theme) {
-            return;
-        }
-
-        // Do not inject or remove anything from the DOM if the applied theme is the current theme
-        if (this._currentTheme() === theme) {
-            return;
-        }
-
+    /**
+     * Applies the theme to the application.
+     *
+     * Only call if the theme changed.
+     *
+     * @param theme
+     * @private
+     */
+    private applyTheme(theme: Theme) {
         // Get current <link> theme override
         const overrideTag = document.getElementById(THEME_OVERRIDE_ID);
 
@@ -183,7 +173,6 @@ export class ThemeService {
             // The default theme is always injected by Angular; therefore, we just need to remove
             // our theme override, if present
             overrideTag?.remove();
-            this._currentTheme.set(theme);
         } else {
             // If the theme is not the default theme, we need to add a theme override stylesheet to the page header
 
@@ -201,7 +190,6 @@ export class ThemeService {
             // and fire the subject to inform other services and components
             newTag.onload = () => {
                 overrideTag?.remove();
-                this._currentTheme.set(theme);
             };
 
             // Insert the new stylesheet link tag after the last existing link tag
diff --git a/src/main/webapp/app/shared/monaco-editor/monaco-editor.component.ts b/src/main/webapp/app/shared/monaco-editor/monaco-editor.component.ts
index a0e28544e914..5a252cc40dbe 100644
--- a/src/main/webapp/app/shared/monaco-editor/monaco-editor.component.ts
+++ b/src/main/webapp/app/shared/monaco-editor/monaco-editor.component.ts
@@ -12,6 +12,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { MonacoEditorOptionPreset } from 'app/shared/monaco-editor/model/monaco-editor-option-preset.model';
 import { Disposable, EditorPosition, EditorRange, MonacoEditorTextModel } from 'app/shared/monaco-editor/model/actions/monaco-editor.util';
 import { MonacoTextEditorAdapter } from 'app/shared/monaco-editor/model/actions/adapter/monaco-text-editor.adapter';
+import { toObservable } from '@angular/core/rxjs-interop';
 
 export const MAX_TAB_SIZE = 8;
 
@@ -67,6 +68,8 @@ export class MonacoEditorComponent implements OnInit, OnDestroy {
         this._editor.getModel()?.setEOL(monaco.editor.EndOfLineSequence.LF);
         this.textEditorAdapter = new MonacoTextEditorAdapter(this._editor);
         renderer.appendChild(elementRef.nativeElement, this.monacoEditorContainerElement);
+
+        this.themeSubscription = toObservable(this.themeService.currentTheme).subscribe((theme) => this.changeTheme(theme));
     }
 
     @Input()
@@ -132,8 +135,6 @@ export class MonacoEditorComponent implements OnInit, OnDestroy {
         this.blurEditorWidgetListener = this._editor.onDidBlurEditorWidget(() => {
             this.onBlurEditor.emit();
         });
-
-        this.themeSubscription = this.themeService.getCurrentThemeObservable().subscribe((theme) => this.changeTheme(theme));
     }
 
     ngOnDestroy() {
diff --git a/src/test/javascript/spec/component/emoji/emoji-picker.component.spec.ts b/src/test/javascript/spec/component/emoji/emoji-picker.component.spec.ts
index 9106482224e1..6f3d2096d1d5 100644
--- a/src/test/javascript/spec/component/emoji/emoji-picker.component.spec.ts
+++ b/src/test/javascript/spec/component/emoji/emoji-picker.component.spec.ts
@@ -37,7 +37,7 @@ describe('EmojiPickerComponent', () => {
         expect(comp.themeSubscription).toBeDefined();
 
         expect(comp.singleImageFunction({ unified: '1F519' } as EmojiData)).toBe('');
-        mockThemeService.applyTheme(Theme.DARK);
+        mockThemeService.applyThemePreference(Theme.DARK);
         expect(comp.singleImageFunction({ unified: '1F519' } as EmojiData)).toBe('public/emoji/1f519.png');
 
         const subSpy = jest.spyOn(comp.themeSubscription, 'unsubscribe');
diff --git a/src/test/javascript/spec/component/programming-exercise/programming-exercise-instruction.component.spec.ts b/src/test/javascript/spec/component/programming-exercise/programming-exercise-instruction.component.spec.ts
index a8bc0d361623..4fe7aebe7ead 100644
--- a/src/test/javascript/spec/component/programming-exercise/programming-exercise-instruction.component.spec.ts
+++ b/src/test/javascript/spec/component/programming-exercise/programming-exercise-instruction.component.spec.ts
@@ -447,7 +447,7 @@ describe('ProgrammingExerciseInstructionComponent', () => {
 
     it('should update the markdown on a theme change', () => {
         const updateMarkdownStub = jest.spyOn(comp, 'updateMarkdown');
-        themeService.applyTheme(Theme.DARK);
+        themeService.applyThemePreference(Theme.DARK);
         expect(updateMarkdownStub).toHaveBeenCalledOnce();
     });
 
diff --git a/src/test/javascript/spec/component/theme/theme-switch.component.spec.ts b/src/test/javascript/spec/component/theme/theme-switch.component.spec.ts
index b00b669c8953..1600163033d6 100644
--- a/src/test/javascript/spec/component/theme/theme-switch.component.spec.ts
+++ b/src/test/javascript/spec/component/theme/theme-switch.component.spec.ts
@@ -32,7 +32,7 @@ describe('ThemeSwitchComponent', () => {
     afterEach(() => jest.restoreAllMocks());
 
     it('theme toggles correctly', fakeAsync(async () => {
-        const applyThemeSpy = jest.spyOn(themeService, 'applyTheme');
+        const applyThemeSpy = jest.spyOn(themeService, 'applyThemePreference');
 
         component.ngOnInit();
         component.toggleTheme();
@@ -50,7 +50,7 @@ describe('ThemeSwitchComponent', () => {
     }));
 
     it('os sync toggles correctly', fakeAsync(() => {
-        const applyThemeSpy = jest.spyOn(themeService, 'applyTheme');
+        const applyThemeSpy = jest.spyOn(themeService, 'applyThemePreference');
 
         component.ngOnInit();
         component.toggleSynced();
diff --git a/src/test/javascript/spec/service/theme.service.spec.ts b/src/test/javascript/spec/service/theme.service.spec.ts
index 64a0f42282c4..f65d6d6ba7ff 100644
--- a/src/test/javascript/spec/service/theme.service.spec.ts
+++ b/src/test/javascript/spec/service/theme.service.spec.ts
@@ -61,7 +61,7 @@ describe('ThemeService', () => {
     });
 
     it('applies theme changes correctly', () => {
-        service.applyTheme(Theme.DARK);
+        service.applyThemePreference(Theme.DARK);
         TestBed.flushEffects();
 
         expect(documentGetElementMock).toHaveBeenCalledOnce();
@@ -90,7 +90,7 @@ describe('ThemeService', () => {
         expect(linkElement.remove).toHaveBeenCalledOnce();
         expect(service.currentTheme()).toBe(Theme.DARK);
 
-        service.applyTheme(Theme.LIGHT);
+        service.applyThemePreference(Theme.LIGHT);
         TestBed.flushEffects();
 
         expect(documentGetElementMock).toHaveBeenCalledTimes(2);

From d3b2920acc70bf28a912c8d3b18558a10f0c91bd Mon Sep 17 00:00:00 2001
From: "Felix T.J. Dietrich" <felix_dietrich@gmx.de>
Date: Thu, 12 Sep 2024 13:53:12 +0200
Subject: [PATCH 08/24] fix system preference

---
 .../app/core/theme/theme-switch.component.ts  |  2 +-
 .../webapp/app/core/theme/theme.service.ts    | 27 +++++++++++--------
 .../example-modeling-submission.component.ts  |  2 +-
 3 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/main/webapp/app/core/theme/theme-switch.component.ts b/src/main/webapp/app/core/theme/theme-switch.component.ts
index 473caf42b873..3685a808d656 100644
--- a/src/main/webapp/app/core/theme/theme-switch.component.ts
+++ b/src/main/webapp/app/core/theme/theme-switch.component.ts
@@ -31,7 +31,7 @@ export class ThemeSwitchComponent implements OnInit, OnDestroy {
     popover = viewChild.required<NgbPopover>('popover');
 
     isDarkTheme = computed(() => this.themeService.currentTheme() === Theme.DARK);
-    isSyncedWithOS = computed(() => this.themeService.preference() === undefined);
+    isSyncedWithOS = computed(() => this.themeService.userPreference() === undefined);
 
     animate = signal(true);
     openPopupAfterNextChange = signal(false);
diff --git a/src/main/webapp/app/core/theme/theme.service.ts b/src/main/webapp/app/core/theme/theme.service.ts
index 1c7689c661f1..e604d278a9a2 100644
--- a/src/main/webapp/app/core/theme/theme.service.ts
+++ b/src/main/webapp/app/core/theme/theme.service.ts
@@ -2,7 +2,7 @@ import { Injectable, inject, signal } from '@angular/core';
 import { toObservable, toSignal } from '@angular/core/rxjs-interop';
 import { IconDefinition, faMoon, faSun } from '@fortawesome/free-solid-svg-icons';
 import { LocalStorageService } from 'ngx-webstorage';
-import { distinctUntilChanged, map, tap } from 'rxjs';
+import { combineLatest, distinctUntilChanged, map, tap } from 'rxjs';
 
 export const THEME_LOCAL_STORAGE_KEY = 'artemisapp.theme.preference';
 export const THEME_OVERRIDE_ID = 'artemis-theme-override';
@@ -48,20 +48,25 @@ export class ThemeService {
      * The user preference changes as WritableSignal.
      * If changed, the theme is applied immediately.
      */
-    private _preference = signal<Theme | undefined>(undefined);
+    private _userPreference = signal<Theme | undefined>(undefined);
 
     /**
      * The user preference changes as ReadonlySignal.
      * Can be either a theme for an explicit theme or undefined if system settings are preferred.
      */
-    public readonly preference = this._preference.asReadonly();
+    public readonly userPreference = this._userPreference.asReadonly();
+
+    /**
+     * The system preference as WritableSignal.
+     */
+    private systemPreference = signal<Theme>(Theme.LIGHT);
 
     /**
      * The currently applied theme as Signal.
      */
     public currentTheme = toSignal(
-        toObservable(this._preference).pipe(
-            map((preference) => preference ?? (this.darkSchemeMediaQuery.matches ? Theme.DARK : Theme.LIGHT)),
+        combineLatest([toObservable(this.userPreference), toObservable(this.systemPreference)]).pipe(
+            map(([preference, systemPreference]) => preference ?? systemPreference),
             distinctUntilChanged(),
             tap((theme) => this.applyTheme(theme)),
         ),
@@ -82,21 +87,21 @@ export class ThemeService {
         if (this.darkSchemeMediaQuery.media !== 'not all') {
             this.darkSchemeMediaQuery.addEventListener('change', () => {
                 if (this.darkSchemeMediaQuery.matches) {
-                    this._preference.set(Theme.DARK);
+                    this.systemPreference.set(Theme.DARK);
                 } else {
-                    this._preference.set(Theme.LIGHT);
+                    this.systemPreference.set(Theme.LIGHT);
                 }
             });
         }
 
         addEventListener('storage', (event) => {
             if (event.key === 'jhi-' + THEME_LOCAL_STORAGE_KEY) {
-                this._preference.set(this.getStoredThemePreference());
+                this._userPreference.set(this.getStoredThemePreference());
             }
         });
 
-        const osTheme = this.darkSchemeMediaQuery.matches ? Theme.DARK : Theme.LIGHT;
-        this._preference.set(this.getStoredThemePreference() ?? osTheme);
+        this.systemPreference.set(this.darkSchemeMediaQuery.matches ? Theme.DARK : Theme.LIGHT);
+        this._userPreference.set(this.getStoredThemePreference());
     }
 
     /**
@@ -154,7 +159,7 @@ export class ThemeService {
         } else {
             this.localStorageService.clear(THEME_LOCAL_STORAGE_KEY);
         }
-        this._preference.set(preference);
+        this._userPreference.set(preference);
     }
 
     /**
diff --git a/src/main/webapp/app/exercises/modeling/manage/example-modeling/example-modeling-submission.component.ts b/src/main/webapp/app/exercises/modeling/manage/example-modeling/example-modeling-submission.component.ts
index 1800026ba5a1..a6e992ec0e37 100644
--- a/src/main/webapp/app/exercises/modeling/manage/example-modeling/example-modeling-submission.component.ts
+++ b/src/main/webapp/app/exercises/modeling/manage/example-modeling/example-modeling-submission.component.ts
@@ -118,7 +118,7 @@ export class ExampleModelingSubmissionComponent implements OnInit, FeedbackMarke
         private changeDetector: ChangeDetectorRef,
         private themeService: ThemeService,
     ) {
-        toObservable(this.themeService.preference).subscribe((themeOrUndefined) => {
+        toObservable(this.themeService.userPreference).subscribe((themeOrUndefined) => {
             if (themeOrUndefined === Theme.DARK) {
                 this.highlightColor = 'darkblue';
             } else {

From b40ef0c966ac70bfbc7024b9d63540bbdf460de2 Mon Sep 17 00:00:00 2001
From: "Felix T.J. Dietrich" <felix_dietrich@gmx.de>
Date: Thu, 12 Sep 2024 14:22:55 +0200
Subject: [PATCH 09/24] fix some tests

---
 .../webapp/app/core/theme/theme.service.ts     |  1 -
 .../spec/service/theme.service.spec.ts         | 18 +++++++++---------
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/main/webapp/app/core/theme/theme.service.ts b/src/main/webapp/app/core/theme/theme.service.ts
index e604d278a9a2..96f1a8cc7ac0 100644
--- a/src/main/webapp/app/core/theme/theme.service.ts
+++ b/src/main/webapp/app/core/theme/theme.service.ts
@@ -192,7 +192,6 @@ export class ThemeService {
             newTag.href = theme.fileName! + '?_=' + new Date().setMinutes(0, 0, 0);
 
             // As soon as the new style sheet loaded, remove the old override (if present)
-            // and fire the subject to inform other services and components
             newTag.onload = () => {
                 overrideTag?.remove();
             };
diff --git a/src/test/javascript/spec/service/theme.service.spec.ts b/src/test/javascript/spec/service/theme.service.spec.ts
index f65d6d6ba7ff..20356458e221 100644
--- a/src/test/javascript/spec/service/theme.service.spec.ts
+++ b/src/test/javascript/spec/service/theme.service.spec.ts
@@ -61,10 +61,13 @@ describe('ThemeService', () => {
     });
 
     it('applies theme changes correctly', () => {
+        TestBed.flushEffects();
+        expect(documentGetElementMock).toHaveBeenCalledOnce();
+
         service.applyThemePreference(Theme.DARK);
         TestBed.flushEffects();
 
-        expect(documentGetElementMock).toHaveBeenCalledOnce();
+        expect(documentGetElementMock).toHaveBeenCalledTimes(2);
         expect(documentGetElementMock).toHaveBeenCalledWith(THEME_OVERRIDE_ID);
 
         expect(documentgetElementsByTagNameMock).toHaveBeenCalledOnce();
@@ -81,20 +84,17 @@ describe('ThemeService', () => {
         expect(headElement.insertBefore).toHaveBeenCalledOnce();
         expect(headElement.insertBefore).toHaveBeenCalledWith(newElement, undefined);
 
-        expect(service.currentTheme()).toBe(Theme.LIGHT);
+        expect(service.currentTheme()).toBe(Theme.DARK);
         expect(storeSpy).toHaveBeenCalledWith(THEME_LOCAL_STORAGE_KEY, 'DARK');
 
-        // @ts-ignore
-        newElement.onload();
-
         expect(linkElement.remove).toHaveBeenCalledOnce();
         expect(service.currentTheme()).toBe(Theme.DARK);
 
         service.applyThemePreference(Theme.LIGHT);
         TestBed.flushEffects();
 
-        expect(documentGetElementMock).toHaveBeenCalledTimes(2);
-        expect(documentGetElementMock).toHaveBeenNthCalledWith(2, THEME_OVERRIDE_ID);
+        expect(documentGetElementMock).toHaveBeenCalledTimes(3);
+        expect(documentGetElementMock).toHaveBeenNthCalledWith(3, THEME_OVERRIDE_ID);
         expect(linkElement.remove).toHaveBeenCalledTimes(2);
         expect(service.currentTheme()).toBe(Theme.LIGHT);
     });
@@ -154,12 +154,12 @@ describe('ThemeService', () => {
 
         service.print();
 
-        expect(docSpy).toHaveBeenCalledOnce();
+        expect(docSpy).toHaveBeenCalledTimes(2);
         expect(docSpy).toHaveBeenCalledWith(THEME_OVERRIDE_ID);
         expect(returnedElement.rel).toBe('none-tmp');
         tick(250);
         expect(docSpy).toHaveBeenCalledWith('notification-sidebar');
-        expect(docSpy).toHaveBeenCalledTimes(3); // 1x for theme override, 2x for notification sidebar (changing style to display: none and back to initial value)
+        expect(docSpy).toHaveBeenCalledTimes(4); // 1x for theme override, 2x for notification sidebar (changing style to display: none and back to initial value)
         expect(winSpy).toHaveBeenCalledOnce();
         tick(250);
         expect(returnedElement.rel).toBe('stylesheet');

From 378f514a774f3745b14fc22887be10319e94a87e Mon Sep 17 00:00:00 2001
From: "Felix T.J. Dietrich" <felix_dietrich@gmx.de>
Date: Thu, 12 Sep 2024 14:48:19 +0200
Subject: [PATCH 10/24] fix naming

---
 docs/dev/guidelines/client-design.rst           | 2 +-
 src/main/webapp/app/core/theme/theme.service.ts | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/docs/dev/guidelines/client-design.rst b/docs/dev/guidelines/client-design.rst
index 8fe03440fa41..fd0aafc31b59 100644
--- a/docs/dev/guidelines/client-design.rst
+++ b/docs/dev/guidelines/client-design.rst
@@ -237,7 +237,7 @@ Example:
 
 .. code-block:: ts
 
-    this.themeService.applyTheme(Theme.DARK);
+    this.themeService.applyThemePreference(Theme.DARK);
 
 
 
diff --git a/src/main/webapp/app/core/theme/theme.service.ts b/src/main/webapp/app/core/theme/theme.service.ts
index 96f1a8cc7ac0..3bcdafbb2c4c 100644
--- a/src/main/webapp/app/core/theme/theme.service.ts
+++ b/src/main/webapp/app/core/theme/theme.service.ts
@@ -167,8 +167,7 @@ export class ThemeService {
      *
      * Only call if the theme changed.
      *
-     * @param theme
-     * @private
+     * @param theme the theme to apply
      */
     private applyTheme(theme: Theme) {
         // Get current <link> theme override

From 19bd309697103af4f4d84401b82976a8f93fdc1b Mon Sep 17 00:00:00 2001
From: "Felix T.J. Dietrich" <felix_dietrich@gmx.de>
Date: Thu, 12 Sep 2024 17:43:29 +0200
Subject: [PATCH 11/24] try fixing test issues

---
 .../core/theme/theme-switch.component.html    |  2 +-
 .../app/core/theme/theme-switch.component.ts  | 36 +++++--------------
 .../theme/theme-switch.component.spec.ts      | 32 ++++++-----------
 .../mocks/service/mock-theme.service.ts       | 10 +++---
 4 files changed, 25 insertions(+), 55 deletions(-)

diff --git a/src/main/webapp/app/core/theme/theme-switch.component.html b/src/main/webapp/app/core/theme/theme-switch.component.html
index d7dd855f628b..55581a7c807b 100644
--- a/src/main/webapp/app/core/theme/theme-switch.component.html
+++ b/src/main/webapp/app/core/theme/theme-switch.component.html
@@ -17,7 +17,7 @@
         [triggers]="''"
         #popover="ngbPopover"
         [autoClose]="false"
-        [animation]="animate()"
+        [animation]="true"
         [placement]="popoverPlacement()"
     >
         <div class="theme-toggle" [class.dark]="isDarkTheme()" id="theme-toggle">
diff --git a/src/main/webapp/app/core/theme/theme-switch.component.ts b/src/main/webapp/app/core/theme/theme-switch.component.ts
index 3685a808d656..d94419aa6fea 100644
--- a/src/main/webapp/app/core/theme/theme-switch.component.ts
+++ b/src/main/webapp/app/core/theme/theme-switch.component.ts
@@ -1,13 +1,12 @@
-import { ChangeDetectionStrategy, Component, OnDestroy, OnInit, computed, inject, input, signal, viewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit, computed, inject, input, viewChild } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
 import { NgbPopover } from '@ng-bootstrap/ng-bootstrap';
 import { PlacementArray } from '@ng-bootstrap/ng-bootstrap/util/positioning';
 import { Theme, ThemeService } from 'app/core/theme/theme.service';
-import { Subscription, delay, filter, fromEvent, tap, timer } from 'rxjs';
+import { fromEvent } from 'rxjs';
 import { faSync } from '@fortawesome/free-solid-svg-icons';
 import { ArtemisSharedModule } from 'app/shared/shared.module';
-import { toObservable } from '@angular/core/rxjs-interop';
 
 /**
  * Displays a sun or a moon in the navbar, depending on the current theme.
@@ -22,7 +21,7 @@ import { toObservable } from '@angular/core/rxjs-interop';
     changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
 })
-export class ThemeSwitchComponent implements OnInit, OnDestroy {
+export class ThemeSwitchComponent implements OnInit {
     protected readonly faSync = faSync;
 
     private readonly themeService = inject(ThemeService);
@@ -33,18 +32,7 @@ export class ThemeSwitchComponent implements OnInit, OnDestroy {
     isDarkTheme = computed(() => this.themeService.currentTheme() === Theme.DARK);
     isSyncedWithOS = computed(() => this.themeService.userPreference() === undefined);
 
-    animate = signal(true);
-    openPopupAfterNextChange = signal(false);
-
-    private closeTimerSubscription: Subscription | undefined;
-    private reopenPopupSubscription = toObservable(this.themeService.currentTheme)
-        .pipe(
-            tap(() => this.animate.set(true)),
-            filter(() => this.openPopupAfterNextChange()),
-            tap(() => this.openPopupAfterNextChange.set(false)),
-            delay(250),
-        )
-        .subscribe(() => this.openPopover());
+    closeTimeout: any;
 
     ngOnInit() {
         // Workaround as we can't dynamically change the "autoClose" property on popovers
@@ -56,33 +44,27 @@ export class ThemeSwitchComponent implements OnInit, OnDestroy {
         });
     }
 
-    ngOnDestroy() {
-        this.reopenPopupSubscription.unsubscribe();
-        this.closeTimerSubscription?.unsubscribe();
-    }
-
     openPopover() {
         this.popover().open();
-        this.closeTimerSubscription?.unsubscribe();
+        clearTimeout(this.closeTimeout);
     }
 
     closePopover() {
+        clearTimeout(this.closeTimeout);
         this.popover().close();
-        this.closeTimerSubscription?.unsubscribe();
     }
 
     mouseLeave() {
-        this.closeTimerSubscription?.unsubscribe();
-        this.closeTimerSubscription = timer(250).subscribe(() => this.closePopover());
+        clearTimeout(this.closeTimeout);
+        this.closeTimeout = setTimeout(() => this.closePopover(), 250);
     }
 
     /**
      * Changes the theme to the currently not active theme.
      */
     toggleTheme() {
-        this.animate.set(false);
-        this.openPopupAfterNextChange.set(true);
         this.themeService.applyThemePreference(this.isDarkTheme() ? Theme.LIGHT : Theme.DARK);
+        setTimeout(() => this.openPopover(), 250);
     }
 
     /**
diff --git a/src/test/javascript/spec/component/theme/theme-switch.component.spec.ts b/src/test/javascript/spec/component/theme/theme-switch.component.spec.ts
index 1600163033d6..3f407244334b 100644
--- a/src/test/javascript/spec/component/theme/theme-switch.component.spec.ts
+++ b/src/test/javascript/spec/component/theme/theme-switch.component.spec.ts
@@ -31,35 +31,33 @@ describe('ThemeSwitchComponent', () => {
 
     afterEach(() => jest.restoreAllMocks());
 
-    it('theme toggles correctly', fakeAsync(async () => {
-        const applyThemeSpy = jest.spyOn(themeService, 'applyThemePreference');
+    it('theme toggles correctly', fakeAsync(() => {
+        const applyThemePreferenceSpy = jest.spyOn(themeService, 'applyThemePreference');
 
         component.ngOnInit();
         component.toggleTheme();
+        TestBed.flushEffects();
 
-        expect(applyThemeSpy).toHaveBeenCalledWith(Theme.DARK);
-        expect(component.animate()).toBeFalse();
-        expect(component.openPopupAfterNextChange()).toBeTrue();
+        expect(applyThemePreferenceSpy).toHaveBeenCalledWith(Theme.DARK);
 
-        tick();
-        await fixture.whenStable();
-
-        expectSwitchToDark();
+        expect(component.isDarkTheme()).toBeTrue();
+        tick(250);
+        expect(component.popover().open).toHaveBeenCalledOnce();
 
         flush();
     }));
 
     it('os sync toggles correctly', fakeAsync(() => {
-        const applyThemeSpy = jest.spyOn(themeService, 'applyThemePreference');
+        const applyThemePreferenceSpy = jest.spyOn(themeService, 'applyThemePreference');
 
         component.ngOnInit();
         component.toggleSynced();
 
-        expect(applyThemeSpy).toHaveBeenCalledWith(Theme.LIGHT);
+        expect(applyThemePreferenceSpy).toHaveBeenCalledWith(Theme.LIGHT);
         expect(component.isSyncedWithOS()).toBeFalse();
         component.toggleSynced();
 
-        expect(applyThemeSpy).toHaveBeenCalledWith(undefined);
+        expect(applyThemePreferenceSpy).toHaveBeenCalledWith(undefined);
         expect(component.isSyncedWithOS()).toBeTrue();
     }));
 
@@ -78,14 +76,4 @@ describe('ThemeSwitchComponent', () => {
         tick(250);
         expect(component.popover().close).toHaveBeenCalledOnce();
     }));
-
-    function expectSwitchToDark() {
-        expect(component.isDarkTheme()).toBeTrue();
-        expect(component.animate()).toBeTrue();
-        expect(component.openPopupAfterNextChange()).toBeFalse();
-
-        tick(250);
-
-        expect(component.popover().open).toHaveBeenCalledOnce();
-    }
 });
diff --git a/src/test/javascript/spec/helpers/mocks/service/mock-theme.service.ts b/src/test/javascript/spec/helpers/mocks/service/mock-theme.service.ts
index f65eb1cdb0da..a5ff955560b7 100644
--- a/src/test/javascript/spec/helpers/mocks/service/mock-theme.service.ts
+++ b/src/test/javascript/spec/helpers/mocks/service/mock-theme.service.ts
@@ -5,12 +5,12 @@ export class MockThemeService {
     private _currentTheme = signal(Theme.LIGHT);
     public readonly currentTheme = this._currentTheme.asReadonly();
 
-    private _preference = signal<Theme | undefined>(undefined);
-    public readonly preference = this._preference.asReadonly();
+    private _userPreference = signal<Theme | undefined>(undefined);
+    public readonly userPreference = this._userPreference.asReadonly();
 
-    public applyTheme(theme: Theme | undefined) {
-        this._preference.set(theme);
-        this._currentTheme.set(theme ?? Theme.LIGHT);
+    public applyThemePreference(preference: Theme | undefined) {
+        this._userPreference.set(preference);
+        this._currentTheme.set(preference ?? Theme.LIGHT);
     }
 
     public print() {}

From 78010e0ecf7137dbe81205350ba23f30a7dca8a7 Mon Sep 17 00:00:00 2001
From: "Felix T.J. Dietrich" <felix_dietrich@gmx.de>
Date: Fri, 13 Sep 2024 09:57:46 +0200
Subject: [PATCH 12/24] fix more tests and simplify emoji stuff

---
 ...gramming-exercise-instruction.component.ts | 11 ++---
 .../metis/emoji/emoji-picker.component.html   |  4 +-
 .../metis/emoji/emoji-picker.component.ts     | 25 +++--------
 .../shared/metis/emoji/emoji.component.html   |  5 +--
 .../app/shared/metis/emoji/emoji.component.ts | 22 +++-------
 .../emoji/emoji-picker.component.spec.ts      | 17 +++-----
 .../component/emoji/emoji.component.spec.ts   | 42 -------------------
 ...ing-exercise-instruction.component.spec.ts |  2 +
 .../monaco-diff-editor.component.spec.ts      |  8 ++--
 .../monaco-editor.component.spec.ts           | 13 ++----
 .../shared/progress-bar.component.spec.ts     |  2 +-
 11 files changed, 36 insertions(+), 115 deletions(-)
 delete mode 100644 src/test/javascript/spec/component/emoji/emoji.component.spec.ts

diff --git a/src/main/webapp/app/exercises/programming/shared/instructions-render/programming-exercise-instruction.component.ts b/src/main/webapp/app/exercises/programming/shared/instructions-render/programming-exercise-instruction.component.ts
index 6af198189b69..f65b7e7908aa 100644
--- a/src/main/webapp/app/exercises/programming/shared/instructions-render/programming-exercise-instruction.component.ts
+++ b/src/main/webapp/app/exercises/programming/shared/instructions-render/programming-exercise-instruction.component.ts
@@ -11,6 +11,7 @@ import {
     ViewChild,
     ViewContainerRef,
     createComponent,
+    inject,
 } from '@angular/core';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { ThemeService } from 'app/core/theme/theme.service';
@@ -47,6 +48,8 @@ import { toObservable } from '@angular/core/rxjs-interop';
     styleUrls: ['./programming-exercise-instruction.scss'],
 })
 export class ProgrammingExerciseInstructionComponent implements OnChanges, OnDestroy {
+    private themeService = inject(ThemeService);
+
     @Input() public exercise: ProgrammingExercise;
     @Input() public participation: Participation;
     @Input() generateHtmlEvents: Observable<void>;
@@ -85,8 +88,10 @@ export class ProgrammingExerciseInstructionComponent implements OnChanges, OnDes
     private injectableContentFoundSubscription: Subscription;
     private tasksSubscription: Subscription;
     private generateHtmlSubscription: Subscription;
-    private themeChangeSubscription: Subscription;
     private testCases?: ProgrammingExerciseTestCase[];
+    private themeChangeSubscription = toObservable(this.themeService.currentTheme).subscribe(() => {
+        this.updateMarkdown();
+    });
 
     // Icons
     faSpinner = faSpinner;
@@ -99,16 +104,12 @@ export class ProgrammingExerciseInstructionComponent implements OnChanges, OnDes
         private programmingExercisePlantUmlWrapper: ProgrammingExercisePlantUmlExtensionWrapper,
         private programmingExerciseParticipationService: ProgrammingExerciseParticipationService,
         private programmingExerciseGradingService: ProgrammingExerciseGradingService,
-        themeService: ThemeService,
         private sanitizer: DomSanitizer,
         private programmingExerciseInstructionService: ProgrammingExerciseInstructionService,
         private appRef: ApplicationRef,
         private injector: EnvironmentInjector,
     ) {
         this.programmingExerciseTaskWrapper.viewContainerRef = this.viewContainerRef;
-        this.themeChangeSubscription = toObservable(themeService.currentTheme).subscribe(() => {
-            this.updateMarkdown();
-        });
     }
 
     /**
diff --git a/src/main/webapp/app/shared/metis/emoji/emoji-picker.component.html b/src/main/webapp/app/shared/metis/emoji/emoji-picker.component.html
index 8566cb951bff..08cceca47792 100644
--- a/src/main/webapp/app/shared/metis/emoji/emoji-picker.component.html
+++ b/src/main/webapp/app/shared/metis/emoji/emoji-picker.component.html
@@ -7,8 +7,8 @@
     [color]="'var(--primary)'"
     [recent]="recent"
     [i18n]="{ search: 'artemisApp.metis.searchEmoji' | artemisTranslate, categories: { recent: 'artemisApp.metis.courseEmojiSelectionCategory' | artemisTranslate } }"
-    [darkMode]="dark"
-    [imageUrlFn]="singleImageFunction"
+    [darkMode]="dark()"
+    [imageUrlFn]="singleImageFunction()"
     [backgroundImageFn]="utils.EMOJI_SHEET_URL"
     (emojiSelect)="onEmojiSelect($event)"
 />
diff --git a/src/main/webapp/app/shared/metis/emoji/emoji-picker.component.ts b/src/main/webapp/app/shared/metis/emoji/emoji-picker.component.ts
index 3f180a6bbdc8..e37e83152d1a 100644
--- a/src/main/webapp/app/shared/metis/emoji/emoji-picker.component.ts
+++ b/src/main/webapp/app/shared/metis/emoji/emoji-picker.component.ts
@@ -1,36 +1,23 @@
-import { Component, EventEmitter, Input, OnDestroy, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output, computed, inject } from '@angular/core';
 import { Theme, ThemeService } from 'app/core/theme/theme.service';
-import { Subscription } from 'rxjs';
 import { EmojiUtils } from 'app/shared/metis/emoji/emoji.utils';
 import { EmojiData } from '@ctrl/ngx-emoji-mart/ngx-emoji';
-import { toObservable } from '@angular/core/rxjs-interop';
 
 @Component({
     selector: 'jhi-emoji-picker',
     templateUrl: './emoji-picker.component.html',
 })
-export class EmojiPickerComponent implements OnDestroy {
+export class EmojiPickerComponent {
+    private themeService = inject(ThemeService);
+
     @Input() emojisToShowFilter: (emoji: string | EmojiData) => boolean;
     @Input() categoriesIcons: { [key: string]: string };
     @Input() recent: string[];
     @Output() emojiSelect: EventEmitter<any> = new EventEmitter();
 
     utils = EmojiUtils;
-    singleImageFunction: (emoji: EmojiData | null) => string;
-
-    dark = false;
-    themeSubscription: Subscription;
-
-    constructor(private themeService: ThemeService) {
-        this.themeSubscription = toObservable(themeService.currentTheme).subscribe((theme) => {
-            this.dark = theme === Theme.DARK;
-            this.singleImageFunction = this.dark ? EmojiUtils.singleDarkModeEmojiUrlFn : () => '';
-        });
-    }
-
-    ngOnDestroy(): void {
-        this.themeSubscription.unsubscribe();
-    }
+    dark = computed(() => this.themeService.currentTheme() === Theme.DARK);
+    singleImageFunction = computed(() => (this.dark() ? EmojiUtils.singleDarkModeEmojiUrlFn : () => ''));
 
     onEmojiSelect(event: any) {
         this.emojiSelect.emit(event);
diff --git a/src/main/webapp/app/shared/metis/emoji/emoji.component.html b/src/main/webapp/app/shared/metis/emoji/emoji.component.html
index 537b14712a91..ac71d2e4826a 100644
--- a/src/main/webapp/app/shared/metis/emoji/emoji.component.html
+++ b/src/main/webapp/app/shared/metis/emoji/emoji.component.html
@@ -1,7 +1,6 @@
 <!-- Using two instances to 'rerender' if the theme changes -->
-@if (!dark) {
+@if (!dark()) {
     <ngx-emoji [backgroundImageFn]="utils.EMOJI_SHEET_URL" class="emoji" [emoji]="emoji" [size]="16" />
-}
-@if (dark) {
+} @else {
     <ngx-emoji [imageUrlFn]="utils.singleDarkModeEmojiUrlFn" [backgroundImageFn]="utils.EMOJI_SHEET_URL" class="emoji" [emoji]="emoji" [size]="16" />
 }
diff --git a/src/main/webapp/app/shared/metis/emoji/emoji.component.ts b/src/main/webapp/app/shared/metis/emoji/emoji.component.ts
index 6b5d3749a41f..00e651bf19b7 100644
--- a/src/main/webapp/app/shared/metis/emoji/emoji.component.ts
+++ b/src/main/webapp/app/shared/metis/emoji/emoji.component.ts
@@ -1,29 +1,17 @@
-import { Component, Input, OnDestroy } from '@angular/core';
+import { Component, Input, computed, inject } from '@angular/core';
 import { Theme, ThemeService } from 'app/core/theme/theme.service';
-import { Subscription } from 'rxjs';
 import { EmojiUtils } from 'app/shared/metis/emoji/emoji.utils';
-import { toObservable } from '@angular/core/rxjs-interop';
 
 @Component({
     selector: 'jhi-emoji',
     templateUrl: './emoji.component.html',
     styleUrls: ['./emoji.component.scss'],
 })
-export class EmojiComponent implements OnDestroy {
-    utils = EmojiUtils;
+export class EmojiComponent {
+    private themeService = inject(ThemeService);
 
+    utils = EmojiUtils;
     @Input() emoji: string;
 
-    dark = false;
-    themeSubscription: Subscription;
-
-    constructor(private themeService: ThemeService) {
-        this.themeSubscription = toObservable(themeService.currentTheme).subscribe((theme) => {
-            this.dark = theme === Theme.DARK;
-        });
-    }
-
-    ngOnDestroy(): void {
-        this.themeSubscription.unsubscribe();
-    }
+    dark = computed(() => this.themeService.currentTheme() === Theme.DARK);
 }
diff --git a/src/test/javascript/spec/component/emoji/emoji-picker.component.spec.ts b/src/test/javascript/spec/component/emoji/emoji-picker.component.spec.ts
index 6f3d2096d1d5..4e4d76f5a019 100644
--- a/src/test/javascript/spec/component/emoji/emoji-picker.component.spec.ts
+++ b/src/test/javascript/spec/component/emoji/emoji-picker.component.spec.ts
@@ -11,7 +11,6 @@ describe('EmojiPickerComponent', () => {
     let fixture: ComponentFixture<EmojiPickerComponent>;
     let comp: EmojiPickerComponent;
     let mockThemeService: ThemeService;
-    let themeSpy: jest.SpyInstance;
 
     beforeEach(() => {
         TestBed.configureTestingModule({
@@ -21,7 +20,6 @@ describe('EmojiPickerComponent', () => {
             .compileComponents()
             .then(() => {
                 mockThemeService = TestBed.inject(ThemeService);
-                themeSpy = jest.spyOn(mockThemeService, 'currentTheme');
                 fixture = TestBed.createComponent(EmojiPickerComponent);
                 comp = fixture.componentInstance;
             });
@@ -31,19 +29,14 @@ describe('EmojiPickerComponent', () => {
         jest.restoreAllMocks();
     });
 
-    it('should subscribe and unsubscribe to the theme service and react to changes', () => {
-        expect(themeSpy).toHaveBeenCalledOnce();
-        expect(comp.dark).toBeFalse();
-        expect(comp.themeSubscription).toBeDefined();
+    it('should react to theme changes', () => {
+        expect(comp.dark()).toBeFalse();
+        expect(comp.singleImageFunction()({ unified: '1F519' } as EmojiData)).toBe('');
 
-        expect(comp.singleImageFunction({ unified: '1F519' } as EmojiData)).toBe('');
         mockThemeService.applyThemePreference(Theme.DARK);
-        expect(comp.singleImageFunction({ unified: '1F519' } as EmojiData)).toBe('public/emoji/1f519.png');
 
-        const subSpy = jest.spyOn(comp.themeSubscription, 'unsubscribe');
-
-        comp.ngOnDestroy();
-        expect(subSpy).toHaveBeenCalledOnce();
+        expect(comp.dark()).toBeTrue();
+        expect(comp.singleImageFunction()({ unified: '1F519' } as EmojiData)).toBe('public/emoji/1f519.png');
     });
 
     it('should emit an event on emoji select', () => {
diff --git a/src/test/javascript/spec/component/emoji/emoji.component.spec.ts b/src/test/javascript/spec/component/emoji/emoji.component.spec.ts
deleted file mode 100644
index 887a27a7686d..000000000000
--- a/src/test/javascript/spec/component/emoji/emoji.component.spec.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ArtemisTestModule } from '../../test.module';
-import { EmojiComponent } from 'app/shared/metis/emoji/emoji.component';
-import { Theme, ThemeService } from 'app/core/theme/theme.service';
-import { of } from 'rxjs';
-
-describe('EmojiComponent', () => {
-    let fixture: ComponentFixture<EmojiComponent>;
-    let comp: EmojiComponent;
-    let mockThemeService: ThemeService;
-    let themeSpy: jest.SpyInstance;
-
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-            imports: [ArtemisTestModule],
-            declarations: [],
-            providers: [],
-        })
-            .compileComponents()
-            .then(() => {
-                mockThemeService = TestBed.inject(ThemeService);
-                themeSpy = jest.spyOn(mockThemeService, 'getCurrentThemeObservable').mockReturnValue(of(Theme.DARK));
-                fixture = TestBed.createComponent(EmojiComponent);
-                comp = fixture.componentInstance;
-            });
-    });
-
-    afterEach(() => {
-        jest.restoreAllMocks();
-    });
-
-    it('should subscribe and unsubscribe to the theme service and set dark flag', () => {
-        expect(themeSpy).toHaveBeenCalledOnce();
-        expect(comp.dark).toBeTrue();
-        expect(comp.themeSubscription).toBeDefined();
-
-        const subSpy = jest.spyOn(comp.themeSubscription, 'unsubscribe');
-
-        comp.ngOnDestroy();
-        expect(subSpy).toHaveBeenCalledOnce();
-    });
-});
diff --git a/src/test/javascript/spec/component/programming-exercise/programming-exercise-instruction.component.spec.ts b/src/test/javascript/spec/component/programming-exercise/programming-exercise-instruction.component.spec.ts
index 4fe7aebe7ead..8040940c9bc3 100644
--- a/src/test/javascript/spec/component/programming-exercise/programming-exercise-instruction.component.spec.ts
+++ b/src/test/javascript/spec/component/programming-exercise/programming-exercise-instruction.component.spec.ts
@@ -448,6 +448,8 @@ describe('ProgrammingExerciseInstructionComponent', () => {
     it('should update the markdown on a theme change', () => {
         const updateMarkdownStub = jest.spyOn(comp, 'updateMarkdown');
         themeService.applyThemePreference(Theme.DARK);
+        TestBed.flushEffects();
+
         expect(updateMarkdownStub).toHaveBeenCalledOnce();
     });
 
diff --git a/src/test/javascript/spec/component/shared/monaco-editor/monaco-diff-editor.component.spec.ts b/src/test/javascript/spec/component/shared/monaco-editor/monaco-diff-editor.component.spec.ts
index 350a6ed235d3..a7fd5547430e 100644
--- a/src/test/javascript/spec/component/shared/monaco-editor/monaco-diff-editor.component.spec.ts
+++ b/src/test/javascript/spec/component/shared/monaco-editor/monaco-diff-editor.component.spec.ts
@@ -4,7 +4,6 @@ import { ArtemisTestModule } from '../../../test.module';
 import { MonacoEditorModule } from 'app/shared/monaco-editor/monaco-editor.module';
 import { MockResizeObserver } from '../../../helpers/mocks/service/mock-resize-observer';
 import { MonacoDiffEditorComponent } from 'app/shared/monaco-editor/monaco-diff-editor.component';
-import { BehaviorSubject } from 'rxjs';
 
 describe('MonacoDiffEditorComponent', () => {
     let fixture: ComponentFixture<MonacoDiffEditorComponent>;
@@ -33,12 +32,11 @@ describe('MonacoDiffEditorComponent', () => {
     });
 
     it('should adjust its theme to the global theme', () => {
-        const themeSubject = new BehaviorSubject<Theme>(Theme.LIGHT);
-        const subscribeStub = jest.spyOn(mockThemeService, 'getCurrentThemeObservable').mockReturnValue(themeSubject.asObservable());
         const changeThemeSpy = jest.spyOn(comp, 'changeTheme');
         fixture.detectChanges();
-        themeSubject.next(Theme.DARK);
-        expect(subscribeStub).toHaveBeenCalledOnce();
+        mockThemeService.applyThemePreference(Theme.DARK);
+        TestBed.flushEffects();
+
         expect(changeThemeSpy).toHaveBeenCalledTimes(2);
         expect(changeThemeSpy).toHaveBeenNthCalledWith(1, Theme.LIGHT);
         expect(changeThemeSpy).toHaveBeenNthCalledWith(2, Theme.DARK);
diff --git a/src/test/javascript/spec/component/shared/monaco-editor/monaco-editor.component.spec.ts b/src/test/javascript/spec/component/shared/monaco-editor/monaco-editor.component.spec.ts
index ae34f743a3a7..19b6a02d4b63 100644
--- a/src/test/javascript/spec/component/shared/monaco-editor/monaco-editor.component.spec.ts
+++ b/src/test/javascript/spec/component/shared/monaco-editor/monaco-editor.component.spec.ts
@@ -4,7 +4,6 @@ import { MonacoEditorModule } from 'app/shared/monaco-editor/monaco-editor.modul
 import { MonacoEditorComponent } from 'app/shared/monaco-editor/monaco-editor.component';
 import { MockResizeObserver } from '../../../helpers/mocks/service/mock-resize-observer';
 import { Theme, ThemeService } from 'app/core/theme/theme.service';
-import { BehaviorSubject } from 'rxjs';
 import { MonacoEditorBuildAnnotationType } from 'app/shared/monaco-editor/model/monaco-editor-build-annotation.model';
 import { MonacoCodeEditorElement } from 'app/shared/monaco-editor/model/monaco-code-editor-element.model';
 import { MonacoEditorLineDecorationsHoverButton } from 'app/shared/monaco-editor/model/monaco-editor-line-decorations-hover-button.model';
@@ -79,24 +78,20 @@ describe('MonacoEditorComponent', () => {
     });
 
     it('should adjust its theme to the global theme', () => {
-        const themeSubject = new BehaviorSubject<Theme>(Theme.LIGHT);
-        const subscribeStub = jest.spyOn(mockThemeService, 'getCurrentThemeObservable').mockReturnValue(themeSubject.asObservable());
         const changeThemeSpy = jest.spyOn(comp, 'changeTheme');
         fixture.detectChanges();
-        themeSubject.next(Theme.DARK);
-        expect(subscribeStub).toHaveBeenCalledOnce();
+
+        mockThemeService.applyThemePreference(Theme.DARK);
+        TestBed.flushEffects();
+
         expect(changeThemeSpy).toHaveBeenCalledTimes(2);
         expect(changeThemeSpy).toHaveBeenNthCalledWith(1, Theme.LIGHT);
         expect(changeThemeSpy).toHaveBeenNthCalledWith(2, Theme.DARK);
     });
 
     it('should unsubscribe from the global theme when destroyed', () => {
-        const themeSubject = new BehaviorSubject<Theme>(Theme.LIGHT);
-        const subscribeStub = jest.spyOn(mockThemeService, 'getCurrentThemeObservable').mockReturnValue(themeSubject.asObservable());
-        fixture.detectChanges();
         const unsubscribeStub = jest.spyOn(comp.themeSubscription!, 'unsubscribe').mockImplementation();
         comp.ngOnDestroy();
-        expect(subscribeStub).toHaveBeenCalledOnce();
         expect(unsubscribeStub).toHaveBeenCalledOnce();
     });
 
diff --git a/src/test/javascript/spec/component/shared/progress-bar.component.spec.ts b/src/test/javascript/spec/component/shared/progress-bar.component.spec.ts
index ff532f7660f7..26280ca71b70 100644
--- a/src/test/javascript/spec/component/shared/progress-bar.component.spec.ts
+++ b/src/test/javascript/spec/component/shared/progress-bar.component.spec.ts
@@ -49,7 +49,7 @@ describe('ProgressBarComponent', () => {
         component.ngOnChanges({ percentage: {} as SimpleChange });
         expect(component.foregroundColorClass).toBe('text-dark');
 
-        themeService.applyTheme(Theme.DARK);
+        themeService.applyThemePreference(Theme.DARK);
         expect(component.foregroundColorClass).toBe('text-white');
     });
 

From ea144b37b70047d6a9ea4731fa6d60de151c2068 Mon Sep 17 00:00:00 2001
From: Johannes Wiest <Johannes.wiest@outlook.com>
Date: Wed, 18 Sep 2024 12:31:34 +0200
Subject: [PATCH 13/24] fix theme-switch.component.spec.ts

---
 .../theme/theme-switch.component.spec.ts      | 60 ++++++++++---------
 1 file changed, 33 insertions(+), 27 deletions(-)

diff --git a/src/test/javascript/spec/component/theme/theme-switch.component.spec.ts b/src/test/javascript/spec/component/theme/theme-switch.component.spec.ts
index 3f407244334b..4fccadf8b4e0 100644
--- a/src/test/javascript/spec/component/theme/theme-switch.component.spec.ts
+++ b/src/test/javascript/spec/component/theme/theme-switch.component.spec.ts
@@ -1,32 +1,43 @@
 import { ArtemisTestModule } from '../../test.module';
 import { ThemeSwitchComponent } from 'app/core/theme/theme-switch.component';
-import { ComponentFixture, TestBed, fakeAsync, flush, tick } from '@angular/core/testing';
+import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { Theme, ThemeService } from 'app/core/theme/theme.service';
 import { MockLocalStorageService } from '../../helpers/mocks/service/mock-local-storage.service';
 import { LocalStorageService } from 'ngx-webstorage';
 import { NgbPopover } from '@ng-bootstrap/ng-bootstrap';
 import { MockDirective } from 'ng-mocks';
+import { MockThemeService } from '../../helpers/mocks/service/mock-theme.service';
 
 describe('ThemeSwitchComponent', () => {
     let component: ThemeSwitchComponent;
     let fixture: ComponentFixture<ThemeSwitchComponent>;
     let themeService: ThemeService;
 
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-            imports: [ArtemisTestModule, MockDirective(NgbPopover)],
-            declarations: [ThemeSwitchComponent],
-            providers: [{ provide: LocalStorageService, useClass: MockLocalStorageService }],
-        })
-            .compileComponents()
-            .then(() => {
-                fixture = TestBed.createComponent(ThemeSwitchComponent);
-                themeService = TestBed.inject(ThemeService);
-                fixture.componentRef.setInput('popoverPlacement', ['bottom']);
-                component = fixture.componentInstance;
-                // @ts-ignore
-                component.popover = { open: jest.fn(), close: jest.fn() };
-            });
+    let openSpy: jest.SpyInstance;
+    let closeSpy: jest.SpyInstance;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [ArtemisTestModule, ThemeSwitchComponent, MockDirective(NgbPopover)],
+            declarations: [],
+            providers: [
+                { provide: LocalStorageService, useClass: MockLocalStorageService },
+                {
+                    provide: ThemeService,
+                    useClass: MockThemeService,
+                },
+            ],
+        }).compileComponents();
+
+        themeService = TestBed.inject(ThemeService);
+
+        fixture = TestBed.createComponent(ThemeSwitchComponent);
+        component = fixture.componentInstance;
+
+        openSpy = jest.spyOn(component.popover(), 'open');
+        closeSpy = jest.spyOn(component.popover(), 'close');
+
+        fixture.componentRef.setInput('popoverPlacement', ['bottom']);
     });
 
     afterEach(() => jest.restoreAllMocks());
@@ -34,23 +45,18 @@ describe('ThemeSwitchComponent', () => {
     it('theme toggles correctly', fakeAsync(() => {
         const applyThemePreferenceSpy = jest.spyOn(themeService, 'applyThemePreference');
 
-        component.ngOnInit();
         component.toggleTheme();
-        TestBed.flushEffects();
 
         expect(applyThemePreferenceSpy).toHaveBeenCalledWith(Theme.DARK);
 
         expect(component.isDarkTheme()).toBeTrue();
         tick(250);
-        expect(component.popover().open).toHaveBeenCalledOnce();
-
-        flush();
+        expect(openSpy).toHaveBeenCalledOnce();
     }));
 
     it('os sync toggles correctly', fakeAsync(() => {
         const applyThemePreferenceSpy = jest.spyOn(themeService, 'applyThemePreference');
 
-        component.ngOnInit();
         component.toggleSynced();
 
         expect(applyThemePreferenceSpy).toHaveBeenCalledWith(Theme.LIGHT);
@@ -63,17 +69,17 @@ describe('ThemeSwitchComponent', () => {
 
     it('opens and closes the popover', fakeAsync(() => {
         component.openPopover();
-        expect(component.popover().open).toHaveBeenCalledOnce();
+        expect(openSpy).toHaveBeenCalledOnce();
         component.closePopover();
-        expect(component.popover().close).toHaveBeenCalledOnce();
+        expect(closeSpy).toHaveBeenCalledOnce();
     }));
 
     it('closes on mouse leave after 200ms', fakeAsync(() => {
         component.openPopover();
-        expect(component.popover().open).toHaveBeenCalledOnce();
+        expect(openSpy).toHaveBeenCalledOnce();
         component.mouseLeave();
-        expect(component.popover().close).not.toHaveBeenCalled();
+        expect(closeSpy).not.toHaveBeenCalled();
         tick(250);
-        expect(component.popover().close).toHaveBeenCalledOnce();
+        expect(closeSpy).toHaveBeenCalledOnce();
     }));
 });

From 3438c376a191e98e078de2cea89a140e54e6c104 Mon Sep 17 00:00:00 2001
From: Johannes Wiest <Johannes.wiest@outlook.com>
Date: Mon, 7 Oct 2024 09:26:43 +0200
Subject: [PATCH 14/24] change signal logic slightly & update client tests

---
 .../webapp/app/core/theme/theme.service.ts    | 21 +++++-----
 ...example-modeling-submission.component.html |  6 +--
 .../example-modeling-submission.component.ts  | 38 +++++++++----------
 .../programming-exercise-plant-uml.service.ts | 21 +++++-----
 ...ing-exercise-instruction.component.spec.ts |  6 ++-
 .../component/shared/navbar.component.spec.ts |  8 ++--
 .../shared/progress-bar.component.spec.ts     | 10 +++++
 .../spec/service/theme.service.spec.ts        |  8 ++--
 8 files changed, 64 insertions(+), 54 deletions(-)

diff --git a/src/main/webapp/app/core/theme/theme.service.ts b/src/main/webapp/app/core/theme/theme.service.ts
index 3bcdafbb2c4c..ff40b2797277 100644
--- a/src/main/webapp/app/core/theme/theme.service.ts
+++ b/src/main/webapp/app/core/theme/theme.service.ts
@@ -1,8 +1,6 @@
-import { Injectable, inject, signal } from '@angular/core';
-import { toObservable, toSignal } from '@angular/core/rxjs-interop';
+import { Injectable, computed, effect, inject, signal, untracked } from '@angular/core';
 import { IconDefinition, faMoon, faSun } from '@fortawesome/free-solid-svg-icons';
 import { LocalStorageService } from 'ngx-webstorage';
-import { combineLatest, distinctUntilChanged, map, tap } from 'rxjs';
 
 export const THEME_LOCAL_STORAGE_KEY = 'artemisapp.theme.preference';
 export const THEME_OVERRIDE_ID = 'artemis-theme-override';
@@ -64,19 +62,20 @@ export class ThemeService {
     /**
      * The currently applied theme as Signal.
      */
-    public currentTheme = toSignal(
-        combineLatest([toObservable(this.userPreference), toObservable(this.systemPreference)]).pipe(
-            map(([preference, systemPreference]) => preference ?? systemPreference),
-            distinctUntilChanged(),
-            tap((theme) => this.applyTheme(theme)),
-        ),
-        { initialValue: Theme.LIGHT },
-    );
+    public currentTheme = computed(() => this.userPreference() ?? this.systemPreference());
 
     private localStorageService = inject(LocalStorageService);
 
     private darkSchemeMediaQuery: MediaQueryList;
 
+    constructor() {
+        effect(() => {
+            // Apply the theme as soon as the currentTheme changes
+            const currentTheme = this.currentTheme();
+            untracked(() => this.applyTheme(currentTheme));
+        });
+    }
+
     /**
      * Should be called once on application startup.
      * Sets up the system preference listener and applies the theme initially
diff --git a/src/main/webapp/app/exercises/modeling/manage/example-modeling/example-modeling-submission.component.html b/src/main/webapp/app/exercises/modeling/manage/example-modeling/example-modeling-submission.component.html
index 8f414f19509e..1d47cb3b1c33 100644
--- a/src/main/webapp/app/exercises/modeling/manage/example-modeling/example-modeling-submission.component.html
+++ b/src/main/webapp/app/exercises/modeling/manage/example-modeling/example-modeling-submission.component.html
@@ -129,9 +129,9 @@ <h5 class="fw-light" jhiTranslate="artemisApp.exampleSubmission.home.assessmentT
         <div class="col-12">
             <div class="row flex-nowrap">
                 <div class="col editor-container-outer">
-                    @if (highlightedElements && highlightedElements.size > 0) {
+                    @if (highlightedElements() && highlightedElements().size > 0) {
                         <div class="col">
-                            <div [style.background-color]="highlightColor" class="my-2 text-center">
+                            <div [style.background-color]="highlightColor()" class="my-2 text-center">
                                 <span jhiTranslate="artemisApp.exampleSubmission.modelElementHint"></span>
                             </div>
                         </div>
@@ -160,7 +160,7 @@ <h5 class="fw-light" jhiTranslate="artemisApp.exampleSubmission.home.assessmentT
                                 [readOnly]="readOnly"
                                 [course]="course"
                                 [explanation]="explanationText"
-                                [highlightedElements]="highlightedElements"
+                                [highlightedElements]="highlightedElements()"
                                 (feedbackChanged)="onReferencedFeedbackChanged($event)"
                             />
                         }
diff --git a/src/main/webapp/app/exercises/modeling/manage/example-modeling/example-modeling-submission.component.ts b/src/main/webapp/app/exercises/modeling/manage/example-modeling/example-modeling-submission.component.ts
index a6e992ec0e37..27d7cd03894d 100644
--- a/src/main/webapp/app/exercises/modeling/manage/example-modeling/example-modeling-submission.component.ts
+++ b/src/main/webapp/app/exercises/modeling/manage/example-modeling/example-modeling-submission.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, computed, effect, inject, signal, untracked } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { AlertService } from 'app/core/util/alert.service';
 import { HttpErrorResponse, HttpResponse } from '@angular/common/http';
@@ -28,7 +28,6 @@ import { forkJoin } from 'rxjs';
 import { filterInvalidFeedback } from 'app/exercises/modeling/assess/modeling-assessment.util';
 import { Theme, ThemeService } from 'app/core/theme/theme.service';
 import { scrollToTopOfPage } from 'app/shared/util/utils';
-import { toObservable } from '@angular/core/rxjs-interop';
 
 @Component({
     selector: 'jhi-example-modeling-submission',
@@ -41,6 +40,8 @@ export class ExampleModelingSubmissionComponent implements OnInit, FeedbackMarke
     @ViewChild(ModelingAssessmentComponent, { static: false })
     assessmentEditor: ModelingAssessmentComponent;
 
+    private readonly themeService = inject(ThemeService);
+
     isNewSubmission: boolean;
     assessmentMode = false;
     exerciseId: number;
@@ -94,15 +95,14 @@ export class ExampleModelingSubmissionComponent implements OnInit, FeedbackMarke
         return [...this.referencedFeedback, ...this.unreferencedFeedback];
     }
 
-    highlightedElements = new Map<string, string>();
+    highlightedElements = signal<Map<string, string>>(new Map<string, string>());
     referencedExampleFeedback: Feedback[] = [];
-    highlightColor = 'lightblue';
+    highlightColor = computed(() => (this.themeService.userPreference() === Theme.DARK ? 'darkblue' : 'lightblue'));
 
     // Icons
     faSave = faSave;
     faCircle = faCircle;
     faInfoCircle = faInfoCircle;
-    faExclamation = faExclamation;
     faCodeBranch = faCodeBranch;
     faChalkboardTeacher = faChalkboardTeacher;
 
@@ -115,21 +115,17 @@ export class ExampleModelingSubmissionComponent implements OnInit, FeedbackMarke
         private route: ActivatedRoute,
         private router: Router,
         private navigationUtilService: ArtemisNavigationUtilService,
-        private changeDetector: ChangeDetectorRef,
-        private themeService: ThemeService,
     ) {
-        toObservable(this.themeService.userPreference).subscribe((themeOrUndefined) => {
-            if (themeOrUndefined === Theme.DARK) {
-                this.highlightColor = 'darkblue';
-            } else {
-                this.highlightColor = 'lightblue';
-            }
-
-            const updatedHighlights = new Map<string, string>();
-            this.highlightedElements.forEach((_, key) => {
-                updatedHighlights.set(key, this.highlightColor);
+        effect(() => {
+            // Update highlighted elements as soon as current theme changes
+            const highlightColor = this.highlightColor();
+            untracked(() => {
+                const updatedHighlights = new Map<string, string>();
+                this.highlightedElements().forEach((_, key) => {
+                    updatedHighlights.set(key, highlightColor);
+                });
+                this.highlightedElements.set(updatedHighlights);
             });
-            this.highlightedElements = updatedHighlights;
         });
     }
 
@@ -479,11 +475,11 @@ export class ExampleModelingSubmissionComponent implements OnInit, FeedbackMarke
         const missedReferencedExampleFeedbacks = this.referencedExampleFeedback.filter(
             (feedback) => !this.referencedFeedback.some((referencedFeedback) => referencedFeedback.reference === feedback.reference),
         );
-        this.highlightedElements = new Map<string, string>();
+        const highlightedElements = new Map<string, string>();
         for (const feedback of missedReferencedExampleFeedbacks) {
-            this.highlightedElements.set(feedback.referenceId!, this.highlightColor);
+            highlightedElements.set(feedback.referenceId!, this.highlightColor());
         }
-        this.changeDetector.detectChanges();
+        this.highlightedElements.set(highlightedElements);
     }
 
     readAndUnderstood() {
diff --git a/src/main/webapp/app/exercises/programming/shared/instructions-render/service/programming-exercise-plant-uml.service.ts b/src/main/webapp/app/exercises/programming/shared/instructions-render/service/programming-exercise-plant-uml.service.ts
index c6fa278c336b..470c54d934dd 100644
--- a/src/main/webapp/app/exercises/programming/shared/instructions-render/service/programming-exercise-plant-uml.service.ts
+++ b/src/main/webapp/app/exercises/programming/shared/instructions-render/service/programming-exercise-plant-uml.service.ts
@@ -1,10 +1,9 @@
-import { Injectable } from '@angular/core';
+import { Injectable, effect, inject } from '@angular/core';
 import { HttpClient, HttpParameterCodec, HttpParams } from '@angular/common/http';
 import { Cacheable } from 'ts-cacheable';
 import { Observable, Subject } from 'rxjs';
-import { map, tap } from 'rxjs/operators';
+import { map } from 'rxjs/operators';
 import { Theme, ThemeService } from 'app/core/theme/theme.service';
-import { toObservable } from '@angular/core/rxjs-interop';
 
 const themeChangedSubject = new Subject<void>();
 
@@ -13,18 +12,20 @@ export class ProgrammingExercisePlantUmlService {
     private resourceUrl = 'api/plantuml';
     private encoder: HttpParameterCodec;
 
+    private readonly themeService = inject(ThemeService);
+    private readonly http = inject(HttpClient);
+
     /**
      * Cacheable configuration
      */
 
-    constructor(
-        private http: HttpClient,
-        private themeService: ThemeService,
-    ) {
+    constructor() {
         this.encoder = new HttpUrlCustomEncoder();
-        toObservable(this.themeService.currentTheme)
-            .pipe(tap(() => themeChangedSubject.next()))
-            .subscribe();
+        effect(() => {
+            // Apply the theme as soon as the currentTheme changes
+            this.themeService.currentTheme();
+            themeChangedSubject.next();
+        });
     }
 
     /**
diff --git a/src/test/javascript/spec/component/programming-exercise/programming-exercise-instruction.component.spec.ts b/src/test/javascript/spec/component/programming-exercise/programming-exercise-instruction.component.spec.ts
index 8040940c9bc3..897ed506f126 100644
--- a/src/test/javascript/spec/component/programming-exercise/programming-exercise-instruction.component.spec.ts
+++ b/src/test/javascript/spec/component/programming-exercise/programming-exercise-instruction.component.spec.ts
@@ -210,6 +210,7 @@ describe('ProgrammingExerciseInstructionComponent', () => {
         comp.participation = participation;
         comp.isInitial = false;
         triggerChanges(comp, { property: 'exercise', currentValue: { ...comp.exercise, problemStatement: newProblemStatement }, firstChange: false });
+        fixture.detectChanges();
         expect(comp.markdownExtensions).toHaveLength(2);
         expect(updateMarkdownStub).toHaveBeenCalledOnce();
         expect(loadInitialResult).not.toHaveBeenCalled();
@@ -365,6 +366,7 @@ describe('ProgrammingExerciseInstructionComponent', () => {
 
         expect(debugElement.query(By.css('.stepwizard'))).not.toBeNull();
         expect(debugElement.queryAll(By.css('.btn-circle'))).toHaveLength(2);
+        fixture.detectChanges();
         tick();
         fixture.detectChanges();
 
@@ -426,7 +428,6 @@ describe('ProgrammingExerciseInstructionComponent', () => {
 
         comp.updateMarkdown();
 
-        fixture.detectChanges();
         tick();
 
         // first test should be green (successful), second red (failed)
@@ -448,7 +449,8 @@ describe('ProgrammingExerciseInstructionComponent', () => {
     it('should update the markdown on a theme change', () => {
         const updateMarkdownStub = jest.spyOn(comp, 'updateMarkdown');
         themeService.applyThemePreference(Theme.DARK);
-        TestBed.flushEffects();
+
+        fixture.detectChanges();
 
         expect(updateMarkdownStub).toHaveBeenCalledOnce();
     });
diff --git a/src/test/javascript/spec/component/shared/navbar.component.spec.ts b/src/test/javascript/spec/component/shared/navbar.component.spec.ts
index b02e161d1f22..8b37f25b6f19 100644
--- a/src/test/javascript/spec/component/shared/navbar.component.spec.ts
+++ b/src/test/javascript/spec/component/shared/navbar.component.spec.ts
@@ -1,4 +1,4 @@
-import { HttpResponse } from '@angular/common/http';
+import { HttpResponse, provideHttpClient } from '@angular/common/http';
 import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { ActivatedRoute, Router, UrlSerializer } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
@@ -37,7 +37,7 @@ import { SystemNotificationComponent } from 'app/shared/notification/system-noti
 import { NgbTooltipMocksModule } from '../../helpers/mocks/directive/ngbTooltipMocks.module';
 import { NgbCollapseMocksModule } from '../../helpers/mocks/directive/ngbCollapseMocks.module';
 import { NgbDropdownMocksModule } from '../../helpers/mocks/directive/ngbDropdownMocks.module';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 
 class MockBreadcrumb {
@@ -93,7 +93,7 @@ describe('NavbarComponent', () => {
 
     beforeEach(() => {
         return TestBed.configureTestingModule({
-            imports: [HttpClientTestingModule, NgbTooltipMocksModule, NgbCollapseMocksModule, NgbDropdownMocksModule],
+            imports: [NgbTooltipMocksModule, NgbCollapseMocksModule, NgbDropdownMocksModule],
             declarations: [
                 NavbarComponent,
                 MockDirective(HasAnyAuthorityDirective),
@@ -112,6 +112,8 @@ describe('NavbarComponent', () => {
                 MockComponent(FaIconComponent),
             ],
             providers: [
+                provideHttpClient(),
+                provideHttpClientTesting(),
                 MockProvider(UrlSerializer),
                 {
                     provide: AccountService,
diff --git a/src/test/javascript/spec/component/shared/progress-bar.component.spec.ts b/src/test/javascript/spec/component/shared/progress-bar.component.spec.ts
index 26280ca71b70..e7d1805953df 100644
--- a/src/test/javascript/spec/component/shared/progress-bar.component.spec.ts
+++ b/src/test/javascript/spec/component/shared/progress-bar.component.spec.ts
@@ -5,6 +5,7 @@ import { ArtemisTestModule } from '../../test.module';
 import { SimpleChange } from '@angular/core';
 import { MockDirective } from 'ng-mocks';
 import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
+import { MockThemeService } from '../../helpers/mocks/service/mock-theme.service';
 
 describe('ProgressBarComponent', () => {
     let fixture: ComponentFixture<ProgressBarComponent>;
@@ -14,6 +15,12 @@ describe('ProgressBarComponent', () => {
         TestBed.configureTestingModule({
             imports: [ArtemisTestModule, MockDirective(NgbTooltip)],
             declarations: [ProgressBarComponent],
+            providers: [
+                {
+                    class: ThemeService,
+                    useClass: MockThemeService,
+                },
+            ],
         })
             .compileComponents()
             .then(() => {
@@ -50,6 +57,9 @@ describe('ProgressBarComponent', () => {
         expect(component.foregroundColorClass).toBe('text-dark');
 
         themeService.applyThemePreference(Theme.DARK);
+
+        fixture.detectChanges();
+
         expect(component.foregroundColorClass).toBe('text-white');
     });
 
diff --git a/src/test/javascript/spec/service/theme.service.spec.ts b/src/test/javascript/spec/service/theme.service.spec.ts
index 20356458e221..3ff8f86499ba 100644
--- a/src/test/javascript/spec/service/theme.service.spec.ts
+++ b/src/test/javascript/spec/service/theme.service.spec.ts
@@ -10,7 +10,7 @@ describe('ThemeService', () => {
     let linkElement: HTMLElement;
     let documentGetElementMock: jest.SpyInstance;
     let headElement: HTMLElement;
-    let documentgetElementsByTagNameMock: jest.SpyInstance;
+    let documentGetElementsByTagNameMock: jest.SpyInstance;
     let newElement: HTMLLinkElement;
     let documentCreateElementMock: jest.SpyInstance;
     let storeSpy: jest.SpyInstance;
@@ -36,7 +36,7 @@ describe('ThemeService', () => {
                     getElementsByTagName: jest.fn().mockReturnValue([{}, {}]),
                     insertBefore: jest.fn(),
                 } as any as HTMLElement;
-                documentgetElementsByTagNameMock = jest.spyOn(document, 'getElementsByTagName').mockReturnValue([headElement] as unknown as HTMLCollectionOf<HTMLElement>);
+                documentGetElementsByTagNameMock = jest.spyOn(document, 'getElementsByTagName').mockReturnValue([headElement] as unknown as HTMLCollectionOf<HTMLElement>);
 
                 newElement = {} as HTMLLinkElement;
                 documentCreateElementMock = jest.spyOn(document, 'createElement').mockReturnValue(newElement);
@@ -70,8 +70,8 @@ describe('ThemeService', () => {
         expect(documentGetElementMock).toHaveBeenCalledTimes(2);
         expect(documentGetElementMock).toHaveBeenCalledWith(THEME_OVERRIDE_ID);
 
-        expect(documentgetElementsByTagNameMock).toHaveBeenCalledOnce();
-        expect(documentgetElementsByTagNameMock).toHaveBeenCalledWith('head');
+        expect(documentGetElementsByTagNameMock).toHaveBeenCalledOnce();
+        expect(documentGetElementsByTagNameMock).toHaveBeenCalledWith('head');
         expect(documentCreateElementMock).toHaveBeenCalledOnce();
         expect(documentCreateElementMock).toHaveBeenCalledWith('link');
 

From 8ce085833ef9b36ac7bef3a9767df898a020a707 Mon Sep 17 00:00:00 2001
From: Johannes Wiest <Johannes.wiest@outlook.com>
Date: Mon, 7 Oct 2024 13:18:39 +0200
Subject: [PATCH 15/24] fix more client tests

---
 .../app/core/theme/theme-switch.component.ts  |   6 +-
 .../component/shared/navbar.component.spec.ts | 271 +++++++++++++++---
 2 files changed, 229 insertions(+), 48 deletions(-)

diff --git a/src/main/webapp/app/core/theme/theme-switch.component.ts b/src/main/webapp/app/core/theme/theme-switch.component.ts
index d94419aa6fea..06d60d3fc433 100644
--- a/src/main/webapp/app/core/theme/theme-switch.component.ts
+++ b/src/main/webapp/app/core/theme/theme-switch.component.ts
@@ -1,12 +1,10 @@
 import { ChangeDetectionStrategy, Component, OnInit, computed, inject, input, viewChild } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
-import { NgbPopover } from '@ng-bootstrap/ng-bootstrap';
+import { NgbModule, NgbPopover } from '@ng-bootstrap/ng-bootstrap';
 import { PlacementArray } from '@ng-bootstrap/ng-bootstrap/util/positioning';
 import { Theme, ThemeService } from 'app/core/theme/theme.service';
 import { fromEvent } from 'rxjs';
 import { faSync } from '@fortawesome/free-solid-svg-icons';
-import { ArtemisSharedModule } from 'app/shared/shared.module';
 
 /**
  * Displays a sun or a moon in the navbar, depending on the current theme.
@@ -17,7 +15,7 @@ import { ArtemisSharedModule } from 'app/shared/shared.module';
     selector: 'jhi-theme-switch',
     templateUrl: './theme-switch.component.html',
     styleUrls: ['theme-switch.component.scss'],
-    imports: [TranslateModule, CommonModule, ArtemisSharedModule],
+    imports: [TranslateModule, NgbModule],
     changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
 })
diff --git a/src/test/javascript/spec/component/shared/navbar.component.spec.ts b/src/test/javascript/spec/component/shared/navbar.component.spec.ts
index 8b37f25b6f19..1afb333a8c12 100644
--- a/src/test/javascript/spec/component/shared/navbar.component.spec.ts
+++ b/src/test/javascript/spec/component/shared/navbar.component.spec.ts
@@ -26,7 +26,6 @@ import { JhiConnectionWarningComponent } from 'app/shared/connection-warning/con
 import { AccountService } from 'app/core/auth/account.service';
 import { MockAccountService } from '../../helpers/mocks/service/mock-account.service';
 import { EntityTitleService, EntityType } from 'app/shared/layouts/navbar/entity-title.service';
-import { ThemeSwitchComponent } from 'app/core/theme/theme-switch.component';
 import { Authority } from 'app/shared/constants/authority.constants';
 import { User } from 'app/core/user/user.model';
 import { ExamParticipationService } from 'app/exam/participate/exam-participation.service';
@@ -39,6 +38,8 @@ import { NgbCollapseMocksModule } from '../../helpers/mocks/directive/ngbCollaps
 import { NgbDropdownMocksModule } from '../../helpers/mocks/directive/ngbDropdownMocks.module';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { GuidedTourService } from 'app/guided-tour/guided-tour.service';
+import { ThemeSwitchComponent } from 'app/core/theme/theme-switch.component';
 
 class MockBreadcrumb {
     label: string;
@@ -107,9 +108,9 @@ describe('NavbarComponent', () => {
                 MockComponent(GuidedTourComponent),
                 MockComponent(LoadingNotificationComponent),
                 MockComponent(JhiConnectionWarningComponent),
-                MockComponent(ThemeSwitchComponent),
                 MockComponent(SystemNotificationComponent),
                 MockComponent(FaIconComponent),
+                ThemeSwitchComponent,
             ],
             providers: [
                 provideHttpClient(),
@@ -123,6 +124,12 @@ describe('NavbarComponent', () => {
                 { provide: SessionStorageService, useClass: MockSyncStorage },
                 { provide: TranslateService, useClass: MockTranslateService },
                 { provide: Router, useValue: router },
+                {
+                    provide: GuidedTourService,
+                    useValue: {
+                        getGuidedTourAvailabilityStream: () => of(false),
+                    },
+                },
                 {
                     provide: ActivatedRoute,
                     useValue: new MockActivatedRoute({ id: 123 }),
@@ -216,10 +223,22 @@ describe('NavbarComponent', () => {
 
         expect(component.breadcrumbs).toHaveLength(3);
 
-        const systemBreadcrumb = { label: 'artemisApp.systemNotification.systemNotifications', translate: true, uri: '/admin/system-notification-management/' } as MockBreadcrumb;
+        const systemBreadcrumb = {
+            label: 'artemisApp.systemNotification.systemNotifications',
+            translate: true,
+            uri: '/admin/system-notification-management/',
+        } as MockBreadcrumb;
         expect(component.breadcrumbs[0]).toEqual(systemBreadcrumb);
-        expect(component.breadcrumbs[1]).toEqual({ label: '1', translate: false, uri: '/admin/system-notification-management/1/' } as MockBreadcrumb);
-        expect(component.breadcrumbs[2]).toEqual({ label: 'global.generic.edit', translate: true, uri: '/admin/system-notification-management/1/edit/' } as MockBreadcrumb);
+        expect(component.breadcrumbs[1]).toEqual({
+            label: '1',
+            translate: false,
+            uri: '/admin/system-notification-management/1/',
+        } as MockBreadcrumb);
+        expect(component.breadcrumbs[2]).toEqual({
+            label: 'global.generic.edit',
+            translate: true,
+            uri: '/admin/system-notification-management/1/edit/',
+        } as MockBreadcrumb);
     });
 
     it('should build breadcrumbs for user management', () => {
@@ -230,8 +249,16 @@ describe('NavbarComponent', () => {
 
         expect(component.breadcrumbs).toHaveLength(2);
 
-        expect(component.breadcrumbs[0]).toEqual({ label: 'artemisApp.userManagement.home.title', translate: true, uri: '/admin/user-management/' } as MockBreadcrumb);
-        expect(component.breadcrumbs[1]).toEqual({ label: 'test_user', translate: false, uri: '/admin/user-management/test_user/' } as MockBreadcrumb);
+        expect(component.breadcrumbs[0]).toEqual({
+            label: 'artemisApp.userManagement.home.title',
+            translate: true,
+            uri: '/admin/user-management/',
+        } as MockBreadcrumb);
+        expect(component.breadcrumbs[1]).toEqual({
+            label: 'test_user',
+            translate: false,
+            uri: '/admin/user-management/test_user/',
+        } as MockBreadcrumb);
     });
 
     it('should build breadcrumbs for organization management', () => {
@@ -244,8 +271,16 @@ describe('NavbarComponent', () => {
         expect(entityTitleServiceStub).toHaveBeenCalledWith(EntityType.ORGANIZATION, [1]);
         expect(component.breadcrumbs).toHaveLength(2);
 
-        expect(component.breadcrumbs[0]).toEqual({ label: 'artemisApp.organizationManagement.title', translate: true, uri: '/admin/organization-management/' } as MockBreadcrumb);
-        expect(component.breadcrumbs[1]).toEqual({ label: 'Test Organization', translate: false, uri: '/admin/organization-management/1/' } as MockBreadcrumb);
+        expect(component.breadcrumbs[0]).toEqual({
+            label: 'artemisApp.organizationManagement.title',
+            translate: true,
+            uri: '/admin/organization-management/',
+        } as MockBreadcrumb);
+        expect(component.breadcrumbs[1]).toEqual({
+            label: 'Test Organization',
+            translate: false,
+            uri: '/admin/organization-management/1/',
+        } as MockBreadcrumb);
     });
 
     it('should not error without translation', () => {
@@ -256,7 +291,11 @@ describe('NavbarComponent', () => {
 
         expect(component.breadcrumbs).toHaveLength(1);
 
-        expect(component.breadcrumbs[0]).toEqual({ label: 'route-without-translation', translate: false, uri: '/admin/route-without-translation/' } as MockBreadcrumb);
+        expect(component.breadcrumbs[0]).toEqual({
+            label: 'route-without-translation',
+            translate: false,
+            uri: '/admin/route-without-translation/',
+        } as MockBreadcrumb);
     });
 
     it('should hide breadcrumb when exam is started', () => {
@@ -358,7 +397,11 @@ describe('NavbarComponent', () => {
             expect(component.breadcrumbs[0]).toEqual(courseManagementCrumb);
             expect(component.breadcrumbs[1]).toEqual(testCourseCrumb);
             expect(component.breadcrumbs[2]).toEqual(programmingExercisesCrumb);
-            expect(component.breadcrumbs[3]).toEqual({ label: 'Test Exercise', translate: false, uri: '/course-management/1/programming-exercises/2/' } as MockBreadcrumb);
+            expect(component.breadcrumbs[3]).toEqual({
+                label: 'Test Exercise',
+                translate: false,
+                uri: '/course-management/1/programming-exercises/2/',
+            } as MockBreadcrumb);
             expect(component.breadcrumbs[4]).toEqual(gradingCrumb);
         });
 
@@ -383,7 +426,11 @@ describe('NavbarComponent', () => {
             expect(component.breadcrumbs[0]).toEqual(courseManagementCrumb);
             expect(component.breadcrumbs[1]).toEqual(testCourseCrumb);
             expect(component.breadcrumbs[2]).toEqual(programmingExercisesCrumb);
-            expect(component.breadcrumbs[3]).toEqual({ label: 'Test Exercise', translate: false, uri: '/course-management/1/programming-exercises/2/' } as MockBreadcrumb);
+            expect(component.breadcrumbs[3]).toEqual({
+                label: 'Test Exercise',
+                translate: false,
+                uri: '/course-management/1/programming-exercises/2/',
+            } as MockBreadcrumb);
             expect(component.breadcrumbs[4]).toEqual(assessmentCrumb);
         });
 
@@ -391,9 +438,14 @@ describe('NavbarComponent', () => {
             const testUrl = '/course-management/1/exercises/2/exercise-hints/3';
             router.setUrl(testUrl);
 
-            const findStub = jest
-                .spyOn(exerciseService, 'find')
-                .mockReturnValue(of({ body: { title: 'Test Exercise', type: ExerciseType.PROGRAMMING } } as HttpResponse<Exercise>));
+            const findStub = jest.spyOn(exerciseService, 'find').mockReturnValue(
+                of({
+                    body: {
+                        title: 'Test Exercise',
+                        type: ExerciseType.PROGRAMMING,
+                    },
+                } as HttpResponse<Exercise>),
+            );
 
             fixture.detectChanges();
 
@@ -419,8 +471,16 @@ describe('NavbarComponent', () => {
 
             expect(component.breadcrumbs[0]).toEqual(courseManagementCrumb);
             expect(component.breadcrumbs[1]).toEqual(testCourseCrumb);
-            expect(component.breadcrumbs[2]).toEqual({ label: 'artemisApp.course.exercises', translate: true, uri: '/course-management/1/exercises/' } as MockBreadcrumb);
-            expect(component.breadcrumbs[3]).toEqual({ label: 'Test Exercise', translate: false, uri: '/course-management/1/programming-exercises/2/' } as MockBreadcrumb);
+            expect(component.breadcrumbs[2]).toEqual({
+                label: 'artemisApp.course.exercises',
+                translate: true,
+                uri: '/course-management/1/exercises/',
+            } as MockBreadcrumb);
+            expect(component.breadcrumbs[3]).toEqual({
+                label: 'Test Exercise',
+                translate: false,
+                uri: '/course-management/1/programming-exercises/2/',
+            } as MockBreadcrumb);
             expect(component.breadcrumbs[4]).toEqual(hintsCrumb);
             expect(component.breadcrumbs[5]).toEqual(hintCrumb);
         });
@@ -484,7 +544,11 @@ describe('NavbarComponent', () => {
                 translate: true,
                 uri: '/course-management/1/modeling-exercises/',
             } as MockBreadcrumb);
-            expect(component.breadcrumbs[3]).toEqual({ label: 'Test Exercise', translate: false, uri: '/course-management/1/modeling-exercises/2/' } as MockBreadcrumb);
+            expect(component.breadcrumbs[3]).toEqual({
+                label: 'Test Exercise',
+                translate: false,
+                uri: '/course-management/1/modeling-exercises/2/',
+            } as MockBreadcrumb);
             expect(component.breadcrumbs[4]).toEqual(submissionCrumb);
             expect(component.breadcrumbs[5]).toEqual(editorSubmissionCrumb);
         });
@@ -520,7 +584,11 @@ describe('NavbarComponent', () => {
                 translate: true,
                 uri: '/course-management/1/modeling-exercises/',
             } as MockBreadcrumb);
-            expect(component.breadcrumbs[3]).toEqual({ label: 'Test Exercise', translate: false, uri: '/course-management/1/modeling-exercises/2/' } as MockBreadcrumb);
+            expect(component.breadcrumbs[3]).toEqual({
+                label: 'Test Exercise',
+                translate: false,
+                uri: '/course-management/1/modeling-exercises/2/',
+            } as MockBreadcrumb);
             expect(component.breadcrumbs[4]).toEqual(submissionCrumb);
             expect(component.breadcrumbs[5]).toEqual(editorSubmissionCrumb);
         });
@@ -551,8 +619,16 @@ describe('NavbarComponent', () => {
 
             expect(component.breadcrumbs[0]).toEqual(courseManagementCrumb);
             expect(component.breadcrumbs[1]).toEqual(testCourseCrumb);
-            expect(component.breadcrumbs[2]).toEqual({ label: 'artemisApp.lecture.home.title', translate: true, uri: '/course-management/1/lectures/' } as MockBreadcrumb);
-            expect(component.breadcrumbs[3]).toEqual({ label: 'Test Lecture', translate: false, uri: '/course-management/1/lectures/2/' } as MockBreadcrumb);
+            expect(component.breadcrumbs[2]).toEqual({
+                label: 'artemisApp.lecture.home.title',
+                translate: true,
+                uri: '/course-management/1/lectures/',
+            } as MockBreadcrumb);
+            expect(component.breadcrumbs[3]).toEqual({
+                label: 'Test Lecture',
+                translate: false,
+                uri: '/course-management/1/lectures/2/',
+            } as MockBreadcrumb);
             expect(component.breadcrumbs[4]).toEqual(unitManagementCrumb);
             expect(component.breadcrumbs[5]).toEqual(createCrumb);
         });
@@ -576,7 +652,11 @@ describe('NavbarComponent', () => {
                 translate: true,
                 uri: '/course-management/1/apollon-diagrams/',
             } as MockBreadcrumb);
-            expect(component.breadcrumbs[3]).toEqual({ label: 'Test Diagram', translate: false, uri: '/course-management/1/apollon-diagrams/2/' } as MockBreadcrumb);
+            expect(component.breadcrumbs[3]).toEqual({
+                label: 'Test Diagram',
+                translate: false,
+                uri: '/course-management/1/apollon-diagrams/2/',
+            } as MockBreadcrumb);
         });
 
         it('exam exercise groups', () => {
@@ -604,8 +684,16 @@ describe('NavbarComponent', () => {
 
             expect(component.breadcrumbs[0]).toEqual(courseManagementCrumb);
             expect(component.breadcrumbs[1]).toEqual(testCourseCrumb);
-            expect(component.breadcrumbs[2]).toEqual({ label: 'artemisApp.examManagement.title', translate: true, uri: '/course-management/1/exams/' } as MockBreadcrumb);
-            expect(component.breadcrumbs[3]).toEqual({ label: 'Test Exam', translate: false, uri: '/course-management/1/exams/2/' } as MockBreadcrumb);
+            expect(component.breadcrumbs[2]).toEqual({
+                label: 'artemisApp.examManagement.title',
+                translate: true,
+                uri: '/course-management/1/exams/',
+            } as MockBreadcrumb);
+            expect(component.breadcrumbs[3]).toEqual({
+                label: 'Test Exam',
+                translate: false,
+                uri: '/course-management/1/exams/2/',
+            } as MockBreadcrumb);
             expect(component.breadcrumbs[4]).toEqual(exerciseGroupsCrumb);
             expect(component.breadcrumbs[5]).toEqual(createCrumb);
         });
@@ -641,8 +729,16 @@ describe('NavbarComponent', () => {
 
             expect(component.breadcrumbs[0]).toEqual(courseManagementCrumb);
             expect(component.breadcrumbs[1]).toEqual(testCourseCrumb);
-            expect(component.breadcrumbs[2]).toEqual({ label: 'artemisApp.examManagement.title', translate: true, uri: '/course-management/1/exams/' } as MockBreadcrumb);
-            expect(component.breadcrumbs[3]).toEqual({ label: 'Test Exam', translate: false, uri: '/course-management/1/exams/2/' } as MockBreadcrumb);
+            expect(component.breadcrumbs[2]).toEqual({
+                label: 'artemisApp.examManagement.title',
+                translate: true,
+                uri: '/course-management/1/exams/',
+            } as MockBreadcrumb);
+            expect(component.breadcrumbs[3]).toEqual({
+                label: 'Test Exam',
+                translate: false,
+                uri: '/course-management/1/exams/2/',
+            } as MockBreadcrumb);
             expect(component.breadcrumbs[4]).toEqual(exerciseGroupsCrumb);
             expect(component.breadcrumbs[5]).toEqual(exerciseCrumb);
             expect(component.breadcrumbs[6]).toEqual(plagiarismCrumb);
@@ -663,28 +759,111 @@ describe('NavbarComponent', () => {
             expect(component.breadcrumbs).toHaveLength(4);
             expect(component.breadcrumbs[0]).toMatchObject({ uri: '/courses/', label: 'artemisApp.course.home.title' });
             expect(component.breadcrumbs[1]).toMatchObject({ uri: '/courses/1/', label: 'Test Course' });
-            expect(component.breadcrumbs[2]).toMatchObject({ uri: '/courses/1/exercises/', label: 'artemisApp.courseOverview.menu.exercises' });
+            expect(component.breadcrumbs[2]).toMatchObject({
+                uri: '/courses/1/exercises/',
+                label: 'artemisApp.courseOverview.menu.exercises',
+            });
             expect(component.breadcrumbs[3]).toMatchObject({ uri: '/courses/1/exercises/2/', label: 'Test Exercise' });
         });
     });
 
     it.each([
-        { width: 1200, account: { login: 'test' }, roles: [Authority.ADMIN], expected: { isCollapsed: false, isNavbarNavVertical: false, iconsMovedToMenu: false } },
-        { width: 1100, account: { login: 'test' }, roles: [Authority.ADMIN], expected: { isCollapsed: true, isNavbarNavVertical: false, iconsMovedToMenu: false } },
-        { width: 600, account: { login: 'test' }, roles: [Authority.ADMIN], expected: { isCollapsed: true, isNavbarNavVertical: false, iconsMovedToMenu: true } },
-        { width: 550, account: { login: 'test' }, roles: [Authority.ADMIN], expected: { isCollapsed: true, isNavbarNavVertical: true, iconsMovedToMenu: true } },
-        { width: 1000, account: { login: 'test' }, roles: [Authority.INSTRUCTOR], expected: { isCollapsed: false, isNavbarNavVertical: false, iconsMovedToMenu: false } },
-        { width: 850, account: { login: 'test' }, roles: [Authority.INSTRUCTOR], expected: { isCollapsed: true, isNavbarNavVertical: false, iconsMovedToMenu: false } },
-        { width: 600, account: { login: 'test' }, roles: [Authority.INSTRUCTOR], expected: { isCollapsed: true, isNavbarNavVertical: false, iconsMovedToMenu: true } },
-        { width: 470, account: { login: 'test' }, roles: [Authority.INSTRUCTOR], expected: { isCollapsed: true, isNavbarNavVertical: true, iconsMovedToMenu: true } },
-        { width: 800, account: { login: 'test' }, roles: [Authority.USER], expected: { isCollapsed: false, isNavbarNavVertical: false, iconsMovedToMenu: false } },
-        { width: 650, account: { login: 'test' }, roles: [Authority.USER], expected: { isCollapsed: true, isNavbarNavVertical: false, iconsMovedToMenu: false } },
-        { width: 600, account: { login: 'test' }, roles: [Authority.USER], expected: { isCollapsed: true, isNavbarNavVertical: false, iconsMovedToMenu: true } },
-        { width: 470, account: { login: 'test' }, roles: [Authority.USER], expected: { isCollapsed: true, isNavbarNavVertical: true, iconsMovedToMenu: true } },
-        { width: 520, account: undefined, roles: [], expected: { isCollapsed: false, isNavbarNavVertical: false, iconsMovedToMenu: false } },
-        { width: 500, account: undefined, roles: [], expected: { isCollapsed: true, isNavbarNavVertical: false, iconsMovedToMenu: false } },
-        { width: 450, account: undefined, roles: [], expected: { isCollapsed: true, isNavbarNavVertical: true, iconsMovedToMenu: false } },
-        { width: 400, account: undefined, roles: [], expected: { isCollapsed: true, isNavbarNavVertical: true, iconsMovedToMenu: true } },
+        {
+            width: 1200,
+            account: { login: 'test' },
+            roles: [Authority.ADMIN],
+            expected: { isCollapsed: false, isNavbarNavVertical: false, iconsMovedToMenu: false },
+        },
+        {
+            width: 1100,
+            account: { login: 'test' },
+            roles: [Authority.ADMIN],
+            expected: { isCollapsed: true, isNavbarNavVertical: false, iconsMovedToMenu: false },
+        },
+        {
+            width: 600,
+            account: { login: 'test' },
+            roles: [Authority.ADMIN],
+            expected: { isCollapsed: true, isNavbarNavVertical: false, iconsMovedToMenu: true },
+        },
+        {
+            width: 550,
+            account: { login: 'test' },
+            roles: [Authority.ADMIN],
+            expected: { isCollapsed: true, isNavbarNavVertical: true, iconsMovedToMenu: true },
+        },
+        {
+            width: 1000,
+            account: { login: 'test' },
+            roles: [Authority.INSTRUCTOR],
+            expected: { isCollapsed: false, isNavbarNavVertical: false, iconsMovedToMenu: false },
+        },
+        {
+            width: 850,
+            account: { login: 'test' },
+            roles: [Authority.INSTRUCTOR],
+            expected: { isCollapsed: true, isNavbarNavVertical: false, iconsMovedToMenu: false },
+        },
+        {
+            width: 600,
+            account: { login: 'test' },
+            roles: [Authority.INSTRUCTOR],
+            expected: { isCollapsed: true, isNavbarNavVertical: false, iconsMovedToMenu: true },
+        },
+        {
+            width: 470,
+            account: { login: 'test' },
+            roles: [Authority.INSTRUCTOR],
+            expected: { isCollapsed: true, isNavbarNavVertical: true, iconsMovedToMenu: true },
+        },
+        {
+            width: 800,
+            account: { login: 'test' },
+            roles: [Authority.USER],
+            expected: { isCollapsed: false, isNavbarNavVertical: false, iconsMovedToMenu: false },
+        },
+        {
+            width: 650,
+            account: { login: 'test' },
+            roles: [Authority.USER],
+            expected: { isCollapsed: true, isNavbarNavVertical: false, iconsMovedToMenu: false },
+        },
+        {
+            width: 600,
+            account: { login: 'test' },
+            roles: [Authority.USER],
+            expected: { isCollapsed: true, isNavbarNavVertical: false, iconsMovedToMenu: true },
+        },
+        {
+            width: 470,
+            account: { login: 'test' },
+            roles: [Authority.USER],
+            expected: { isCollapsed: true, isNavbarNavVertical: true, iconsMovedToMenu: true },
+        },
+        {
+            width: 520,
+            account: undefined,
+            roles: [],
+            expected: { isCollapsed: false, isNavbarNavVertical: false, iconsMovedToMenu: false },
+        },
+        {
+            width: 500,
+            account: undefined,
+            roles: [],
+            expected: { isCollapsed: true, isNavbarNavVertical: false, iconsMovedToMenu: false },
+        },
+        {
+            width: 450,
+            account: undefined,
+            roles: [],
+            expected: { isCollapsed: true, isNavbarNavVertical: true, iconsMovedToMenu: false },
+        },
+        {
+            width: 400,
+            account: undefined,
+            roles: [],
+            expected: { isCollapsed: true, isNavbarNavVertical: true, iconsMovedToMenu: true },
+        },
     ])('should calculate correct breakpoints', ({ width, account, roles, expected }) => {
         const accountService = TestBed.inject(AccountService);
         jest.spyOn(accountService, 'hasAnyAuthorityDirect').mockImplementation((authArray) => authArray.some((auth) => (roles as string[]).includes(auth)));
@@ -694,6 +873,10 @@ describe('NavbarComponent', () => {
 
         component.onResize();
 
-        expect({ isCollapsed: component.isCollapsed, isNavbarNavVertical: component.isNavbarNavVertical, iconsMovedToMenu: component.iconsMovedToMenu }).toEqual(expected);
+        expect({
+            isCollapsed: component.isCollapsed,
+            isNavbarNavVertical: component.isNavbarNavVertical,
+            iconsMovedToMenu: component.iconsMovedToMenu,
+        }).toEqual(expected);
     });
 });

From 7d78fdd326bb83c679bb47ab3de581bbf0a029a0 Mon Sep 17 00:00:00 2001
From: Johannes Wiest <Johannes.wiest@outlook.com>
Date: Mon, 7 Oct 2024 15:14:36 +0200
Subject: [PATCH 16/24] fix more client tests

---
 src/main/webapp/app/core/theme/theme-switch.component.ts   | 3 ++-
 .../spec/component/shared/navbar.component.spec.ts         | 7 ++++++-
 .../guided-tour/guided-tour.integration.spec.ts            | 3 ++-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/main/webapp/app/core/theme/theme-switch.component.ts b/src/main/webapp/app/core/theme/theme-switch.component.ts
index 06d60d3fc433..b0856be1e77f 100644
--- a/src/main/webapp/app/core/theme/theme-switch.component.ts
+++ b/src/main/webapp/app/core/theme/theme-switch.component.ts
@@ -5,6 +5,7 @@ import { PlacementArray } from '@ng-bootstrap/ng-bootstrap/util/positioning';
 import { Theme, ThemeService } from 'app/core/theme/theme.service';
 import { fromEvent } from 'rxjs';
 import { faSync } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
 /**
  * Displays a sun or a moon in the navbar, depending on the current theme.
@@ -15,7 +16,7 @@ import { faSync } from '@fortawesome/free-solid-svg-icons';
     selector: 'jhi-theme-switch',
     templateUrl: './theme-switch.component.html',
     styleUrls: ['theme-switch.component.scss'],
-    imports: [TranslateModule, NgbModule],
+    imports: [TranslateModule, NgbModule, FontAwesomeModule],
     changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
 })
diff --git a/src/test/javascript/spec/component/shared/navbar.component.spec.ts b/src/test/javascript/spec/component/shared/navbar.component.spec.ts
index 1afb333a8c12..342ccd3ef2a5 100644
--- a/src/test/javascript/spec/component/shared/navbar.component.spec.ts
+++ b/src/test/javascript/spec/component/shared/navbar.component.spec.ts
@@ -110,7 +110,7 @@ describe('NavbarComponent', () => {
                 MockComponent(JhiConnectionWarningComponent),
                 MockComponent(SystemNotificationComponent),
                 MockComponent(FaIconComponent),
-                ThemeSwitchComponent,
+                MockComponent(ThemeSwitchComponent),
             ],
             providers: [
                 provideHttpClient(),
@@ -136,6 +136,11 @@ describe('NavbarComponent', () => {
                 },
             ],
         })
+            .overrideComponent(NavbarComponent, {
+                remove: {
+                    imports: [ThemeSwitchComponent],
+                },
+            })
             .compileComponents()
             .then(() => {
                 fixture = TestBed.createComponent(NavbarComponent);
diff --git a/src/test/javascript/spec/integration/guided-tour/guided-tour.integration.spec.ts b/src/test/javascript/spec/integration/guided-tour/guided-tour.integration.spec.ts
index 57b934b9497c..2dbbe67b9f26 100644
--- a/src/test/javascript/spec/integration/guided-tour/guided-tour.integration.spec.ts
+++ b/src/test/javascript/spec/integration/guided-tour/guided-tour.integration.spec.ts
@@ -85,7 +85,8 @@ describe('Guided tour integration', () => {
                 MockComponent(CoursesComponent),
                 MockComponent(SecuredImageComponent),
                 MockComponent(SystemNotificationComponent),
-                MockComponent(ThemeSwitchComponent),
+                // Component can not be mocked at the moment https://github.com/help-me-mom/ng-mocks/issues/8634
+                ThemeSwitchComponent,
                 MockComponent(DocumentationButtonComponent),
                 MockPipe(ArtemisTranslatePipe),
                 MockPipe(ArtemisDatePipe),

From 7b76e354df798b071e8192c988003310773ae317 Mon Sep 17 00:00:00 2001
From: Johannes Wiest <Johannes.wiest@outlook.com>
Date: Tue, 8 Oct 2024 13:22:32 +0200
Subject: [PATCH 17/24] fix monaco-editor.service.spec.ts

---
 .../monaco-editor/monaco-editor.service.ts    |  3 +--
 .../monaco-editor.service.spec.ts             | 23 +++++++++++--------
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/main/webapp/app/shared/monaco-editor/monaco-editor.service.ts b/src/main/webapp/app/shared/monaco-editor/monaco-editor.service.ts
index 0d00d81300a3..48855dde6e7d 100644
--- a/src/main/webapp/app/shared/monaco-editor/monaco-editor.service.ts
+++ b/src/main/webapp/app/shared/monaco-editor/monaco-editor.service.ts
@@ -2,7 +2,6 @@ import { Injectable, effect, inject } from '@angular/core';
 import * as monaco from 'monaco-editor';
 import { CUSTOM_MARKDOWN_CONFIG, CUSTOM_MARKDOWN_LANGUAGE, CUSTOM_MARKDOWN_LANGUAGE_ID } from 'app/shared/monaco-editor/model/languages/monaco-custom-markdown.language';
 import { Theme, ThemeService } from 'app/core/theme/theme.service';
-import { toSignal } from '@angular/core/rxjs-interop';
 
 /**
  * Service providing shared functionality for the Monaco editor.
@@ -15,7 +14,7 @@ export class MonacoEditorService {
     static readonly DARK_THEME_ID = 'vs-dark';
 
     private readonly themeService: ThemeService = inject(ThemeService);
-    private readonly currentTheme = toSignal(this.themeService.getCurrentThemeObservable(), { requireSync: true });
+    private readonly currentTheme = this.themeService.currentTheme;
 
     constructor() {
         monaco.languages.register({ id: CUSTOM_MARKDOWN_LANGUAGE_ID });
diff --git a/src/test/javascript/spec/component/shared/monaco-editor/monaco-editor.service.spec.ts b/src/test/javascript/spec/component/shared/monaco-editor/monaco-editor.service.spec.ts
index 82ffd4e2b8b3..74949e5aff7f 100644
--- a/src/test/javascript/spec/component/shared/monaco-editor/monaco-editor.service.spec.ts
+++ b/src/test/javascript/spec/component/shared/monaco-editor/monaco-editor.service.spec.ts
@@ -1,17 +1,17 @@
 import { TestBed } from '@angular/core/testing';
 import * as monaco from 'monaco-editor';
 import { Theme, ThemeService } from 'app/core/theme/theme.service';
-import { MonacoEditorService } from '../../../../../../main/webapp/app/shared/monaco-editor/monaco-editor.service';
+import { MonacoEditorService } from 'app/shared/monaco-editor/monaco-editor.service';
 import { ArtemisTestModule } from '../../../test.module';
 import { CUSTOM_MARKDOWN_LANGUAGE_ID } from 'app/shared/monaco-editor/model/languages/monaco-custom-markdown.language';
-import { BehaviorSubject } from 'rxjs';
 import { MockResizeObserver } from '../../../helpers/mocks/service/mock-resize-observer';
 
 describe('MonacoEditorService', () => {
     let monacoEditorService: MonacoEditorService;
     let setThemeSpy: jest.SpyInstance;
     let registerLanguageSpy: jest.SpyInstance;
-    const themeSubject = new BehaviorSubject(Theme.LIGHT);
+
+    let themeService: ThemeService;
 
     beforeEach(() => {
         TestBed.configureTestingModule({
@@ -23,8 +23,7 @@ describe('MonacoEditorService', () => {
         });
         registerLanguageSpy = jest.spyOn(monaco.languages, 'register');
         setThemeSpy = jest.spyOn(monaco.editor, 'setTheme');
-        const themeService = TestBed.inject(ThemeService);
-        jest.spyOn(themeService, 'getCurrentThemeObservable').mockReturnValue(themeSubject.asObservable());
+        themeService = TestBed.inject(ThemeService);
         monacoEditorService = TestBed.inject(MonacoEditorService);
     });
 
@@ -42,20 +41,26 @@ describe('MonacoEditorService', () => {
         // Initialization: The editor should be in light mode since that is what we initialized the themeSubject with
         expect(setThemeSpy).toHaveBeenCalledExactlyOnceWith(MonacoEditorService.LIGHT_THEME_ID);
         // Switch to dark theme
-        themeSubject.next(Theme.DARK);
+        themeService.applyThemePreference(Theme.DARK);
         TestBed.flushEffects();
         expect(setThemeSpy).toHaveBeenCalledTimes(2);
         expect(setThemeSpy).toHaveBeenNthCalledWith(2, MonacoEditorService.DARK_THEME_ID);
         // Switch back to light theme
-        themeSubject.next(Theme.LIGHT);
+        themeService.applyThemePreference(Theme.LIGHT);
         TestBed.flushEffects();
         expect(setThemeSpy).toHaveBeenCalledTimes(3);
         expect(setThemeSpy).toHaveBeenNthCalledWith(3, MonacoEditorService.LIGHT_THEME_ID);
     });
 
     it.each([
-        { className: 'monaco-editor', createFn: (element: HTMLElement) => monacoEditorService.createStandaloneCodeEditor(element) },
-        { className: 'monaco-diff-editor', createFn: (element: HTMLElement) => monacoEditorService.createStandaloneDiffEditor(element) },
+        {
+            className: 'monaco-editor',
+            createFn: (element: HTMLElement) => monacoEditorService.createStandaloneCodeEditor(element),
+        },
+        {
+            className: 'monaco-diff-editor',
+            createFn: (element: HTMLElement) => monacoEditorService.createStandaloneDiffEditor(element),
+        },
     ])(
         'should insert an editor ($className) into the provided DOM element',
         ({ className, createFn }: { className: string; createFn: (element: HTMLElement) => monaco.editor.IStandaloneCodeEditor | monaco.editor.IStandaloneDiffEditor }) => {

From ccc07c37ca676c44b88c6d39347805156f647c47 Mon Sep 17 00:00:00 2001
From: Johannes Wiest <Johannes.wiest@outlook.com>
Date: Tue, 8 Oct 2024 13:34:30 +0200
Subject: [PATCH 18/24] fix code-editor-instructor.integration.spec.ts

---
 .../code-editor/code-editor-instructor.integration.spec.ts     | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/test/javascript/spec/integration/code-editor/code-editor-instructor.integration.spec.ts b/src/test/javascript/spec/integration/code-editor/code-editor-instructor.integration.spec.ts
index 294c3d3a9a4e..bfe14ef786cb 100644
--- a/src/test/javascript/spec/integration/code-editor/code-editor-instructor.integration.spec.ts
+++ b/src/test/javascript/spec/integration/code-editor/code-editor-instructor.integration.spec.ts
@@ -3,7 +3,7 @@ import { LocalStorageService, SessionStorageService } from 'ngx-webstorage';
 import { TranslateModule } from '@ngx-translate/core';
 import { JhiLanguageHelper } from 'app/core/language/language.helper';
 import { AccountService } from 'app/core/auth/account.service';
-import { ChangeDetectorRef, DebugElement } from '@angular/core';
+import { DebugElement } from '@angular/core';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { BehaviorSubject, Subject, of, throwError } from 'rxjs';
 import { ArtemisTestModule } from '../../test.module';
@@ -116,7 +116,6 @@ describe('CodeEditorInstructorIntegration', () => {
             ],
             providers: [
                 JhiLanguageHelper,
-                ChangeDetectorRef,
                 { provide: Router, useClass: MockRouter },
                 { provide: AccountService, useClass: MockAccountService },
                 { provide: ActivatedRoute, useClass: MockActivatedRouteWithSubjects },

From 2a19411aa5635947d7ab5d87563ce45fe0fe95bd Mon Sep 17 00:00:00 2001
From: Johannes Wiest <Johannes.wiest@outlook.com>
Date: Tue, 8 Oct 2024 14:11:43 +0200
Subject: [PATCH 19/24] add track expression & add fix more
 programming-exercise-instruction.component.spec.ts

---
 .../programming-exercise-instruction-step-wizard.component.html | 2 +-
 .../programming-exercise-instruction.component.spec.ts          | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/main/webapp/app/exercises/programming/shared/instructions-render/step-wizard/programming-exercise-instruction-step-wizard.component.html b/src/main/webapp/app/exercises/programming/shared/instructions-render/step-wizard/programming-exercise-instruction-step-wizard.component.html
index eaf81d0a62f8..3ac4387efbfc 100644
--- a/src/main/webapp/app/exercises/programming/shared/instructions-render/step-wizard/programming-exercise-instruction-step-wizard.component.html
+++ b/src/main/webapp/app/exercises/programming/shared/instructions-render/step-wizard/programming-exercise-instruction-step-wizard.component.html
@@ -2,7 +2,7 @@
     <div class="stepwizard">
         <div class="stepwizard-title" jhiTranslate="artemisApp.programmingExercise.problemStatement.tasksOfExercise"></div>
         <div class="stepwizard-row">
-            @for (step of steps; track step; let i = $index) {
+            @for (step of steps; let i = $index; track i) {
                 <div class="stepwizard-step">
                     <!--The css class test-passing removes the cursor icon and the hover effects from passing test circles-->
                     <div
diff --git a/src/test/javascript/spec/component/programming-exercise/programming-exercise-instruction.component.spec.ts b/src/test/javascript/spec/component/programming-exercise/programming-exercise-instruction.component.spec.ts
index 897ed506f126..4a2e2192fd59 100644
--- a/src/test/javascript/spec/component/programming-exercise/programming-exercise-instruction.component.spec.ts
+++ b/src/test/javascript/spec/component/programming-exercise/programming-exercise-instruction.component.spec.ts
@@ -366,7 +366,6 @@ describe('ProgrammingExerciseInstructionComponent', () => {
 
         expect(debugElement.query(By.css('.stepwizard'))).not.toBeNull();
         expect(debugElement.queryAll(By.css('.btn-circle'))).toHaveLength(2);
-        fixture.detectChanges();
         tick();
         fixture.detectChanges();
 

From c333b95847936405302ac1cd6cec87e22d39a8be Mon Sep 17 00:00:00 2001
From: "Felix T.J. Dietrich" <felix_dietrich@gmx.de>
Date: Thu, 7 Nov 2024 15:06:05 +0100
Subject: [PATCH 20/24] fix tests

---
 .../webapp/app/lti/lti13-exercise-launch.component.ts |  2 +-
 .../app/shared/monaco-editor/monaco-editor.service.ts |  7 -------
 ...programming-exercise-instruction.component.spec.ts | 11 +++++++----
 3 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/main/webapp/app/lti/lti13-exercise-launch.component.ts b/src/main/webapp/app/lti/lti13-exercise-launch.component.ts
index 2c939e994279..28605d6620e6 100644
--- a/src/main/webapp/app/lti/lti13-exercise-launch.component.ts
+++ b/src/main/webapp/app/lti/lti13-exercise-launch.component.ts
@@ -147,7 +147,7 @@ export class Lti13ExerciseLaunchComponent implements OnInit {
 
     replaceWindowLocationWrapper(url: string): void {
         this.ltiService.setShownViaLti(true);
-        this.themeService.applyThemeExplicitly(Theme.LIGHT);
+        this.themeService.applyThemePreference(Theme.LIGHT);
         const path = new URL(url).pathname;
 
         this.router.navigate([path], { replaceUrl: true });
diff --git a/src/main/webapp/app/shared/monaco-editor/monaco-editor.service.ts b/src/main/webapp/app/shared/monaco-editor/monaco-editor.service.ts
index 5e624c647da5..05d9220eaafc 100644
--- a/src/main/webapp/app/shared/monaco-editor/monaco-editor.service.ts
+++ b/src/main/webapp/app/shared/monaco-editor/monaco-editor.service.ts
@@ -13,9 +13,6 @@ import { MONACO_DARK_THEME_DEFINITION } from 'app/shared/monaco-editor/model/the
  */
 @Injectable({ providedIn: 'root' })
 export class MonacoEditorService {
-    static readonly LIGHT_THEME_ID = 'vs';
-    static readonly DARK_THEME_ID = 'vs-dark';
-
     private readonly themeService: ThemeService = inject(ThemeService);
     private readonly currentTheme = this.themeService.currentTheme;
 
@@ -42,10 +39,6 @@ export class MonacoEditorService {
         monaco.languages.register({ id: CUSTOM_MARKDOWN_LANGUAGE_ID });
         monaco.languages.setLanguageConfiguration(CUSTOM_MARKDOWN_LANGUAGE_ID, CUSTOM_MARKDOWN_CONFIG);
         monaco.languages.setMonarchTokensProvider(CUSTOM_MARKDOWN_LANGUAGE_ID, CUSTOM_MARKDOWN_LANGUAGE);
-
-        effect(() => {
-            this.applyTheme(this.currentTheme());
-        });
     }
 
     /**
diff --git a/src/test/javascript/spec/component/programming-exercise/programming-exercise-instruction.component.spec.ts b/src/test/javascript/spec/component/programming-exercise/programming-exercise-instruction.component.spec.ts
index 4a2e2192fd59..c54a48ecbad7 100644
--- a/src/test/javascript/spec/component/programming-exercise/programming-exercise-instruction.component.spec.ts
+++ b/src/test/javascript/spec/component/programming-exercise/programming-exercise-instruction.component.spec.ts
@@ -157,7 +157,8 @@ describe('ProgrammingExerciseInstructionComponent', () => {
         expect(comp.problemStatement).toBeUndefined();
         expect(loadInitialResultStub).not.toHaveBeenCalled();
         expect(comp.latestResult).toBeUndefined();
-        expect(updateMarkdownStub).not.toHaveBeenCalled();
+        // Fist call is because of effect() within toObservable
+        expect(updateMarkdownStub).not.toHaveBeenCalledTimes(2);
         expect(noInstructionsAvailableSpy).toHaveBeenCalledOnce();
         expect(comp.isInitial).toBeFalse();
         expect(comp.isLoading).toBeFalse();
@@ -189,7 +190,8 @@ describe('ProgrammingExerciseInstructionComponent', () => {
             currentValue: { ...comp.exercise, problemStatement: newProblemStatement },
             firstChange: false,
         });
-        expect(updateMarkdownStub).toHaveBeenCalledOnce();
+        // Fist call is because of effect() within toObservable
+        expect(updateMarkdownStub).toHaveBeenCalledTimes(2);
         expect(loadInitialResult).not.toHaveBeenCalled();
     });
 
@@ -212,7 +214,8 @@ describe('ProgrammingExerciseInstructionComponent', () => {
         triggerChanges(comp, { property: 'exercise', currentValue: { ...comp.exercise, problemStatement: newProblemStatement }, firstChange: false });
         fixture.detectChanges();
         expect(comp.markdownExtensions).toHaveLength(2);
-        expect(updateMarkdownStub).toHaveBeenCalledOnce();
+        // Fist call is because of effect() within toObservable
+        expect(updateMarkdownStub).toHaveBeenCalledTimes(2);
         expect(loadInitialResult).not.toHaveBeenCalled();
     });
 
@@ -241,7 +244,7 @@ describe('ProgrammingExerciseInstructionComponent', () => {
         expect(getLatestResultWithFeedbacks).toHaveBeenCalledOnce();
         // result should have been fetched with the submission as this is required to show details for it
         expect(getLatestResultWithFeedbacks).toHaveBeenCalledWith(participation.id, true);
-        expect(updateMarkdownStub).toHaveBeenCalledOnce();
+        expect(updateMarkdownStub).toHaveBeenCalledTimes(2);
         expect(comp.isInitial).toBeFalse();
         expect(comp.isLoading).toBeFalse();
     });

From e5add94eac906e519dd9aa83b71a60f82c550f02 Mon Sep 17 00:00:00 2001
From: "Felix T.J. Dietrich" <felix_dietrich@gmx.de>
Date: Fri, 8 Nov 2024 13:23:17 +0100
Subject: [PATCH 21/24] fix programming exercise instructions component

---
 .../programming-exercise-instruction.component.ts  |  4 +++-
 ...gramming-exercise-instruction.component.spec.ts | 14 +++++++-------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/main/webapp/app/exercises/programming/shared/instructions-render/programming-exercise-instruction.component.ts b/src/main/webapp/app/exercises/programming/shared/instructions-render/programming-exercise-instruction.component.ts
index 89a410dd707a..d53b738b3ff1 100644
--- a/src/main/webapp/app/exercises/programming/shared/instructions-render/programming-exercise-instruction.component.ts
+++ b/src/main/webapp/app/exercises/programming/shared/instructions-render/programming-exercise-instruction.component.ts
@@ -90,7 +90,9 @@ export class ProgrammingExerciseInstructionComponent implements OnChanges, OnDes
     private generateHtmlSubscription: Subscription;
     private testCases?: ProgrammingExerciseTestCase[];
     private themeChangeSubscription = toObservable(this.themeService.currentTheme).subscribe(() => {
-        this.updateMarkdown();
+        if (!this.isInitial) {
+            this.updateMarkdown();
+        }
     });
 
     // Icons
diff --git a/src/test/javascript/spec/component/programming-exercise/programming-exercise-instruction.component.spec.ts b/src/test/javascript/spec/component/programming-exercise/programming-exercise-instruction.component.spec.ts
index c54a48ecbad7..d0233fde1827 100644
--- a/src/test/javascript/spec/component/programming-exercise/programming-exercise-instruction.component.spec.ts
+++ b/src/test/javascript/spec/component/programming-exercise/programming-exercise-instruction.component.spec.ts
@@ -157,8 +157,7 @@ describe('ProgrammingExerciseInstructionComponent', () => {
         expect(comp.problemStatement).toBeUndefined();
         expect(loadInitialResultStub).not.toHaveBeenCalled();
         expect(comp.latestResult).toBeUndefined();
-        // Fist call is because of effect() within toObservable
-        expect(updateMarkdownStub).not.toHaveBeenCalledTimes(2);
+        expect(updateMarkdownStub).not.toHaveBeenCalled();
         expect(noInstructionsAvailableSpy).toHaveBeenCalledOnce();
         expect(comp.isInitial).toBeFalse();
         expect(comp.isLoading).toBeFalse();
@@ -190,8 +189,7 @@ describe('ProgrammingExerciseInstructionComponent', () => {
             currentValue: { ...comp.exercise, problemStatement: newProblemStatement },
             firstChange: false,
         });
-        // Fist call is because of effect() within toObservable
-        expect(updateMarkdownStub).toHaveBeenCalledTimes(2);
+        expect(updateMarkdownStub).toHaveBeenCalledOnce();
         expect(loadInitialResult).not.toHaveBeenCalled();
     });
 
@@ -214,8 +212,7 @@ describe('ProgrammingExerciseInstructionComponent', () => {
         triggerChanges(comp, { property: 'exercise', currentValue: { ...comp.exercise, problemStatement: newProblemStatement }, firstChange: false });
         fixture.detectChanges();
         expect(comp.markdownExtensions).toHaveLength(2);
-        // Fist call is because of effect() within toObservable
-        expect(updateMarkdownStub).toHaveBeenCalledTimes(2);
+        expect(updateMarkdownStub).toHaveBeenCalledOnce();
         expect(loadInitialResult).not.toHaveBeenCalled();
     });
 
@@ -244,7 +241,7 @@ describe('ProgrammingExerciseInstructionComponent', () => {
         expect(getLatestResultWithFeedbacks).toHaveBeenCalledOnce();
         // result should have been fetched with the submission as this is required to show details for it
         expect(getLatestResultWithFeedbacks).toHaveBeenCalledWith(participation.id, true);
-        expect(updateMarkdownStub).toHaveBeenCalledTimes(2);
+        expect(updateMarkdownStub).toHaveBeenCalledOnce();
         expect(comp.isInitial).toBeFalse();
         expect(comp.isLoading).toBeFalse();
     });
@@ -450,10 +447,13 @@ describe('ProgrammingExerciseInstructionComponent', () => {
 
     it('should update the markdown on a theme change', () => {
         const updateMarkdownStub = jest.spyOn(comp, 'updateMarkdown');
+
+        comp.isInitial = false;
         themeService.applyThemePreference(Theme.DARK);
 
         fixture.detectChanges();
 
+        // toObservable triggers a effect in the background on initial detectChanges
         expect(updateMarkdownStub).toHaveBeenCalledOnce();
     });
 

From c4cd5fa9084a2dea0f16371e5e03efa324d44e78 Mon Sep 17 00:00:00 2001
From: "Felix T.J. Dietrich" <felix_dietrich@gmx.de>
Date: Fri, 8 Nov 2024 13:30:20 +0100
Subject: [PATCH 22/24] fix translation

---
 src/main/webapp/app/core/theme/theme-switch.component.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/main/webapp/app/core/theme/theme-switch.component.ts b/src/main/webapp/app/core/theme/theme-switch.component.ts
index b0856be1e77f..7911e3237e32 100644
--- a/src/main/webapp/app/core/theme/theme-switch.component.ts
+++ b/src/main/webapp/app/core/theme/theme-switch.component.ts
@@ -1,11 +1,11 @@
 import { ChangeDetectionStrategy, Component, OnInit, computed, inject, input, viewChild } from '@angular/core';
-import { TranslateModule } from '@ngx-translate/core';
 import { NgbModule, NgbPopover } from '@ng-bootstrap/ng-bootstrap';
 import { PlacementArray } from '@ng-bootstrap/ng-bootstrap/util/positioning';
 import { Theme, ThemeService } from 'app/core/theme/theme.service';
 import { fromEvent } from 'rxjs';
 import { faSync } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { TranslateDirective } from 'app/shared/language/translate.directive';
 
 /**
  * Displays a sun or a moon in the navbar, depending on the current theme.
@@ -16,7 +16,7 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
     selector: 'jhi-theme-switch',
     templateUrl: './theme-switch.component.html',
     styleUrls: ['theme-switch.component.scss'],
-    imports: [TranslateModule, NgbModule, FontAwesomeModule],
+    imports: [TranslateDirective, NgbModule, FontAwesomeModule],
     changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
 })

From e697bb5650225c577cd1ba98b3a46b3048ee51e1 Mon Sep 17 00:00:00 2001
From: "Felix T.J. Dietrich" <felix_dietrich@gmx.de>
Date: Fri, 8 Nov 2024 15:05:54 +0100
Subject: [PATCH 23/24] fix modules?

---
 src/main/webapp/app/core/theme/theme-switch.component.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/main/webapp/app/core/theme/theme-switch.component.ts b/src/main/webapp/app/core/theme/theme-switch.component.ts
index 7911e3237e32..2108bd3a0fb6 100644
--- a/src/main/webapp/app/core/theme/theme-switch.component.ts
+++ b/src/main/webapp/app/core/theme/theme-switch.component.ts
@@ -1,11 +1,13 @@
 import { ChangeDetectionStrategy, Component, OnInit, computed, inject, input, viewChild } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ArtemisSharedModule } from 'app/shared/shared.module';
+import { TranslateModule } from '@ngx-translate/core';
 import { NgbModule, NgbPopover } from '@ng-bootstrap/ng-bootstrap';
 import { PlacementArray } from '@ng-bootstrap/ng-bootstrap/util/positioning';
 import { Theme, ThemeService } from 'app/core/theme/theme.service';
 import { fromEvent } from 'rxjs';
 import { faSync } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { TranslateDirective } from 'app/shared/language/translate.directive';
 
 /**
  * Displays a sun or a moon in the navbar, depending on the current theme.
@@ -16,7 +18,7 @@ import { TranslateDirective } from 'app/shared/language/translate.directive';
     selector: 'jhi-theme-switch',
     templateUrl: './theme-switch.component.html',
     styleUrls: ['theme-switch.component.scss'],
-    imports: [TranslateDirective, NgbModule, FontAwesomeModule],
+    imports: [TranslateModule, CommonModule, ArtemisSharedModule, NgbModule, FontAwesomeModule],
     changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
 })

From 2d4f970570d69d8428c5b166ed9b8da394ae76d4 Mon Sep 17 00:00:00 2001
From: "Felix T.J. Dietrich" <felix_dietrich@gmx.de>
Date: Wed, 13 Nov 2024 12:01:18 +0100
Subject: [PATCH 24/24] fix failing tests

---
 .../spec/component/shared/navbar.component.spec.ts        | 4 ++++
 .../javascript/spec/helpers/mocks/mock-instance.helper.ts | 8 ++++++++
 2 files changed, 12 insertions(+)

diff --git a/src/test/javascript/spec/component/shared/navbar.component.spec.ts b/src/test/javascript/spec/component/shared/navbar.component.spec.ts
index 342ccd3ef2a5..bc2e7cb37b92 100644
--- a/src/test/javascript/spec/component/shared/navbar.component.spec.ts
+++ b/src/test/javascript/spec/component/shared/navbar.component.spec.ts
@@ -40,6 +40,7 @@ import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { GuidedTourService } from 'app/guided-tour/guided-tour.service';
 import { ThemeSwitchComponent } from 'app/core/theme/theme-switch.component';
+import { mockThemeSwitcherComponentViewChildren } from '../../helpers/mocks/mock-instance.helper';
 
 class MockBreadcrumb {
     label: string;
@@ -92,6 +93,9 @@ describe('NavbarComponent', () => {
         activeProfiles: ['test'],
     } as ProfileInfo;
 
+    // Workaround for an error with MockComponent(). You can remove this once https://github.com/help-me-mom/ng-mocks/issues/8634 is resolved.
+    mockThemeSwitcherComponentViewChildren();
+
     beforeEach(() => {
         return TestBed.configureTestingModule({
             imports: [NgbTooltipMocksModule, NgbCollapseMocksModule, NgbDropdownMocksModule],
diff --git a/src/test/javascript/spec/helpers/mocks/mock-instance.helper.ts b/src/test/javascript/spec/helpers/mocks/mock-instance.helper.ts
index 8f7c213e5f6b..b84969f15363 100644
--- a/src/test/javascript/spec/helpers/mocks/mock-instance.helper.ts
+++ b/src/test/javascript/spec/helpers/mocks/mock-instance.helper.ts
@@ -1,6 +1,7 @@
 import { MockInstance } from 'ng-mocks';
 import { CodeEditorMonacoComponent } from 'app/exercises/programming/shared/code-editor/monaco/code-editor-monaco.component';
 import { signal } from '@angular/core';
+import { ThemeSwitchComponent } from 'app/core/theme/theme-switch.component';
 
 /*
  * This file contains mock instances for the tests where they would otherwise fail due to the use of a signal-based viewChild or contentChild with MockComponent(SomeComponent).
@@ -19,3 +20,10 @@ export function mockCodeEditorMonacoViewChildren() {
         inlineFeedbackSuggestionComponents: signal<any[]>([]),
     }));
 }
+
+export function mockThemeSwitcherComponentViewChildren() {
+    MockInstance.scope('case');
+    MockInstance(ThemeSwitchComponent, () => ({
+        popover: signal<any>({}),
+    }));
+}