Merge pull request #4 from irohalab/fix-sidebar-contrast-ratio

adjust sidebar contrast ratio in dark theme

Author: EverettSummer

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mira-ui",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

src/app/home/my-bangumi/my-bangumi.component.ts

@@ -1,4 +1,4 @@
-import { Component, HostListener, OnDestroy, OnInit } from '@angular/core';
+import { Component, HostBinding, HostListener, OnDestroy, OnInit } from '@angular/core';
 import { BehaviorSubject, merge, Subscription } from 'rxjs';
 import { filter, mergeMap } from 'rxjs/operators';
 import { closest } from '../../../helpers/dom';
@@ -8,6 +8,7 @@ import { WatchProgress } from '../../entity/watch-progress';
 import { VideoPlayerService } from '../../video-player/video-player.service';
 import { FavoriteManagerService } from '../favorite-manager.service';
 import { HomeService } from '../home.service';
+import { DARK_THEME, DarkThemeService } from '@irohalab/deneb-ui';
 
 @Component({
     selector: 'my-bangumi',
@@ -22,12 +23,16 @@ export class MyBangumiComponent implements OnInit, OnDestroy {
 
     favoriteLabel = FAVORITE_LABEL;
 
+    @HostBinding('class.dark-theme')
+    isDarkTheme: boolean;
+
     get currentStatus(): number {
         return this._statusSubject.getValue();
     }
 
     constructor(private _homeService: HomeService,
                 private _favoriteManager: FavoriteManagerService,
+                private _darkThemeService: DarkThemeService,
                 private _videoPlayerService: VideoPlayerService) {
         this.myBangumiList = [];
     }
@@ -46,6 +51,10 @@ export class MyBangumiComponent implements OnInit, OnDestroy {
     }
 
     ngOnInit(): void {
+        this._subscription.add(
+            this._darkThemeService.themeChange
+                .subscribe(theme => {this.isDarkTheme = theme === DARK_THEME;})
+        );
         this._subscription.add(
             this._videoPlayerService.onWatchStatusChanges
                 .pipe(filter(episode => {

src/app/home/my-bangumi/my-bangumi.less

@@ -1,6 +1,31 @@
+@headerColor: #2185d0;
+@itemColor: #696969;
+@emptyPlaceHolderColor: #4c4c4c;
+@labelUndecoratedColor: #999999;
+
 :host {
   display: block;
   box-sizing: border-box;
+  &.dark-theme {
+    .header {
+      color: lighten(@headerColor, 20%);
+    }
+    .menu.favorite-list {
+      > .item.favorite-item {
+        > .bangumi-name {
+          color: lighten(@itemColor, 35%);
+        }
+      }
+      > .ui.label {
+        &.undecorated {
+          color: lighten(@labelUndecoratedColor, 20%);
+        }
+      }
+    }
+    .empty-placeholder {
+      color: lighten(@emptyPlaceHolderColor, 40%);
+    }
+  }
 }
 
 .status-picker {
@@ -14,7 +39,7 @@
   font-size: 0.9rem;
   font-weight: 700;
   line-height: 2;
-  color: #2185d0;
+  color: @headerColor;
 }
 
 .menu.favorite-list {
@@ -27,7 +52,7 @@
     > .bangumi-name {
       display: inline-block;
       width: 9em;
-      color: #696969;
+      color: @itemColor;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;