support dark mode and add custom card component

src/app/card/card.component.scss

@@ -0,0 +1,36 @@
+// Import theming functions
+@import '~@angular/material/theming';
+
+@mixin tui-card-theme($theme) {
+    // Extract the palettes you need from the theme definition.
+    $primary: map-get($theme, primary);
+    $accent: map-get($theme, accent);
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    .tui-card {
+        background-color: white;
+        border-radius: 4px;
+        height: 100%;
+    }
+
+    .tui-card-title {
+        padding: 16px 16px 0 16px;
+        font-size: mat-font-size($tech-ui-typography, subheading-2);
+        color: mat-color($primary);
+    }
+
+    .tui-card-content {
+        padding: 16px;
+    }
+
+    .tui-button-toggle .mat-button-toggle-appearance-standard .mat-button-toggle-label-content  {
+        line-height: 34px;
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .tui-card {
+            background-color: map_get($mat-grey, 800);
+        }
+    }
+}

src/app/card/card.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CardComponent } from './card.component';
+
+describe('CardComponent', () => {
+  let component: CardComponent;
+  let fixture: ComponentFixture<CardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CardComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/card/card.component.ts

@@ -0,0 +1,35 @@
+import { Component, OnInit } from '@angular/core';
+import { cardElevation } from '../style';
+
+@Component({
+  selector: 'app-card',
+  template: '<div class="{{elevation}} tui-card"><ng-content></ng-content></div>',
+  styleUrls: ['./card.component.scss']
+})
+export class CardComponent implements OnInit {
+  elevation: string = cardElevation;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
+
+@Component({
+  selector: 'app-card-title',
+  template: '<div class="tui-card-title"><ng-content></ng-content></div>',
+  styleUrls: ['./card.component.scss']
+})
+export class CardTitleComponent {
+  constructor() { }
+}
+
+@Component({
+  selector: 'app-card-content',
+  template: '<div class="tui-card-content"><ng-content></ng-content></div>',
+  styleUrls: ['./card.component.scss']
+})
+export class CardContentComponent {
+  constructor() { }
+}