From e3ef530c17d6517f1878f9035e611e56dd2ad3ca Mon Sep 17 00:00:00 2001
From: Nick Krantz <125900171+nick-livefront@users.noreply.github.com>
Date: Fri, 5 Sep 2025 12:11:35 -0500
Subject: [PATCH] add directive import for dark themed videos (#16277)

---
 .../setup-extension/add-extension-videos.component.spec.ts   | 5 +++++
 .../setup-extension/add-extension-videos.component.ts        | 3 ++-
 .../setup-extension/setup-extension.component.spec.ts        | 4 ++++
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/app/vault/components/setup-extension/add-extension-videos.component.spec.ts b/apps/web/src/app/vault/components/setup-extension/add-extension-videos.component.spec.ts
index b48f5e0ed2c..5664638827d 100644
--- a/apps/web/src/app/vault/components/setup-extension/add-extension-videos.component.spec.ts
+++ b/apps/web/src/app/vault/components/setup-extension/add-extension-videos.component.spec.ts
@@ -2,8 +2,11 @@ import { ComponentFixture, fakeAsync, TestBed, tick } from "@angular/core/testin
 import { By } from "@angular/platform-browser";
 import { provideNoopAnimations } from "@angular/platform-browser/animations";
 import { RouterModule } from "@angular/router";
+import { BehaviorSubject } from "rxjs";
 
+import { SYSTEM_THEME_OBSERVABLE } from "@bitwarden/angular/services/injection-tokens";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service";
 
 import { AddExtensionVideosComponent } from "./add-extension-videos.component";
 
@@ -36,6 +39,8 @@ describe("AddExtensionVideosComponent", () => {
       providers: [
         provideNoopAnimations(),
         { provide: I18nService, useValue: { t: (key: string) => key } },
+        { provide: SYSTEM_THEME_OBSERVABLE, useValue: new BehaviorSubject("system") },
+        { provide: ThemeStateService, useValue: { selectedTheme$: new BehaviorSubject("system") } },
       ],
     }).compileComponents();
 
diff --git a/apps/web/src/app/vault/components/setup-extension/add-extension-videos.component.ts b/apps/web/src/app/vault/components/setup-extension/add-extension-videos.component.ts
index 6bde812065b..c9c222e8e64 100644
--- a/apps/web/src/app/vault/components/setup-extension/add-extension-videos.component.ts
+++ b/apps/web/src/app/vault/components/setup-extension/add-extension-videos.component.ts
@@ -4,11 +4,12 @@ import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { debounceTime, fromEvent } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { DarkImageSourceDirective } from "@bitwarden/vault";
 
 @Component({
   selector: "vault-add-extension-videos",
   templateUrl: "./add-extension-videos.component.html",
-  imports: [CommonModule, JslibModule],
+  imports: [CommonModule, JslibModule, DarkImageSourceDirective],
 })
 export class AddExtensionVideosComponent {
   @ViewChildren("video", { read: ElementRef }) protected videoElements!: QueryList<
diff --git a/apps/web/src/app/vault/components/setup-extension/setup-extension.component.spec.ts b/apps/web/src/app/vault/components/setup-extension/setup-extension.component.spec.ts
index 43ffe8fe71c..3be8251b1d7 100644
--- a/apps/web/src/app/vault/components/setup-extension/setup-extension.component.spec.ts
+++ b/apps/web/src/app/vault/components/setup-extension/setup-extension.component.spec.ts
@@ -3,6 +3,7 @@ import { By } from "@angular/platform-browser";
 import { Router, RouterModule } from "@angular/router";
 import { BehaviorSubject } from "rxjs";
 
+import { SYSTEM_THEME_OBSERVABLE } from "@bitwarden/angular/services/injection-tokens";
 import { BrowserExtensionIcon } from "@bitwarden/assets/svg";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { DeviceType } from "@bitwarden/common/enums";
@@ -10,6 +11,7 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
 import { StateProvider } from "@bitwarden/common/platform/state";
+import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service";
 import { AnonLayoutWrapperDataService } from "@bitwarden/components";
 
 import { WebBrowserInteractionService } from "../../services/web-browser-interaction.service";
@@ -39,6 +41,8 @@ describe("SetupExtensionComponent", () => {
         { provide: I18nService, useValue: { t: (key: string) => key } },
         { provide: WebBrowserInteractionService, useValue: { extensionInstalled$, openExtension } },
         { provide: PlatformUtilsService, useValue: { getDevice: () => DeviceType.UnknownBrowser } },
+        { provide: SYSTEM_THEME_OBSERVABLE, useValue: new BehaviorSubject("system") },
+        { provide: ThemeStateService, useValue: { selectedTheme$: new BehaviorSubject("system") } },
         { provide: AnonLayoutWrapperDataService, useValue: { setAnonLayoutWrapperData } },
         {
           provide: AccountService,