From 3aa613e1e63cc50484d4c12038d2c3b6b1a6abfe Mon Sep 17 00:00:00 2001 From: Girish Date: Sun, 8 Jan 2023 02:47:56 +0100 Subject: [PATCH] Added dark mode support --- angular.json | 4 +-- src/app/app.component.html | 6 +++++ src/app/app.component.ts | 14 ++++++++-- src/app/app.module.ts | 2 ++ src/app/theme/theme.service.ts | 45 +++++++++++++++++++++++++++++++++ src/index.html | 1 + src/{styles.css => styles.scss} | 41 ++++++++++++++++++++++++++++++ 7 files changed, 109 insertions(+), 4 deletions(-) create mode 100644 src/app/theme/theme.service.ts rename src/{styles.css => styles.scss} (72%) diff --git a/angular.json b/angular.json index 81f2b73..0813b16 100644 --- a/angular.json +++ b/angular.json @@ -28,7 +28,7 @@ "output": "/" } ], - "styles": ["src/styles.css"], + "styles": ["src/styles.scss"], "scripts": [] }, "configurations": { @@ -81,7 +81,7 @@ "polyfills": "src/polyfills.ts", "tsConfig": "src/tsconfig.spec.json", "scripts": [], - "styles": ["src/styles.css"], + "styles": ["src/styles.scss"], "assets": [ { "glob": "**/*", diff --git a/src/app/app.component.html b/src/app/app.component.html index 05116da..a208c78 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,6 +1,12 @@
{{'Angular Update Guide'|i18n}}
+
+ +
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 39b7b51..6d0e10f 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -6,6 +6,7 @@ import { AnalyticsService } from './analytics.service'; import { getLocalizedAction, currentLocale } from './localization'; import { I18nPipe } from './i18n.pipe'; import { Clipboard } from '@angular/cdk/clipboard'; +import {ThemeService} from "./theme/theme.service"; interface Option { id: string; @@ -75,15 +76,19 @@ export class AppComponent { * Only save the locale in the URL if it was already there, or the user changed it */ saveLocale = false; - + darkMode: boolean = false; steps: Step[] = RECOMMENDATIONS; constructor( public location: Location, public track: AnalyticsService, public i18Service: I18nPipe, - private clipboard: Clipboard + private clipboard: Clipboard, + private readonly themeService: ThemeService ) { + if(this.themeService.getSavedTheme() === this.themeService.darkTheme){ + this.toggleTheme(false) + } this.optionList = [ { id: 'ngUpgrade', name: 'ngUpgrade', description: i18Service.transform('to combine AngularJS & Angular') }, { id: 'material', name: 'Angular Material', description: '' }, @@ -298,6 +303,11 @@ export class AppComponent { this.saveLocale = true; this.showUpdatePath(); } + + toggleTheme(useStorage: boolean = true) { + this.themeService.setTheme(useStorage); + this.darkMode = this.themeService.isDarkMode(); + } } /** Whether or not the user is running on a Windows OS. */ diff --git a/src/app/app.module.ts b/src/app/app.module.ts index e150124..4164beb 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -16,6 +16,7 @@ import { Location, LocationStrategy, PathLocationStrategy } from '@angular/commo import './locales'; import { I18nPipe } from './i18n.pipe'; +import {MatIconModule} from "@angular/material/icon"; @NgModule({ declarations: [AppComponent, I18nPipe], @@ -31,6 +32,7 @@ import { I18nPipe } from './i18n.pipe'; MatGridListModule, MatProgressBarModule, MatButtonToggleModule, + MatIconModule, MatMenuModule, ], providers: [Location, { provide: LocationStrategy, useClass: PathLocationStrategy }], diff --git a/src/app/theme/theme.service.ts b/src/app/theme/theme.service.ts new file mode 100644 index 0000000..e4fce9b --- /dev/null +++ b/src/app/theme/theme.service.ts @@ -0,0 +1,45 @@ +import {Injectable} from '@angular/core'; + +@Injectable({ + providedIn: 'root' +}) +export class ThemeService { + private readonly localStorageKey = "theme-id"; + public readonly darkTheme = "dark-theme"; + public readonly lightTheme = "light-theme"; + + setTheme(useStorage: boolean) { + let updatedClasses: string; + let darkMode: boolean = false; + const bodyTag = document.getElementsByTagName("body") + if (bodyTag) { + const bodyClasses: string = bodyTag[0]?.getAttribute("class") || ""; + if (bodyClasses.includes(this.darkTheme)) { + updatedClasses = bodyClasses.replace(this.darkTheme, ""); + } else { + darkMode = true; + updatedClasses = `${bodyClasses} ${this.darkTheme}`; + } + bodyTag[0]?.setAttribute("class", updatedClasses); + } + if (useStorage) { + this.updateLocalStorage(darkMode) + } + } + + updateLocalStorage(darkMode: boolean) { + localStorage.setItem(this.localStorageKey, darkMode ? this.darkTheme : this.lightTheme) + } + + getSavedTheme() { + return localStorage.getItem(this.localStorageKey) + } + + isDarkMode() { + const bodyTag = document.getElementsByTagName("body"); + if (bodyTag) { + return bodyTag[0]?.getAttribute("class")?.includes(this.darkTheme) || false; + } + return false; + } +} diff --git a/src/index.html b/src/index.html index efd1156..177bdc2 100644 --- a/src/index.html +++ b/src/index.html @@ -8,6 +8,7 @@ + diff --git a/src/styles.css b/src/styles.scss similarity index 72% rename from src/styles.css rename to src/styles.scss index 5333941..4a01508 100644 --- a/src/styles.css +++ b/src/styles.scss @@ -1,6 +1,47 @@ +@use '@angular/material' as mat; +@import "@angular/material/prebuilt-themes/pink-bluegrey.css"; @import "@angular/material/prebuilt-themes/indigo-pink.css"; @import url('https://fonts.googleapis.com/css?family=Roboto'); @import url('https://fonts.googleapis.com/css?family=Roboto+Mono'); +@include mat.core(); + +$dark-theme: mat.define-dark-theme(( +color: ( +primary: mat.define-palette(mat.$pink-palette), +secondary: mat.define-palette(mat.$blue-grey-palette), +accent: mat.define-palette(mat.$red-palette) +), +typography: mat.define-typography-config(), +density: 0, +)); + +.dark-theme { + background: #303030; + @include mat.all-component-themes($dark-theme); + color: #fff; +h1, h2, h3, h4, h5, h6, p, li, ul, ol, td, th, table { + color: #fff; +} +a { + color: #f48fb1; +} +a:hover { + color: #ffb0c7; +} +code { + background: #ffffff0f; +&:hover{ + background: #ffffff4a; + } +&:hover:after { + background: #e91e63; + } + +&:hover:before { + background: #404040; + } +} +} * { margin: 0;