Custom Theme Support (#1077)

* Started the migration to bootstrap 5. Introduced a breakpoint system that bootstrap reflects for our screens.

* sr only migrated

* mr/ml -> me/ms

* pl/pr -> ps/pe

* btn-block

* removed input-group-append

* Added form-label to all labels

* Added some style overrides for inputs

* Replaced form-group with mb-3

* Ignore journal files

* Update media to d-flex/flex-grow-1

* Fixed reading list detail page

* For develop builds, don't inline critical styles

* Fixed some downstream security issues

* Fixed a layout issue in series detail

* Fixed issue with btn-light not having background color. Updated layout for series detail metadata

* Cleaned up nav search

* Laid out the organization for custom theme components. Update _inputs.scss with variable overrides and depending on theme, it will just work.

* Lots of theming work

* Added inputs to the theme page

* Login and input placeholder changes

- Fixed login screen centering issue on all devices
- Changed the format of the login screen
- Change the input placeholder color

* Added checkbox styles

* Refactored tagbadges and removed some ngdeep selectors

* Added nav bar component and refactored some styles into event widget

* Cleaned nav events again and made dedicated popover body

* Finished pagination component

* Fixed up some styles with buttons

* refactored dropdown component

* Update accordion component

* Refactored breadcrumbs and rating star. Fixed a missing style for cards

* Fixed some styling issues on person badge, added modal component, and some global styles

* Finished moving everything within dark to component files

* Fixed up filter buttons, move card styles into a component theme, fixed slider style

* Refactored library card and grouped typeahead

* Updated normal typeahead component and reduced amount of ngdeep selector

* Refactored grid breakpoints to be available by css variable, but it's hardcoded into the app

* Ensure breakpoints are defined per theme

* Fixed up some styling overrides and customization for nav links and alt button

* Removed some deep styles, moved css out of splash container and brough back labels for login page

* Finished css variable refactor

* Refactored all the theme variable definitions into files for each theme.

* Added back bootstrap overrides

* Added a note about bootstrap theme colors being not-possible to swap out at runtime

* Cleaned up some dead code

* Implemented the ability to set a custom theme on the site. Cleaned up misc code throughout.

* Additional changes

- Fixed nav where "kavita" was not hiding correctly on small viewports
- Fixed search bar to make the behavior more consistent
- Fixed accordion buttons
- Changed accordion buttons to be more responsive
- Added radio button colors
- Fixed radios on theme test page
- Changed login and reset password card layouts to be more consistent.
- Added primary color shade for when darker shading is needed.

* Built a basic site, allow the user to apply different themes, refactored nav service code out.

* Implemented the ability update a user's theme

* Added unit tests for Scan and Get Content in SiteThemeService.

* Fixed a bug in the login code and Pref code which wasn't joining on SiteTheme table. Wrote Unit tests and the UI component to manage current theme.

* Implemented scan so that it manages custom themes with unit tests

* Component updates

- Repositioning style ordering
- Adding indicator override
- Adding select styles

* SignlaR integration, some fixes when creating custom entities, one single migration. Just login functionality left.

* More ui updated

- Added .no-hover to prevent hover on elements where not needed
- Changed all selects I could find to appropriate class
- Changed up nav tabs to work more like bootstrap tabs than pills
- Added padding to top of some containers to make styles consistent
- Added ability to change navbar fontawesome icon colors
- removed some unecessary inline styling
- Changed radio button to appropriate class
- Toned down primate color, a bit too bright for dark theme.
- Added ability to change button fontawesome icon color

* nav-tab fix for series-detail

* Added themes folder to gitignore

* Adding card overlay

* Fixing up light theme

* Everything is done. Only bug is that color-scheme isn't being set properly from css variable.

* Checkboxes have pointer by default. Confirm/Confirm email use default (dark) theme by default

* Fixed an error where color-scheme wasn't reflecting correctly on themes on first load

* Fixed user preferences not available on login

* Changing dual radios to switches and color tweaks

* disabled primary APCA fix

* button APCA fixes

* Fixed some timing issues with first load and image service

* Fixed swiper issues from upgrade

* Changed themes to be scss files again and adjusted Seed code

* Migrated carousel to css variables. Fixed a broken animation for search.

* Cleaned up some backend smells

* Fixed white border outline on nav tabs, added some variables for header

* Nav bar has been css variable-ified

* Added some basic eink stuff to make the app useable

Co-authored-by: Robbie Davis <robbie@therobbiedavis.com>

UI/Web/src/app/_services/account.service.ts

@@ -7,6 +7,7 @@ import { Preferences } from '../_models/preferences/preferences';
 import { User } from '../_models/user';
 import { Router } from '@angular/router';
 import { MessageHubService } from './message-hub.service';
+import { ThemeService } from '../theme.service';
 
 @Injectable({
   providedIn: 'root'
@@ -33,7 +34,7 @@ export class AccountService implements OnDestroy {
   private readonly onDestroy = new Subject<void>();
 
   constructor(private httpClient: HttpClient, private router: Router, 
-    private messageHub: MessageHubService) {}
+    private messageHub: MessageHubService, private themeService: ThemeService) {}
   
   ngOnDestroy(): void {
     this.onDestroy.next();
@@ -61,6 +62,7 @@ export class AccountService implements OnDestroy {
       map((response: User) => {
         const user = response;
         if (user) {
+          console.log('Login: ', user);
           this.setCurrentUser(user);
           this.messageHub.createHubConnection(user, this.hasAdminRole(user));
         }
@@ -77,6 +79,11 @@ export class AccountService implements OnDestroy {
 
       localStorage.setItem(this.userKey, JSON.stringify(user));
       localStorage.setItem(this.lastLoginKey, user.username);
+      if (user.preferences) {
+        this.themeService.setTheme(user.preferences.theme.name);
+      } else {
+        this.themeService.setTheme(this.themeService.defaultTheme);
+      }
     }
 
     this.currentUserSource.next(user);

UI/Web/src/app/_services/image.service.ts

@@ -1,7 +1,9 @@
-import { Injectable, OnDestroy } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { Inject, Injectable, OnDestroy } from '@angular/core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { environment } from 'src/environments/environment';
+import { ThemeService } from '../theme.service';
 import { RecentlyAddedItem } from '../_models/recently-added-item';
 import { AccountService } from './account.service';
 import { NavService } from './nav.service';
@@ -19,9 +21,9 @@ export class ImageService implements OnDestroy {
 
   private onDestroy: Subject<void> = new Subject();
 
-  constructor(private navSerivce: NavService, private accountService: AccountService) {
-    this.navSerivce.darkMode$.subscribe(res => {
-      if (res) {
+  constructor(private accountService: AccountService, private themeService: ThemeService) {
+    this.themeService.currentTheme$.pipe(takeUntil(this.onDestroy)).subscribe(theme => {
+      if (this.themeService.isDarkTheme()) {
         this.placeholderImage = 'assets/images/image-placeholder.dark-min.png';
         this.errorImage = 'assets/images/error-placeholder2.dark-min.png';
       } else {

UI/Web/src/app/_services/message-hub.service.ts

@@ -1,15 +1,13 @@
 import { EventEmitter, Injectable } from '@angular/core';
 import { Router } from '@angular/router';
 import { HubConnection, HubConnectionBuilder } from '@microsoft/signalr';
-import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { ToastrService } from 'ngx-toastr';
 import { BehaviorSubject, ReplaySubject } from 'rxjs';
 import { environment } from 'src/environments/environment';
-import { UpdateNotificationModalComponent } from '../shared/update-notification/update-notification-modal.component';
-import { RefreshMetadataEvent } from '../_models/events/refresh-metadata-event';
 import { ProgressEvent } from '../_models/events/scan-library-progress-event';
 import { ScanSeriesEvent } from '../_models/events/scan-series-event';
 import { SeriesAddedEvent } from '../_models/events/series-added-event';
+import { SiteThemeProgressEvent } from '../_models/events/site-theme-progress-event';
 import { User } from '../_models/user';
 
 export enum EVENTS {
@@ -25,6 +23,10 @@ export enum EVENTS {
   BackupDatabaseProgress = 'BackupDatabaseProgress',
   CleanupProgress = 'CleanupProgress',
   DownloadProgress = 'DownloadProgress',
+  /**
+   * A custom user site theme is added or removed during a scan
+   */
+  SiteThemeProgress = 'SiteThemeProgress',
   /**
    * A cover is updated
    */
@@ -122,6 +124,13 @@ export class MessageHubService {
       });
     });
 
+    this.hubConnection.on(EVENTS.SiteThemeProgress, resp => {
+      this.messagesSource.next({
+        event: EVENTS.SiteThemeProgress,
+        payload: resp.body as SiteThemeProgressEvent
+      });
+    });
+
     this.hubConnection.on(EVENTS.SeriesAddedToCollection, resp => {
       this.messagesSource.next({
         event: EVENTS.SeriesAddedToCollection,

UI/Web/src/app/_services/nav.service.ts

@@ -1,4 +1,4 @@
-import { Injectable, Renderer2, RendererFactory2 } from '@angular/core';
+import { Injectable } from '@angular/core';
 import { ReplaySubject } from 'rxjs';
 
 @Injectable({
@@ -9,14 +9,7 @@ export class NavService {
   private navbarVisibleSource = new ReplaySubject<boolean>(1);
   navbarVisible$ = this.navbarVisibleSource.asObservable();
 
-  private darkMode: boolean = true;
-  private darkModeSource = new ReplaySubject<boolean>(1);
-  darkMode$ = this.darkModeSource.asObservable();
-
-  private renderer: Renderer2;
-
-  constructor(rendererFactory: RendererFactory2) {
-    this.renderer = rendererFactory.createRenderer(null, null);
+  constructor() {
     this.showNavBar();
   }
 
@@ -27,26 +20,4 @@ export class NavService {
   hideNavBar() {
     this.navbarVisibleSource.next(false);
   }
-
-  toggleDarkMode() {
-    this.darkMode = !this.darkMode;
-    this.updateColorScheme();
-    this.darkModeSource.next(this.darkMode);
-  }
-
-  setDarkMode(mode: boolean) {
-    this.darkMode = mode;
-    this.updateColorScheme();
-    this.darkModeSource.next(this.darkMode);
-  }
-
-  private updateColorScheme() {
-    if (this.darkMode) {
-      this.renderer.setStyle(document.querySelector('html'), 'color-scheme', 'dark');
-    } else {
-      this.renderer.setStyle(document.querySelector('html'), 'color-scheme', 'light');
-    }
-  }
-
-
 }