Ghosting colors for loading videos is now customizable in an internal config, allowing dark mode to have different colors for the ghosting

src/app/components/recent-videos/recent-videos.component.html

@@ -37,7 +37,7 @@
             </ng-container>
             <ng-container *ngIf="!normal_files_received && loading_files && loading_files.length > 0">
                 <div *ngFor="let file of loading_files; let i = index" class="mb-2 mt-2" [ngClass]="[ postsService.card_size === 'small' ? 'col-2 small-col' : '', postsService.card_size === 'medium' ? 'col-6 col-lg-4 medium-col' : '', postsService.card_size === 'large' ? 'col-12 large-col' : '' ]">
-                    <app-unified-file-card [index]="i" [card_size]="postsService.card_size" [file_obj]="null" [loading]="true"></app-unified-file-card>
+                    <app-unified-file-card [index]="i" [card_size]="postsService.card_size" [loading]="true" [theme]="postsService.theme"></app-unified-file-card>
                 </div>
             </ng-container>
         </div>

src/app/components/unified-file-card/unified-file-card.component.html

@@ -1,6 +1,6 @@
 <div (mouseover)="elevated=true" (mouseout)="elevated=false" style="position: relative; width: fit-content;">
     <div *ngIf="!loading" class="download-time"><mat-icon class="audio-video-icon">{{(file_obj.type === 'audio' || file_obj.isAudio) ? 'audiotrack' : 'movie'}}</mat-icon>&nbsp;&nbsp;{{file_obj.registered | date:'shortDate'}}</div>
-    <div *ngIf="loading" class="download-time" style="width: 75%; margin-top: 5px;"><content-loader width="250" height="30"><svg:rect x="0" y="0" rx="3" ry="3" width="250" height="30" /></content-loader></div>
+    <div *ngIf="loading" class="download-time" style="width: 75%; margin-top: 5px;"><content-loader [primaryColor]="theme.ghost_primary" [secondaryColor]="theme.ghost_secondary" width="250" height="30"><svg:rect x="0" y="0" rx="3" ry="3" width="250" height="30" /></content-loader></div>
     <button [disabled]="loading" [matMenuTriggerFor]="action_menu" class="menuButton" mat-icon-button><mat-icon>more_vert</mat-icon></button>
     <mat-menu #action_menu="matMenu">
         <ng-container *ngIf="!is_playlist && !loading">
@@ -38,11 +38,11 @@
             </div>
 
             <div *ngIf="loading" class="img-div">
-                <content-loader width="100" height="55"><svg:rect x="0" y="0" rx="0" ry="0" width="100" height="55" /></content-loader>
+                <content-loader [primaryColor]="theme.ghost_primary" [secondaryColor]="theme.ghost_secondary" width="100" height="55"><svg:rect x="0" y="0" rx="0" ry="0" width="100" height="55" /></content-loader>
             </div>
 
             <span *ngIf="!loading" [ngClass]="{'max-two-lines': card_size !== 'small', 'max-one-line': card_size === 'small' }">{{card_size === 'large' && file_obj.uploader ? file_obj.uploader + ' - ' : ''}}<strong>{{!is_playlist ? file_obj.title : file_obj.name}}</strong></span>
-            <span *ngIf="loading" class="title-loading"><content-loader width="250" height="30"><svg:rect x="0" y="0" rx="3" ry="3" width="250" height="30" /></content-loader></span>
+            <span *ngIf="loading" class="title-loading"><content-loader [primaryColor]="theme.ghost_primary" [secondaryColor]="theme.ghost_secondary" width="250" height="30"><svg:rect x="0" y="0" rx="3" ry="3" width="250" height="30" /></content-loader></span>
         </div>
     </mat-card>
 </div>

src/app/components/unified-file-card/unified-file-card.component.ts

@@ -17,6 +17,7 @@ export class UnifiedFileCardComponent implements OnInit {
   elevated = false;
 
   @Input() loading = true;
+  @Input() theme = null;
   @Input() file_obj = null;
   @Input() card_size = 'medium';
   @Input() use_youtubedl_archive = false;

src/themes.ts

@@ -3,6 +3,8 @@ const THEMES_CONFIG = {
         'key': 'default',
         'background_color': 'ghostwhite',
         'alternate_color': 'gray',
+        'ghost_primary': '#f9f9f9',
+        'ghost_secondary': '#ecebeb',
         'css_label': 'default-theme',
         'social_theme': 'material-light'
     },
@@ -10,12 +12,16 @@ const THEMES_CONFIG = {
         'key': 'dark',
         'background_color': '#141414',
         'alternate_color': '#695959',
+        'ghost_primary': '#444444',
+        'ghost_secondary': '#141414',
         'css_label': 'dark-theme',
         'social_theme': 'material-dark'
     },
     'light': {
         'key': 'light',
         'background_color': 'white',
+        'ghost_primary': '#f9f9f9',
+        'ghost_secondary': '#ecebeb',
         'css_label': 'light-theme',
         'social_theme': 'material-light'
     }