fix theme

src/app/app.component.html

@@ -17,22 +17,11 @@
       Angular version
       <div class="version">{{ angularVersion.full }}</div>
     </ly-toolbar-item>
-    <button ly-icon-button size="16px" *ngIf="!nav.sidenavState" [lyMenuTriggerFor]="ThemeMenu">
-      <ly-svg class="force-color" size="24px" src="assets/svg/Brush.svg"></ly-svg>
+    <button ly-icon-button size="24px" (click)="changeScheme()">
+      <ly-svg *ngIf="mode" class="force-color" size="40px" src="assets/svg/theme/sun"></ly-svg>
+      <ly-svg *ngIf="!mode" class="force-color" size="40px" src="assets/svg/theme/moon"></ly-svg>
     </button>
-    <ly-menu #ThemeMenu
-    [anchor-origin]="{horizontal: 'left', vertical: 'center'}"
-    [target-origin]="{horizontal: 'right', vertical: 'center'}">
-      <div class="content-menu" bg="main">
-        <div class="menu-item" lyRipple lyRippleSensitive color="colorText" *ngFor="let item of listColors" (click)="changePrimary(item)">
-          <div class="item-container">
-            <!-- <div ly-shadow [shadowColor]="palette[item.primary].default" [style.background]="palette[item.primary].default"></div>
-            <div ly-shadow [shadowColor]="palette[item.accent].default" [style.background]="palette[item.accent].default"></div> -->
-          </div>
-        </div>
-      </div>
-    </ly-menu>
-    <a ly-icon-button target="_blank" rel="noopener" href="https://github.com/A-l-y-l-e/Alyle-UI" size="16px" (click)="nav.toggle()" *ngIf="!nav.sidenavState">
+    <a ly-icon-button target="_blank" rel="noopener" href="https://github.com/A-l-y-l-e/Alyle-UI" size="24px" (click)="nav.toggle()">
         <ly-svg size="24px" src="assets/svg/social/social-color-1_logo-github.svg"></ly-svg>
       </a>
   </ly-toolbar>

src/app/app.component.scss

@@ -15,9 +15,6 @@
     bottom: 0;
   }
 }
