feat(reader): add dark/light mode toggle and improved close button to PDF reader (#2699)

booklore-ui/src/app/features/readers/pdf-reader/pdf-reader.component.html

@@ -10,6 +10,7 @@
     [textLayer]="true"
     [showHandToolButton]="true"
     [height]="'auto'"
+    [theme]="isDarkTheme ? 'dark' : 'light'"
     [page]="page"
     [rotation]="rotation"
     [zoom]="zoom"
@@ -29,17 +30,7 @@
         <pdf-paging-area></pdf-paging-area>
       </div>
       <pdf-zoom-toolbar></pdf-zoom-toolbar>
-      <div id="toolbarViewerRight">
-        <pdf-shy-button
-          [cssClass]="'lg' | responsiveCSSClass"
-          class="newTab"
-          title="Close PDF Reader"
-          primaryToolbarId="closePdfReaderButton"
-          [action]="closeReader"
-          [order]="5"
-          image="<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='orange' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-circle-x-icon lucide-circle-x'><circle cx='12' cy='12' r='10'/><path d='m15 9-6 6'/><path d='m9 9 6 6'/></svg>"
-        >
-        </pdf-shy-button>
+      <div id="toolbarViewerRight" [class.pdf-dark]="isDarkTheme">
         <pdf-hand-tool></pdf-hand-tool>
         <pdf-select-tool></pdf-select-tool>
         <pdf-rotate-page></pdf-rotate-page>
@@ -55,6 +46,23 @@
         <pdf-book-mode></pdf-book-mode>
         <div class="verticalToolbarSeparator hiddenSmallView"></div>
         <pdf-toggle-secondary-toolbar></pdf-toggle-secondary-toolbar>
+        <div class="verticalToolbarSeparator"></div>
+        <button class="toolbar-btn" [title]="isDarkTheme ? 'Switch to Light Mode' : 'Switch to Dark Mode'" (click)="isDarkTheme = !isDarkTheme">
+          @if (isDarkTheme) {
+            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/>
+            </svg>
+          } @else {
+            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>
+            </svg>
+          }
+        </button>
+        <button id="closePdfReaderButton" class="close-reader-btn" title="Close PDF Reader" (click)="closeReader()">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M18 6 6 18"/><path d="m6 6 12 12"/>
+          </svg>
+        </button>
       </div>
     </div>
   </ng-template>

booklore-ui/src/app/features/readers/pdf-reader/pdf-reader.component.scss

@@ -4,4 +4,43 @@
   align-items: center;
   height: 100vh;
   position: relative;
+  background: #1a1a1a;
+}
+
+::ng-deep .toolbar-btn,
+::ng-deep .close-reader-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: #2a2a2a;
+  cursor: pointer;
+  margin-left: 4px;
+  margin-right: 2px;
+  transition: background-color 0.2s ease, color 0.2s ease;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.1);
+  }
+
+  svg {
+    flex-shrink: 0;
+  }
+}
+
+::ng-deep .pdf-dark .toolbar-btn,
+::ng-deep .pdf-dark .close-reader-btn {
+  color: #e8e8e8;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.15);
+  }
+}
+
+::ng-deep .close-reader-btn:hover {
+  color: #ff6b6b;
 }

booklore-ui/src/app/features/readers/pdf-reader/pdf-reader.component.ts

@@ -23,6 +23,7 @@ import {Location} from '@angular/common';
 export class PdfReaderComponent implements OnInit, OnDestroy {
   isLoading = true;
   totalPages: number = 0;
+  isDarkTheme = true;
 
   rotation: 0 | 90 | 180 | 270 = 0;