support dark mode and add custom card component

src/app/charts/chart-item/chart-item.component.scss

@@ -1,13 +1,27 @@
-.item {
-    cursor: pointer;
-    padding: 3px 7px 3px 7px;
-    border-radius: 4px;
-}
+@mixin chart-item-theme($theme) {
+    .item {
+        cursor: pointer;
+        padding: 3px 7px 3px 7px;
+        border-radius: 4px;
+    }
 
-.selected {
-    background-color: #DDDDDD;
-}
-.selected a {
-    color: #000000;
-    text-decoration: none;
+    .selected {
+        background-color: #DDDDDD;
+        color: #303030;
+    }
+    .selected a {
+        color: #000000;
+        text-decoration: none;
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .selected {
+            background-color: map_get($mat-grey, 900);
+            color: white;
+        }
+
+        .selected a {
+            color: white;
+        }
+    }
 }

src/app/charts/chart/chart.component.html

@@ -1,6 +1,6 @@
-<div class="{{elevation}} tui-card">
-    <div class="tui-card-title">{{title | uppercase}}</div>
-    <div class="tui-card-content">
+<app-card>
+    <app-card-title>{{title | uppercase}}</app-card-title>
+    <app-card-content>
         <div fxLayout="row" fxLayoutAlign="space-between stretch">
             <app-donut-chart [elementID]="chartID" fxFlex="30" [title]="title" (stateEvent)="onItemSelect($event)">
             </app-donut-chart>
@@ -10,5 +10,5 @@
                 </app-chart-item>
             </div>
         </div>
-    </div>
-</div>
+    </app-card-content>
+</app-card>

src/app/charts/chart/chart.component.ts

@@ -1,6 +1,5 @@
 import { Component, OnInit, ViewChild, Input } from '@angular/core';
 import Folder from '../../folder'
-import { cardElevation } from '../../style'
 import { FolderService } from 'src/app/services/folder.service';
 import { DonutChartComponent } from '../donut-chart/donut-chart.component';
 import { DeviceService } from 'src/app/services/device.service';
@@ -27,7 +26,6 @@ export class ChartComponent implements OnInit {
   title: string;
   chartID: string;
   states: ChartItemState[] = [];
-  elevation: string = cardElevation;
 
   private service: any;
   private activeChartState: ChartItemState;