feat(config): add dark and light function

lib/ng-nest/ui/core/config/config.service.ts

@@ -3,7 +3,7 @@
 import { Injectable, Optional, Inject } from '@angular/core';
 import { Subject, Observable } from 'rxjs';
 import { XConfig, X_CONFIG, XConfigKey, XComponentConfigKey, XComponentConfig } from './config';
-import { XThemeService, XTheme } from '../theme';
+import { XThemeService, XTheme, X_THEME_COLORS, X_THEME_DARK_COLORS, XColorsTheme } from '../theme';
 import { filter, mapTo } from 'rxjs/operators';
 
 const isDefined = function (value?: any): boolean {
@@ -44,6 +44,22 @@ export class XConfigService {
     }
   }
 
+  setDarkTheme(theme?: XTheme) {
+    let colors = theme?.colors;
+    if (!colors) colors = X_THEME_DARK_COLORS;
+    this.setTheme({
+      colors: this.themeService.getDefineColors(Object.assign({}, this.themeService.getColorsInProperty(X_THEME_COLORS), colors), '', true)
+    });
+  }
+
+  setLightTheme(theme?: XTheme) {
+    let colors = theme?.colors;
+    if (!colors) colors = X_THEME_COLORS;
+    this.setTheme({
+      colors: this.themeService.getDefineColors(Object.assign({}, this.themeService.getColorsInProperty(X_THEME_COLORS), colors), '', false)
+    });
+  }
+
   setTheme(theme?: XTheme) {
     this.themeService.setTheme(theme);
   }
@@ -52,8 +68,8 @@ export class XConfigService {
     this.themeService.setInitialTheme(theme);
   }
 
-  getTheme(): XTheme {
-    return this.themeService.getTheme();
+  getTheme(includesAll = false): XTheme {
+    return this.themeService.getTheme(includesAll);
   }
 }
 

lib/ng-nest/ui/core/theme/theme.service.ts

@@ -1,36 +1,23 @@
 import { Injectable, Inject, RendererFactory2, Renderer2 } from '@angular/core';
