LP1740529 follow-up: release note and minor ng lint complaints

Signed-off-by: Jane Sandberg <[email protected]>

Open-ILS/src/eg2/src/app/staff/nav.component.html

@@ -862,15 +862,15 @@
     <div class="navbar-nav" [ngClass]="{'ms-auto': !user()}">
       <div ngbDropdown class="nav-item dropdown color-mode-toggle" display="dynamic">
         <button type="button" ngbDropdownToggle class="nav-link dropdown-toggle with-material-icon">
-          <ng-container *ngIf="colorMode == 'light'">
+          <ng-container *ngIf="colorMode === 'light'">
             <span class="material-icons" aria-hidden="true">light_mode</span>
             <span class="visually-hidden" i18n>Current color mode: Light</span>
           </ng-container>
-          <ng-container *ngIf="colorMode == 'dark'">
+          <ng-container *ngIf="colorMode === 'dark'">
             <span class="material-icons" aria-hidden="true">nightlight</span>
             <span class="visually-hidden" i18n>Current color mode: Dark</span>
           </ng-container>
-          <ng-container *ngIf="!colorMode || colorMode == 'auto'">
+          <ng-container *ngIf="!colorMode || colorMode === 'auto'">
             <span class="material-icons" aria-hidden="true">brightness_medium</span>
             <span class="visually-hidden" i18n>Current color mode: Auto</span>
           </ng-container>

Open-ILS/src/eg2/src/app/staff/nav.component.ts

@@ -97,10 +97,10 @@ export class StaffNavComponent implements OnInit, OnDestroy {
                 .then(settings => this.maxRecentPatrons =
                 settings['ui.staff.max_recent_patrons'] ?? 1);
 
-            const darkModePreference = window.matchMedia("(prefers-color-scheme: dark)");
+            const darkModePreference = window.matchMedia('(prefers-color-scheme: dark)');
             darkModePreference.addEventListener('change', () => {
                 // Don't change color mode while printing
-                if (!window.matchMedia("print").matches) {
+                if (!window.matchMedia('print').matches) {
                     this.setColorMode();
                 }
 
@@ -160,19 +160,19 @@ export class StaffNavComponent implements OnInit, OnDestroy {
 
     setColorMode() {
         if ('auto' === this.colorMode) {
-            document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'));
-        }
-        else {
+            document.documentElement.setAttribute('data-bs-theme',
+                (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+            );
+        } else {
             document.documentElement.setAttribute('data-bs-theme', this.colorMode);
         }
     }
-    
+
     changeColorMode(mode: any) {
         if ( 'light' === mode || 'dark' === mode || 'auto' === mode ) {
             this.colorMode = mode;
             this.store.setLocalItem('eg.ui.general.colormode', mode);
-        }
-        else {
+        } else {
             this.colorMode = 'auto';
             this.store.removeLocalItem('eg.ui.general.colormode');
         }

docs/RELEASE_NOTES_NEXT/Client/Dark_mode.adoc

@@ -0,0 +1,12 @@
+== Dark Mode ==
+
+The staff client now supports both light and dark modes.  By default, the staff client will
+use the color mode setting from your operating system.  That is to say, if you have turned on
+Dark Mode for your operating system, or if your operating system defaults to Dark Mode, the
+Evergreen staff client will now also display in Dark Mode. 
+
+If you'd like to use a different color mode in the staff client than your operating system
+setting, you can do so using the color mode selector in the navigation bar at the top of the
+staff client.  If you want to resume using your operating system's color mode, you can set
+the color mode selector to "Auto".
+