From dc28ac668f7ec7a6800b2088bceb7b55876a871b Mon Sep 17 00:00:00 2001 From: Austen Stone Date: Wed, 24 Jan 2024 00:25:42 -0500 Subject: [PATCH] Update app.component.html, usage.component.html, theme.service.ts, and material.theme.scss --- src/app/app.component.html | 1 - src/app/app.component.ts | 415 +++++++++--------- src/app/components/usage/usage.component.html | 6 +- src/app/theme.service.ts | 15 + src/material.theme.scss | 60 +-- 5 files changed, 258 insertions(+), 239 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index 8dc1aac..2d6ec91 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -2,6 +2,5 @@ -

Github Usage Report

\ No newline at end of file diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 736f6fe..3958571 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -8,216 +8,217 @@ import DarkUnicaTheme from 'highcharts/themes/dark-unica.js'; ExportingModule(Highcharts); @Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.scss'], + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.scss'], }) export class AppComponent { - theme!: 'light-theme' | 'dark-theme'; - constructor ( - private themeService: ThemingService - ) { - } + theme!: 'light-theme' | 'dark-theme'; + options: Highcharts.Options = { + credits: { + enabled: false + }, + }; + constructor( + private themeService: ThemingService + ) { + } + + ngOnInit() { + this.options = { + colors: this.themeService.getColors(), + }; + this.themeService.getTheme().subscribe(theme => { + this.theme = theme; + if (theme === 'dark-theme') { + // DarkUnicaTheme(Highcharts); + Highcharts.setOptions({ + ...this.options, + chart: { + backgroundColor: 'transparent', + style: { + fontFamily: '\'Noto Sans\', sans-serif' + }, + plotBorderColor: '#606063' + }, + title: { + style: { + color: '#E0E0E3', + textTransform: 'uppercase', + fontSize: '20px' + } + }, + subtitle: { + style: { + color: '#E0E0E3', + textTransform: 'uppercase' + } + }, + xAxis: { + gridLineColor: '#707073', + labels: { + style: { + color: '#E0E0E3' + } + }, + lineColor: '#707073', + minorGridLineColor: '#505053', + tickColor: '#707073', + title: { + style: { + color: '#A0A0A3' + + } + } + }, + yAxis: { + gridLineColor: '#707073', + labels: { + style: { + color: '#E0E0E3' + } + }, + lineColor: '#707073', + minorGridLineColor: '#505053', + tickColor: '#707073', + tickWidth: 1, + title: { + style: { + color: '#A0A0A3' + } + } + }, + tooltip: { + backgroundColor: 'rgba(0, 0, 0, 0.85)', + style: { + color: '#F0F0F0' + } + }, + plotOptions: { + series: { + dataLabels: { + color: '#F0F0F3', + style: { + fontSize: '13px' + } + }, + marker: { + lineColor: '#333' + } + }, + boxplot: { + fillColor: '#505053' + }, + candlestick: { + lineColor: 'white' + }, + errorbar: { + color: 'white' + }, + bar: { + borderColor: '#424242' + }, + pie: { + borderColor: '#424242' + }, + }, + legend: { + backgroundColor: 'transparent', + itemStyle: { + color: '#E0E0E3' + }, + itemHoverStyle: { + color: '#FFF' + }, + itemHiddenStyle: { + color: '#606063' + }, + title: { + style: { + color: '#C0C0C0' + } + } + }, + drilldown: { + activeAxisLabelStyle: { + color: '#F0F0F3' + }, + activeDataLabelStyle: { + color: '#F0F0F3' + } + }, + navigation: { + buttonOptions: { + symbolStroke: '#DDDDDD', + theme: { + fill: '#505053' + } + } + }, + rangeSelector: { + buttonTheme: { + fill: '#505053', + stroke: '#000000', + style: { + color: '#CCC' + }, + states: { + hover: { + fill: '#707073', + stroke: '#000000', + style: { + color: 'white' + } + }, + select: { + fill: '#000003', + stroke: '#000000', + style: { + color: 'white' + } + } + } + }, + inputBoxBorderColor: '#505053', + inputStyle: { + backgroundColor: '#333', + color: 'silver' + }, + labelStyle: { + color: 'silver' + } + }, - ngOnInit() { - this.themeService.getTheme().subscribe(theme => { - this.theme = theme; - if (theme === 'dark-theme') { - // DarkUnicaTheme(Highcharts); - Highcharts.setOptions({ - // colors: [ - // '#2b908f', '#90ee7e', '#f45b5b', '#7798BF', '#aaeeee', '#ff0066', - // '#eeaaee', '#55BF3B', '#DF5353', '#7798BF', '#aaeeee' - // ], - chart: { - backgroundColor: 'transparent', - style: { - fontFamily: '\'Noto Sans\', sans-serif' - }, - plotBorderColor: '#606063' - }, - title: { - style: { - color: '#E0E0E3', - textTransform: 'uppercase', - fontSize: '20px' - } - }, - subtitle: { - style: { - color: '#E0E0E3', - textTransform: 'uppercase' - } - }, - xAxis: { - gridLineColor: '#707073', - labels: { - style: { - color: '#E0E0E3' - } - }, - lineColor: '#707073', - minorGridLineColor: '#505053', - tickColor: '#707073', - title: { - style: { - color: '#A0A0A3' - - } - } - }, - yAxis: { - gridLineColor: '#707073', - labels: { - style: { - color: '#E0E0E3' - } - }, - lineColor: '#707073', - minorGridLineColor: '#505053', - tickColor: '#707073', - tickWidth: 1, - title: { - style: { - color: '#A0A0A3' - } - } - }, - tooltip: { - backgroundColor: 'rgba(0, 0, 0, 0.85)', - style: { - color: '#F0F0F0' - } - }, - plotOptions: { - series: { - dataLabels: { - color: '#F0F0F3', - style: { - fontSize: '13px' - } - }, - marker: { - lineColor: '#333' - } - }, - boxplot: { - fillColor: '#505053' - }, - candlestick: { - lineColor: 'white' - }, - errorbar: { - color: 'white' - } - }, - legend: { - backgroundColor: 'transparent', - itemStyle: { - color: '#E0E0E3' - }, - itemHoverStyle: { - color: '#FFF' - }, - itemHiddenStyle: { - color: '#606063' - }, - title: { - style: { - color: '#C0C0C0' - } - } - }, - credits: { - style: { - color: '#666' - } - }, - - drilldown: { - activeAxisLabelStyle: { - color: '#F0F0F3' - }, - activeDataLabelStyle: { - color: '#F0F0F3' - } - }, - - navigation: { - buttonOptions: { - symbolStroke: '#DDDDDD', - theme: { - fill: '#505053' - } - } - }, - - // scroll charts - rangeSelector: { - buttonTheme: { - fill: '#505053', - stroke: '#000000', - style: { - color: '#CCC' - }, - states: { - hover: { - fill: '#707073', - stroke: '#000000', - style: { - color: 'white' - } - }, - select: { - fill: '#000003', - stroke: '#000000', - style: { - color: 'white' - } - } - } - }, - inputBoxBorderColor: '#505053', - inputStyle: { - backgroundColor: '#333', - color: 'silver' - }, - labelStyle: { - color: 'silver' - } - }, - - navigator: { - handles: { - backgroundColor: '#666', - borderColor: '#AAA' - }, - outlineColor: '#CCC', - maskFill: 'rgba(255,255,255,0.1)', - series: { - color: '#7798BF', - lineColor: '#A6C7ED' - }, - xAxis: { - gridLineColor: '#505053' - } - }, - - scrollbar: { - barBackgroundColor: '#808083', - barBorderColor: '#808083', - buttonArrowColor: '#CCC', - buttonBackgroundColor: '#606063', - buttonBorderColor: '#606063', - rifleColor: '#FFF', - trackBackgroundColor: '#404043', - trackBorderColor: '#404043' - } - }) - } else { + navigator: { + handles: { + backgroundColor: '#666', + borderColor: '#AAA' + }, + outlineColor: '#CCC', + maskFill: 'rgba(255,255,255,0.1)', + series: { + color: '#7798BF', + lineColor: '#A6C7ED' + }, + xAxis: { + gridLineColor: '#505053' + } + }, + scrollbar: { + barBackgroundColor: '#808083', + barBorderColor: '#808083', + buttonArrowColor: '#CCC', + buttonBackgroundColor: '#606063', + buttonBorderColor: '#606063', + rifleColor: '#FFF', + trackBackgroundColor: '#404043', + trackBorderColor: '#404043' + } + }) + } else { - } + } + } + ) } - ) - } } diff --git a/src/app/components/usage/usage.component.html b/src/app/components/usage/usage.component.html index a92c99e..0654fb4 100644 --- a/src/app/components/usage/usage.component.html +++ b/src/app/components/usage/usage.component.html @@ -1,8 +1,12 @@ +
+

Github Usage Report

+
- + +
diff --git a/src/app/theme.service.ts b/src/app/theme.service.ts index 84356df..b7b4963 100644 --- a/src/app/theme.service.ts +++ b/src/app/theme.service.ts @@ -7,6 +7,9 @@ export type Theme = "dark-theme" | "light-theme"; providedIn: 'root' }) export class ThemingService { + primaryColor: string = "#00a742"; + secondaryColor: string = "#7e72ff"; + colors: string[] = [this.primaryColor, '#00ff18', this.secondaryColor, '#f8e044', '#ff3978', '#ffa8dc', '#ff461a', '#006de6', '#2fd9d1', '#9ee800']; themes = ["dark-theme", "light-theme"]; // <- list all themes in this array theme: BehaviorSubject = new BehaviorSubject("light-theme"); // <- initial theme @@ -31,6 +34,18 @@ export class ThemingService { }); } + getPrimaryColor(): string { + return this.primaryColor; + } + + getSecondaryColor(): string { + return this.secondaryColor; + } + + getColors(): string[] { + return this.colors; + } + setTheme(theme: Theme) { this.theme.next(theme); } diff --git a/src/material.theme.scss b/src/material.theme.scss index 6f92a55..47c0f11 100644 --- a/src/material.theme.scss +++ b/src/material.theme.scss @@ -5,20 +5,20 @@ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap'); $github-palette: ( - 50: #e6f4ea, - 100: #c0e6c8, - 200: #98d7a5, - 300: #6fc882, - 400: #4bb369, - 500: #238636, - 600: #1f7730, - 700: #196127, - 800: #134b1e, - 900: #0a2f11, - A100: #c0e6c8, - A200: #98d7a5, - A400: #4bb369, - A700: #238636, + 50: #e6f9e8, + 100: #c0f2c2, + 200: #98ea9b, + 300: #70e374, + 400: #48dc4d, + 500: #00a742, + 600: #00963a, + 700: #008532, + 800: #00742a, + 900: #006322, + A100: #c0f2c2, + A200: #98ea9b, + A400: #48dc4d, + A700: #00a742, contrast: ( 50: #000000, 100: #000000, @@ -38,20 +38,20 @@ $github-palette: ( ); $github-purple-palette: ( - 50: #f2e8fc, - 100: #d9c6f9, - 200: #bea3f5, - 300: #a380f2, - 400: #8957e5, - 500: #6e2fc7, - 600: #541aa9, - 700: #3a078b, - 800: #20006d, - 900: #05004e, - A100: #d9c6f9, - A200: #bea3f5, - A400: #8957e5, - A700: #6e2fc7, + 50: #f2f0ff, + 100: #d6d2ff, + 200: #b9b4ff, + 300: #9d96ff, + 400: #8078ff, + 500: #7e72ff, + 600: #6e65e6, + 700: #5e58cc, + 800: #4e4bb2, + 900: #3e3e98, + A100: #d6d2ff, + A200: #b9b4ff, + A400: #8078ff, + A700: #7e72ff, contrast: ( 50: #000000, 100: #000000, @@ -74,8 +74,6 @@ $typography: mat.define-typography-config( $font-family: '"Noto Sans", sans-serif' ); -@include mat.typography-hierarchy($typography); - // Define a dark theme $dark-theme: mat.define-dark-theme(( color: ( @@ -109,6 +107,8 @@ $light-theme: mat.define-light-theme(( @include mat.all-component-themes($light-theme); } +@include mat.typography-hierarchy($typography); + @media (prefers-color-scheme: dark) { a { color: #238636;