diff --git a/src/app/app.component.html b/src/app/app.component.html index 5336e2431..e69d4fe3b 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -17,22 +17,11 @@ Angular version
{{ angularVersion.full }}
- - -
-
-
- -
-
-
- - + diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 7dedf91ae..7a87cbfc9 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -15,9 +15,6 @@ bottom: 0; } } -:host { - color: #282B2F; -} .app-container { height: 100%; .demo { diff --git a/src/app/app.component.ts b/src/app/app.component.ts index a2f721d04..f43747421 100644 --- a/src/app/app.component.ts +++ b/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); } } diff --git a/src/app/components/shadow-demo/shadow-demo-01/shadow-demo-01.component.html b/src/app/components/shadow-demo/shadow-demo-01/shadow-demo-01.component.html index 0951036e9..01f71d2bb 100644 --- a/src/app/components/shadow-demo/shadow-demo-01/shadow-demo-01.component.html +++ b/src/app/components/shadow-demo/shadow-demo-01/shadow-demo-01.component.html @@ -5,6 +5,6 @@ elevation: 4

Elevations

-
+
elevation: {{ elevation }}
diff --git a/src/app/demo-view/view/view.component.html b/src/app/demo-view/view/view.component.html index 48a8241d6..17854619f 100644 --- a/src/app/demo-view/view/view.component.html +++ b/src/app/demo-view/view/view.component.html @@ -1,5 +1,5 @@ -
- +
+ {{ viewLabel }}
diff --git a/src/assets/svg/theme/moon.svg b/src/assets/svg/theme/moon.svg new file mode 100644 index 000000000..e8a4504c5 --- /dev/null +++ b/src/assets/svg/theme/moon.svg @@ -0,0 +1,5 @@ + + +moon + + diff --git a/src/assets/svg/theme/sun.svg b/src/assets/svg/theme/sun.svg new file mode 100644 index 000000000..312df30da --- /dev/null +++ b/src/assets/svg/theme/sun.svg @@ -0,0 +1,5 @@ + + +sun + + diff --git a/src/lib/core/src/default-theme.ts b/src/lib/core/src/default-theme.ts index 23fb111bc..331bfa7db 100644 --- a/src/lib/core/src/default-theme.ts +++ b/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)' diff --git a/src/lib/core/src/root.service.ts b/src/lib/core/src/root.service.ts index e39690ab9..b8012456b 100644 --- a/src/lib/core/src/root.service.ts +++ b/src/lib/core/src/root.service.ts @@ -36,4 +36,8 @@ export class LyRootService { }; } + getTheme(name: string) { + return this.themes.get(name); + } + } diff --git a/src/lib/core/src/theme.service.ts b/src/lib/core/src/theme.service.ts index 03f202ab8..092a8efa7 100644 --- a/src/lib/core/src/theme.service.ts +++ b/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 diff --git a/src/lib/core/src/theme/bg-color-and-raised.directive.ts b/src/lib/core/src/theme/bg-color-and-raised.directive.ts index 2731ecd5e..590bc5cd2 100644 --- a/src/lib/core/src/theme/bg-color-and-raised.directive.ts +++ b/src/lib/core/src/theme/bg-color-and-raised.directive.ts @@ -5,6 +5,7 @@ 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]' @@ -12,32 +13,30 @@ import { PALETTE, ThemeVariables } from '../alyle-config-service'; 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; @@ -45,6 +44,7 @@ export class LyBgColorAndRaised implements OnChanges { 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; } diff --git a/src/lib/core/src/theme/raised.directive.ts b/src/lib/core/src/theme/raised.directive.ts index 5e3a39546..514fe59b3 100644 --- a/src/lib/core/src/theme/raised.directive.ts +++ b/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( diff --git a/src/lib/core/src/theme/shadow.service.ts b/src/lib/core/src/theme/shadow.service.ts index a4b0e67ba..0e97abf8d 100644 --- a/src/lib/core/src/theme/shadow.service.ts +++ b/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); diff --git a/src/theme.css b/src/theme.css index beddec40a..4946518d8 100644 --- a/src/theme.css +++ b/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;