Enable dark mode of Bootstrap

apps/client/src/app/components/admin-settings/admin-settings.component.html

@@ -3,7 +3,11 @@
     <div class="col">
       <h2 class="text-center" i18n>Data Providers</h2>
       @if (isGhostfolioApiKeyValid === false) {
-        <mat-card appearance="outlined" class="my-3 special">
+        <mat-card
+          appearance="outlined"
+          class="my-3 special"
+          data-bs-theme="light"
+        >
           <mat-card-header>
             <mat-card-title class="align-items-center d-flex m-0"
               >Ghostfolio Premium

libs/ui/src/lib/membership-card/membership-card.component.html

@@ -1,5 +1,9 @@
 <div class="card-wrapper position-relative" [class.hover-3d]="hover3d">
-  <div class="card-container" [class.premium]="name === 'Premium'">
+  <div
+    class="card-container"
+    [attr.data-bs-theme]="name === 'Premium' ? null : 'light'"
+    [class.premium]="name === 'Premium'"
+  >
     <a
       class="card-item d-flex flex-column justify-content-between p-4"
       [routerLink]="routerLinkPricing"