[新增] 增加一套深色皮肤 (#906)

Author: hpyou

src/app/app.module.ts

@@ -9,6 +9,7 @@ import {AppComponent} from './app.component';
 import {AjaxInterceptor} from './app.interceptor';
 import {DemoListComponent} from "./demo-list.component";
 import {routerConfig} from "./router-config";
+//import {JigsawTheme} from "../jigsaw/core/theming/theme";
 
 {
     (<any[]>routerConfig).push(
@@ -36,4 +37,7 @@ import {routerConfig} from "./router-config";
     bootstrap: [AppComponent]
 })
 export class AppModule {
+    constructor() {
+        //JigsawTheme.majorStyle = 'dark';
+    }
 }

src/app/live-demo-wrapper.css

@@ -12,6 +12,7 @@
 .live-demo-wrap h2 {
     margin-bottom: 40px;
     color: #333;
+    /*color: #fff;*/
     font-size: 24px;
     font-weight: 700;
 }
@@ -42,6 +43,7 @@
 .live-demo h3 {
     margin: 0 0 10px -10px;
     color: #333;
+    /*color: #ccc;*/
     font-size: 16px;
     padding: 2px 14px;
     position: relative;
@@ -66,6 +68,7 @@
 .live-demo p.comment {
     margin-bottom: 10px;
     color: #666;
+    /*color: #ccc;*/
     font-size: 14px;
 }
 
@@ -84,6 +87,7 @@
 .live-demo p.message span {
     margin: 0 4px;
     color: #666;
+    /*color: #ccc;*/
 }
 
 /* toggle */

src/jigsaw/component/alert/alert.scss

@@ -8,7 +8,7 @@ $alert-prefix-cls: #{$jigsaw-prefix}-alert;
 }
 
 .#{$alert-prefix-cls} {
-    background: $default-color;
+    background: $component-background;
     border-radius: 4px;
     position: relative;
     padding: 0 10px 10px;

src/jigsaw/component/block/block.scss

@@ -15,7 +15,7 @@ $block-prefix-cls: #{$jigsaw-prefix}-block;
         bottom: 0;
         width: 100%;
         height: 100%;
-        background: #000;
+        background: #000 !important;
         opacity: 0.4;
     }
 }

src/jigsaw/component/button/button.scss

@@ -17,7 +17,7 @@ $btn-prefix-cls: #{$jigsaw-prefix}-button;
     font-weight: $btn-font-weight;
     user-select: none;
     @include prefixer(transition, all .3s $ease-in-out);
-    background-color: #fff;
+    background-color: $component-background;
     border: 1px solid $border-color-base;
     color: $text-color;
     &:before {

src/jigsaw/component/checkbox/checkbox.scss

@@ -46,7 +46,7 @@ $checkbox-prefix-cls: #{$jigsaw-prefix}-checkbox;
         overflow: hidden;
         border: $border-width-base $border-style-base $border-color-base;
         border-radius: $border-radius-sm;
-        background-color: #fff;
+        background-color: $component-background;
         transition: all .3s;
 
         &:after {

src/jigsaw/component/dialog/dialog.scss

@@ -25,7 +25,6 @@ $dialog-prefix-cls: #{$jigsaw-prefix}-dialog;
 
 .#{$dialog-prefix-cls} {
     position: relative;
-    background: $default-color;
     border: 1px solid $border-color-base;
     border-radius: $border-radius-base;
     &-head {
@@ -34,7 +33,7 @@ $dialog-prefix-cls: #{$jigsaw-prefix}-dialog;
         padding: 14px 16px;
         color: $heading-color;
         font-size: 14px;
-        background: $default-color;
+        background: $component-background;
         border-bottom: 1px solid $border-color-base;
         cursor: move;
         [jigsaw-title] {
@@ -52,7 +51,12 @@ $dialog-prefix-cls: #{$jigsaw-prefix}-dialog;
         }
     }
 
+    &-content {
+        background: $component-background;
+    }
+
     &-button-group {
+        background: $component-background;
         border-top: 1px solid $border-color-base;
         text-align: center;
         height: 50px;

src/jigsaw/component/graph/graph.ts

@@ -8,6 +8,8 @@ import {CallbackRemoval, CommonUtils} from "../../core/utils/common-utils";
 import {AbstractJigsawComponent} from "../common";
 import {EchartOptions} from "../../core/data/echart-types";
 import {VMAX_GRAPH_THEME} from "./vmax-theme";
+import {VMAX_GRAPH_THEME_DARK} from './vmax-theme-dark';
+import {JigsawTheme} from "../../core/theming/theme";
 
 @Component({
     selector: 'jigsaw-graph, j-graph',
@@ -78,7 +80,7 @@ export class JigsawGraph extends AbstractJigsawComponent implements OnInit, OnDe
         }
     }
 
-    private _globalTheme: any = VMAX_GRAPH_THEME;
+    private _globalTheme: any = JigsawTheme.majorStyle == 'light' ? VMAX_GRAPH_THEME : JigsawTheme.majorStyle == 'dark' ? VMAX_GRAPH_THEME_DARK : VMAX_GRAPH_THEME;
 
     @Input()
     public get globalTheme() {
@@ -87,11 +89,8 @@ export class JigsawGraph extends AbstractJigsawComponent implements OnInit, OnDe
 
     public set globalTheme(value) {
         if (!value) return;
+        value = value == 'light' ? VMAX_GRAPH_THEME : value == 'dark' ? VMAX_GRAPH_THEME_DARK : value;
         this._globalTheme = value;
-        if (this._graph) {
-            this._graph._theme = value;
-            this.data.refresh();
-        }
     }
 
     constructor(private _elementRef: ElementRef, private _renderer: Renderer2, private _zone: NgZone) {
@@ -165,7 +164,7 @@ export class JigsawGraph extends AbstractJigsawComponent implements OnInit, OnDe
         this._zone.runOutsideAngular(() => {
             // echarts的Animation对象里的_startLoop方法有个递归调用requestAnimationFrame,会触发变更检查，见#289
             this._graph = echarts.init(this._graphContainer);
-            this._graph._theme = VMAX_GRAPH_THEME;
+            this._graph._theme = this.globalTheme;
         });
         this._listenWindowResize();
         if (this.data) {