-import { XTheme, XColorsTheme, X_THEME_COLORS, X_THEME_COLOR_KEYS } from './theme';
+import {
+  XTheme,
+  XColorsTheme,
+  X_THEME_COLORS,
+  X_THEME_COLOR_KEYS,
+  X_THEME_PREFIX,
+  X_THEME_AMOUNTS,
+  X_THEME_MERGE,
+  X_THEME_EXCHANGES,
+  X_THEME_BACKGROUNDS,
+  X_THEME_TEXTS,
+  X_THEME_BORDERS
+} from './theme';
 import { DOCUMENT } from '@angular/common';
 
 @Injectable({
   providedIn: 'root'
 })
 export class XThemeService {
-  private rootKey = '--x-';
-  private merge: string = '#ffffff';
-  private amounts: number[] = [0, -0.1, -0.2, -0.3, -0.4, -0.5, -0.6, -0.7, -0.8, -0.9, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9];
-  private backgrounds: number[] = [-0.2, -0.3, -0.4];
-  private texts: number[][] = [
-    [-0.5, 0],
-    [-0.6, 0.2],
-    [-0.7, 0.4]
-  ];
-  private borders: number[][] = [
-    [-0.8, 0],
-    [-0.9, 0.2]
-  ];
-  private exchanges: number[][] = [
-    [-0.1, -0.1],
-    [0.1, -0.1],
-    [0.2, 0.2],
-    [0.3, 0],
-    [0.4, -0.4],
-    [0.5, -0.2],
-    [0.6, 0],
-    [0.7, -0.4],
-    [0.8, -0.4],
-    [0.9, -0.2]
-  ];
   private colorsProp: XColorsTheme = {};
   private colorsStyleEle: HTMLStyleElement;
   private renderer2: Renderer2;
@@ -50,9 +37,9 @@ export class XThemeService {
     this.setColors(theme?.colors);
   }
 
-  getTheme(): XTheme {
+  getTheme(includesAll = false): XTheme {
     return {
-      colors: this.getColors()
+      colors: this.getColors(includesAll)
     };
   }
 
@@ -64,16 +51,17 @@ export class XThemeService {
     this.createColorsStyle();
   }
 
-  getColors(colors?: XColorsTheme, prefix = this.rootKey): XColorsTheme {
+  getColors(includes = false, prefix = X_THEME_PREFIX): XColorsTheme {
     let result: XColorsTheme = {};
-    Object.keys(this.colorsProp).forEach((x) => {
+    const keys = includes ? Object.keys(this.colorsProp) : X_THEME_COLOR_KEYS.map((x) => `${prefix}${x}`);
+    keys.forEach((x) => {
       result[x.replace(prefix, '')] = this.declaration.getPropertyValue(`${x}`).trim();
     });
 
     return result;
   }
 
-  getColorsInProperty(colors?: XColorsTheme, prefix = this.rootKey): XColorsTheme {
+  getColorsInProperty(colors?: XColorsTheme, prefix = X_THEME_PREFIX): XColorsTheme {
     let result: XColorsTheme = {};
     Object.keys(colors as XColorsTheme).forEach((x) => {
       result[x] = this.declaration.getPropertyValue(`${prefix}${x}`).trim();
@@ -88,14 +76,14 @@ export class XThemeService {
     return colors;
   }
 
-  setRoot(color: string, value: string, prefix = this.rootKey) {
+  setRoot(color: string, value: string, prefix = X_THEME_PREFIX) {
     let result: XColorsTheme = {};
     if (X_THEME_COLOR_KEYS.includes(color)) {
-      for (let amount of this.amounts) {
+      for (let amount of X_THEME_AMOUNTS) {
         if (amount === 0) {
           result[`${prefix}${color}`] = value;
         } else {
-          result[`${prefix}${color}${this.getSuffix(amount)}`] = toHex(mixColors(this.merge, value, amount));
+          result[`${prefix}${color}${this.getSuffix(amount)}`] = toHex(mixColors(X_THEME_MERGE, value, amount));
         }
       }
     } else {
@@ -104,12 +92,12 @@ export class XThemeService {
     return result;
   }
 
-  setDarkRoot(color: string, value: string, prefix = this.rootKey) {
+  setDarkRoot(color: string, value: string, prefix = X_THEME_PREFIX) {
     let result: XColorsTheme = {};
     const allColors = this.setRoot(color, value, '');
     if (X_THEME_COLOR_KEYS.includes(color) && !['background'].includes(color)) {
       const allColors = this.setRoot(color, value, prefix);
-      this.exchanges.forEach((x) => {
+      X_THEME_EXCHANGES.forEach((x) => {
         if (x[1] >= -0.1) {
           const curr = this.getSuffix(x[0]);
           const next = this.getSuffix(x[1]);
@@ -122,7 +110,7 @@ export class XThemeService {
     return result;
   }
 
-  getDefineColors(colors?: XColorsTheme, prefix = this.rootKey, darken = false): XColorsTheme {
+  getDefineColors(colors?: XColorsTheme, prefix = X_THEME_PREFIX, darken = false): XColorsTheme {
     let result: XColorsTheme = {};
     colors = this.getColorsTheme(colors);
     for (let key in colors) {
@@ -138,21 +126,21 @@ export class XThemeService {
           }
         }
       };
-      colorsFunc(this.backgrounds, (background: number, color: string) => {
+      colorsFunc(X_THEME_BACKGROUNDS, (background: number, color: string) => {
         const theme = this.getSuffix(background);
         result[`${prefix}${color}${theme}`] = result[`${prefix}background${theme.replace('a', '')}`];
       });
-      colorsFunc(this.texts, (text: number[], color: string) => {
+      colorsFunc(X_THEME_TEXTS, (text: number[], color: string) => {
         const curr = this.getSuffix(text[0]);
         const next = this.getSuffix(text[1]);
         result[`${prefix}${color}${curr}`] = result[`${prefix}text${next}`];
       });
-      colorsFunc(this.borders, (border: number[], color: string) => {
+      colorsFunc(X_THEME_BORDERS, (border: number[], color: string) => {
         const curr = this.getSuffix(border[0]);
         const next = this.getSuffix(border[1]);
         result[`${prefix}${color}${curr}`] = result[`${prefix}border${next}`];
       });
-      colorsFunc(this.exchanges, (exchange: number[], color: string) => {
+      colorsFunc(X_THEME_EXCHANGES, (exchange: number[], color: string) => {
         const curr = this.getSuffix(exchange[0]);
         const next = this.getSuffix(exchange[1]);
         result[`${prefix}${color}${curr}`] = result[`${prefix}${color}${next}`];

lib/ng-nest/ui/core/theme/theme.ts

@@ -22,6 +22,38 @@ export type XColors = 'primary' | 'success' | 'warning' | 'danger' | 'info';
 
 export const X_THEME = new InjectionToken<XTheme>('x-theme');
 
+export const X_THEME_PREFIX = '--x-';
+
+export const X_THEME_MERGE = '#ffffff';
+
+export const X_THEME_AMOUNTS = [0, -0.1, -0.2, -0.3, -0.4, -0.5, -0.6, -0.7, -0.8, -0.9, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9];
+
+export const X_THEME_BACKGROUNDS = [-0.2, -0.3, -0.4];
+
+export const X_THEME_TEXTS = [
+  [-0.5, 0],
+  [-0.6, 0.2],
+  [-0.7, 0.4]
+];
+
+export const X_THEME_BORDERS = [
+  [-0.8, 0],
+  [-0.9, 0.2]
+];
+
+export const X_THEME_EXCHANGES = [
+  [-0.1, -0.1],
+  [0.1, -0.1],
+  [0.2, 0.2],
+  [0.3, 0],
+  [0.4, -0.4],
+  [0.5, -0.2],
+  [0.6, 0],
+  [0.7, -0.4],
+  [0.8, -0.4],
+  [0.9, -0.2]
+];
+
 export const X_THEME_COLORS: XColorsTheme = {
   primary: '#1976d2',
   success: '#67c23a',
@@ -33,4 +65,10 @@ export const X_THEME_COLORS: XColorsTheme = {
   background: '#f6f6f6'
 };
 
+export const X_THEME_DARK_COLORS: XColorsTheme = {
+  text: '#d1d1d1',
+  border: '#474747',
+  background: '#0d0d0d'
+};
+
 export const X_THEME_COLOR_KEYS = Object.keys(X_THEME_COLORS);

lib/ng-nest/ui/doc/style/mixin.scss

@@ -8,7 +8,6 @@
   padding: 1.5rem;
   display: block;
   font-size: 0.875rem;
-  background: $--x-background;
   h1 {
     font-size: 1.5rem;
     font-weight: 500;

lib/ng-nest/ui/examples/style/mixin.scss

@@ -6,7 +6,6 @@
 
 @mixin examples {
   display: block;
-  background-color: $--x-background;
   border: $--x-border-base;
   .#{$prefix}-html,
   .#{$prefix}-code {

lib/ng-nest/ui/theme/theme.component.ts

@@ -1,6 +1,15 @@
 import { Component, OnInit, ViewEncapsulation, ChangeDetectionStrategy, ChangeDetectorRef, Optional } from '@angular/core';
 import { XThemeProperty } from './theme.property';
-import { XConfigService, XThemeService, XValueAccessor, XColorsTheme, XTheme, X_THEME_COLOR_KEYS, X_THEME_COLORS } from '@ng-nest/ui/core';
+import {
+  XConfigService,
+  XThemeService,
+  XValueAccessor,
+  XColorsTheme,
+  XTheme,
+  X_THEME_COLOR_KEYS,
+  X_THEME_COLORS,
+  X_THEME_DARK_COLORS
+} from '@ng-nest/ui/core';
 import { FormGroup } from '@angular/forms';
 import { XControl } from '@ng-nest/ui/form';
 import { debounceTime } from 'rxjs/operators';
@@ -23,11 +32,6 @@ export class XThemeComponent extends XThemeProperty implements OnInit {
   beforeColors: XColorsTheme = {};
   currentColors: XColorsTheme = {};
   darkBeforeColors: XColorsTheme = {};
-  darkColors = {
-    text: '#d1d1d1',
-    border: '#474747',
-    background: '#0d0d0d'
-  };
   controls: XControl[] = [
     { control: 'color-picker', id: 'primary', label: '主色', span: 5 },
     { control: 'color-picker', id: 'success', label: '成功', span: 5 },
@@ -57,7 +61,7 @@ export class XThemeComponent extends XThemeProperty implements OnInit {
     this.themeService = this.configService.themeService;
   }
   ngOnInit() {
-    this.theme = this.configService.getTheme();
+    this.theme = this.configService.getTheme(true);
     this.setControls();
     this.setDefaultColors();
     this.controls.map((x: XControl) => {
@@ -140,7 +144,7 @@ export class XThemeComponent extends XThemeProperty implements OnInit {
       this.beforeColors = this.formGroup.value;
       this.darkBeforeColors = this.formGroup.value;
       colors = this.themeService.getDefineColors(
-        Object.assign({}, this.themeService.getColorsInProperty(X_THEME_COLORS), this.darkColors),
+        Object.assign({}, this.themeService.getColorsInProperty(X_THEME_COLORS), X_THEME_DARK_COLORS),
         '',
         this.dark as boolean
       );