Dark mode progress

src/app/components/browse/browse.component.ts

@@ -19,6 +19,7 @@ export class BrowseComponent implements AfterViewInit {
 
   ngAfterViewInit() {
     const $tableColumn = $('#table-column')
+    // TODO: on new search, scroll to the top
     $tableColumn.on('scroll', () => {
       let pos = $tableColumn[0].scrollTop + $tableColumn[0].offsetHeight
       let max = $tableColumn[0].scrollHeight

src/app/components/settings/settings.component.html

@@ -7,7 +7,7 @@
         type="text" placeholder="No directory selected!">
       <button *ngIf="settingsService.libraryDirectory != undefined" (click)="openLibraryDirectory()"
         class="ui button">Open Folder</button>
-      <button (click)="getLibraryDirectory()" class="ui button teal">Choose</button>
+      <button (click)="getLibraryDirectory()" class="ui button positive">Choose</button>
     </div>
   </div>
 </div>
@@ -39,10 +39,9 @@
 <div #themeDropdown class="ui selection dropdown mr">
   <input type="hidden" name="sort" [value]="settingsService.theme">
   <i class="dropdown icon"></i>
-  <div class="default text">Default</div>
+  <div class="default text">{{settingsService.theme}}</div>
   <div class="menu">
-    <div class="item" [attr.data-value]="i" *ngFor="let theme of settingsService.builtinThemes; let i = index">{{theme}}
-    </div>
+    <div class="item" [attr.data-value]="i" *ngFor="let theme of settingsService.builtinThemes; let i = index">{{theme}}</div>
   </div>
 </div>
 

src/app/components/toolbar/toolbar.component.html

@@ -7,6 +7,6 @@
   <div class="right menu">
     <a class="item traffic-light" (click)="minimize()"><i class="minus icon"></i></a>
     <a class="item traffic-light" (click)="toggleMaximized()"><i class="icon window" [ngClass]="isMaximized ? 'restore' : 'maximize'"></i></a>
-    <a class="item traffic-light" (click)="close()"><i class="x icon"></i></a>
+    <a class="item traffic-light close" (click)="close()"><i class="x icon"></i></a>
   </div>
 </div>

src/app/components/toolbar/toolbar.component.scss

@@ -17,8 +17,8 @@
   i {
     margin: 0 !important;
   }
+}
 
-  &:last-child:hover {
-    background: rgba(255, 0, 0, .1) !important;
-  }
+.close:hover {
+  background: rgba(255, 0, 0, .15) !important;
 }

src/app/core/services/settings.service.ts

@@ -12,7 +12,11 @@ export class SettingsService {
   private currentThemeLink: HTMLLinkElement
 
   constructor(private electronService: ElectronService) {
-    this.getSettings()
+    this.getSettings().then(() => {
+      if (this.settings.theme != this.builtinThemes[0]) {
+        this.changeTheme(this.settings.theme)
+      }
+    })
   }
 
   async getSettings() {
@@ -28,7 +32,6 @@ export class SettingsService {
     }
   }
 
-  // TODO: research how to make theme changes with fomantic UI
   changeTheme(theme: string) {
     if (this.currentThemeLink != undefined) this.currentThemeLink.remove()
     if (theme == 'Default') { return }
@@ -36,7 +39,7 @@ export class SettingsService {
     const link = document.createElement('link')
     link.type = 'text/css'
     link.rel = 'stylesheet'
-    link.href = `assets/themes/${theme}.css`
+    link.href = `/assets/themes/${theme}.css`
     this.currentThemeLink = document.head.appendChild(link)
   }