-:host {
-  color: #282B2F;
-}
 .app-container {
   height: 100%;
   .demo {

src/app/app.component.ts

@@ -23,6 +23,7 @@ export class AppComponent {
   angularVersion = VERSION;
   version: string = AUI_VERSION;
   routeState = false;
+  mode = true;
   constructor(
     public router: Router,
     public route: ActivatedRoute,
@@ -67,7 +68,9 @@ export class AppComponent {
       }
     ];
   }
-  changePrimary(color: ThemeVariables) {
-    this.theme.setTheme(color);
+  changeScheme() {
+    this.mode = !this.mode;
+    const scheme = this.mode ? 'light' : 'dark';
+    this.theme.setScheme(scheme);
   }
 }

src/app/components/shadow-demo/shadow-demo-01/shadow-demo-01.component.html

@@ -5,6 +5,6 @@
   elevation: 4
 </div>
 <h2>Elevations</h2>
-<div raised [elevation]="elevation" class="box" *ngFor="let elevation of elevations">
+<div [newRaised]="[elevation]" class="box" *ngFor="let elevation of elevations">
   elevation: {{ elevation }}
 </div>

src/app/demo-view/view/view.component.html

@@ -1,5 +1,5 @@
-<div [newRaised]="[9, '#C0C0C0']" bg="background:paper">
-  <ly-toolbar *ngIf="viewLabel" ly-dense bg="#f0f0f0" [style.font-size.px]="16">
+<div [newRaised]="[9]" bg="background:paper">
+  <ly-toolbar *ngIf="viewLabel" ly-dense bg="bar" [style.font-size.px]="16">
     <ly-toolbar-item ly-toolbar-item-padding>{{ viewLabel }}</ly-toolbar-item>
   </ly-toolbar>
   <div class="code">

src/lib/core/src/default-theme.ts

@@ -51,6 +51,10 @@ export const defaultTheme: ThemeVariables = {
       },
     },
     dark: {
+      accent: {
+        default: '#9c27b0',
+        contrast
+      },
       /** Deprecated */
       colorText: '#fff',
       /** Deprecated */
@@ -74,7 +78,7 @@ export const defaultTheme: ThemeVariables = {
       },
       bar: '#212121',
       divider: 'rgba(255, 255, 255, 0.12)',
-      colorShadow: '#777777',
+      colorShadow: 'rgba(0, 0, 0, 1)',
       input: {
         label: 'rgba(255, 255, 255, 0.4)',
         underline: 'rgba(255, 255, 255, 0.11)'

src/lib/core/src/root.service.ts

@@ -36,4 +36,8 @@ export class LyRootService {
     };
   }
 
+  getTheme(name: string) {
+    return this.themes.get(name);
+  }
+
 }

src/lib/core/src/theme.service.ts

@@ -66,7 +66,12 @@ export class LyTheme {
     this.setCoreStyle();
   }
 
-  setTheme(config: ThemeVariables) { }
+  setScheme(scheme: string) {
+    const newPalette = this.rootService.getTheme(this.palette.name);
+    Object.assign(this.palette, newPalette, ...newPalette.colorSchemes[scheme], { scheme });
+    console.log(this.palette);
+    this.updateOthersStyles();
+  }
 
   /**
    * get color of `string` in palette

src/lib/core/src/theme/bg-color-and-raised.directive.ts

@@ -5,46 +5,46 @@ import { SkipSelf } from '@angular/core';
 import { toBoolean } from '../minimal';
 import { shadowBuilder } from '../shadow';
 import { PALETTE, ThemeVariables } from '../alyle-config-service';
+import { LyShadowService } from './shadow.service';
 
 @Directive({
   selector: '[bg], [color], [raised]'
 })
 export class LyBgColorAndRaised implements OnChanges {
   private _raisedState: boolean;
   private _currentStyleData: StyleData;
-  private _cssBg: string;
-  private _cssColor: string;
   private _bg: string;
   private _color: string;
   @Input()
   set bg(value: string) {
     this._bg = value;
-    this._cssBg = this.theme.colorOf(value);
+    // this._cssBg = this.theme.colorOf(value);
   }
   get bg() {
     return this._bg;
   }
-  get cssBg() {
-    return this._cssBg;
-  }
+  // get cssBg() {
+  //   return this._cssBg;
+  // }
   @Input()
   set color(value: string) {
     this._color = value;
-    this._cssColor = this.theme.colorOf(value);
+    // this._cssColor = this.theme.colorOf(value);
   }
   get color() {
     return this._color;
   }
-  get cssColor() {
-    return this._cssColor;
-  }
+  // get cssColor() {
+  //   return this._cssColor;
+  // }
   @Input() set raised(val: boolean) { this._raisedState = toBoolean(val); }
   get raised() { return this._raisedState; }
   @Input() elevation = 3;
   constructor(
     private theme: LyTheme,
     private renderer: Renderer2,
     private elementRef: ElementRef,
+    private shadow: LyShadowService,
     @Inject(PALETTE) private palette: ThemeVariables,
     @Inject(LY_GLOBAL_CONTRAST) @Optional() private contrast: boolean
   ) { }
@@ -69,7 +69,7 @@ export class LyBgColorAndRaised implements OnChanges {
 
       /** Create style */
       newStyleData = this.theme.createStyle(`ly-${key}`, () => {
-        const _color = this._cssBg || this.cssColor;
+        const _color = this.theme.colorOf(this.bg || this.color);
         let styles = `${changeKey[1]}:${_color};`;
         if (this._raisedState) {
           styles += shadowBuilder(this.elevation, _color);
@@ -91,18 +91,21 @@ export class LyBgColorAndRaised implements OnChanges {
     this._currentStyleData = newStyleData;
   }
   private contrastStyle() {
+    const cssBg = this.theme.colorOf(this.bg);
     this._color = this.theme.colorOf(`${this.bg}:contrast`);
-    let styles = `background:${this._cssBg};color:${this._color};`;
+    let styles = `background:${cssBg};color:${this._color};`;
     if (this._raisedState) {
-      styles += shadowBuilder(this.elevation, this._cssBg);
+      styles += shadowBuilder(this.elevation, cssBg);
     }
     return styles;
   }
 
   private bgColorStyle() {
-    let styles = `background:${this._cssBg};color:${this._cssColor};`;
+    const cssBg = this.theme.colorOf(this.bg);
+    const cssColor = this.theme.colorOf(this.color);
+    let styles = `background:${cssBg};color:${cssColor};`;
     if (this._raisedState) {
-      styles += shadowBuilder(this.elevation, this._cssBg);
+      styles += shadowBuilder(this.elevation, cssBg);
     }
     return styles;
   }

src/lib/core/src/theme/raised.directive.ts

@@ -67,7 +67,7 @@ export class LyNewRaised {
   /** Default raised  */
   @Input()
   set newRaised(value: [number, string]) {
-    this.currentStyleData = this.shadow.setShadow(this.elementRef, this.renderer, [ value[0] || this.elevation, value[1] || this.palette.colorShadow ], this.currentStyleData);
+    this.currentStyleData = this.shadow.setShadow(this.elementRef, this.renderer, [ value[0] || this.elevation, value[1] || 'colorShadow' ], this.currentStyleData);
   }
 
   constructor(

src/lib/core/src/theme/shadow.service.ts

@@ -19,14 +19,14 @@ export class LyShadowService {
     let elevation: number;
     let color = 'colorShadow';
     if (val) {
-      keys = val.join();
+      keys = val.join('');
       elevation = val[0];
       color = val[1] || color;
     } else {
-      keys = `${this.elevation}`;
+      keys = `${this.elevation}${color}`;
       elevation = this.elevation;
     }
-    const newStyleData = this.theme.createStyle(`ly-${keys}`, () => {
+    const newStyleData = this.theme.createStyle(`shadow${keys}`, () => {
       return `${shadowBuilder(elevation, this.theme.colorOf(color))}`;
     });
     this.theme.updateClass(elementRef, renderer, newStyleData, oldStyleData);

src/theme.css

@@ -14,7 +14,6 @@ pre[class*="language-"] {
 code[class*="language-"], pre[class*="language-"] {
   color: rgba(0, 23, 31, 0.7);
   background: none;
-  text-shadow: 0 1px white;
   font-family: 'Fira Code', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
   text-align: left;
   font-size: 13px;