Improving dark theme in the navigation bar #587 #642

src/common/config/public/ClientConfig.ts

@@ -508,9 +508,10 @@ export class ThemesConfig {
   @ConfigProperty({
     tags: {
       name: $localize`Enable`,
-      experimental: true
+      experimental: true,
+      githubIssue: 642
     } as TAGS,
-    description: $localize`Enable themes and color modes.`
+    description: $localize`Enable themes and color modes.  Experimental until bootstrap v5.3 is only alpha.`
   })
   enabled: boolean = false;
 
@@ -518,7 +519,6 @@ export class ThemesConfig {
     type: ThemeModes,
     tags: {
       name: $localize`Default theme mode`,
-      experimental: true,
       uiDisabled: (sb: ThemesConfig) => !sb.enabled,
     } as TAGS,
     description: $localize`Sets the default theme mode that is used for the application.`

src/frontend/app/ui/gallery/filter/filter.gallery.component.css

@@ -53,7 +53,7 @@
 
 .unselected {
   color: #6c757d;
-  background-color: #fff;
+  background-color: var(--bs-body-bg)
 }
 
 .date-filter-wrapper {
@@ -78,7 +78,7 @@
   left: 0;
   height: 7px;
   border-radius: 10px;
-  background-color: #CCC;
+  background-color: var(--bs-tertiary-color);
   margin: 0 7px;
 }
 
@@ -87,7 +87,7 @@
   right: 0;
   height: 7px;
   border-radius: 10px;
-  background-color: #CCC;
+  background-color: var(--bs-tertiary-color);
   margin: 0 7px;
 }
 

src/frontend/app/ui/gallery/navigator/navigator.gallery.component.html

@@ -28,7 +28,7 @@
 
       <ng-container *ngIf="config.Gallery.enableDownloadZip && isDirectory && ItemCount > 0">
         <a [href]="getDownloadZipLink()"
-           class="btn  btn-navbar">
+           class="btn">
          <span class="oi oi-data-transfer-download"
                title="download" i18n-title></span>
         </a>
@@ -38,14 +38,14 @@
       <ng-container *ngIf="config.Gallery.enableDirectoryFlattening && isDirectory && authService.canSearch()">
         <a
           [routerLink]="['/search', getDirectoryFlattenSearchQuery()]"
-          class="btn  btn-navbar">
+          class="btn">
          <span class="oi oi-fork"
                title="Flatten directory" i18n-title></span>
         </a>
         <div class="divider">&nbsp;</div>
       </ng-container>
       <ng-container *ngIf="ItemCount> 0">
-        <a class="btn  btn-navbar"
+        <a class="btn"
            [class.btn-secondary]="filterService.activeFilters.value.areFiltersActive"
            (click)="showFilters = ! showFilters">
          <span class="oi oi-spreadsheet"
@@ -55,8 +55,8 @@
       </ng-container>
       <div class="btn-group" dropdown #dropdown="bs-dropdown" placement="bottom right">
         <button id="button-alignment" dropdownToggle type="button"
-                class="btn btn-secondary dropdown-toggle"
-                [ngClass]="{'btn-secondary':sortingService.sorting.value !== DefaultSorting}"
+                class="btn dropdown-toggle"
+                [class.btn-secondary]="sortingService.sorting.value !== DefaultSorting"
                 aria-controls="sorting-dropdown"
                 [innerHTML]="sortingService.sorting.value | iconizeSorting">
         </button>

src/frontend/styles.css

@@ -31,3 +31,6 @@ bs-dropdown-container {
 element.style {
   width: 100px;
 }
+[data-bs-theme=dark] .btn:not(.btn-secondary):not(.btn-danger):not(.btn-warning):not(.btn-primary):not(.btn-success){
+  --bs-btn-color: var(--bs-body-color);
+}