Brendon/gameyfin
1
0
Fork 0
mirror of https://github.com/BrenBroZAYT/gameyfin.git synced 2026-06-13 16:40:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

Implemented dark mode

Browse Source
This commit is contained in:
grimsi
2022-08-05 23:00:48 +02:00
parent 98197fc4a6
commit ddc1c036b6
2 changed files with 69 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/components/header/header.component.html
+8 -4
View File
@@ -1,19 +1,23 @@
<mat-toolbar style="position: sticky; top: 0; z-index: 99999">
<button mat-icon-button (click)="goToLibraryScreen()" *ngIf="!onLibraryScreen()">
<button mat-icon-button matTooltip="Home" (click)="goToLibraryScreen()" *ngIf="!onLibraryScreen()">
<mat-icon>home</mat-icon>
</button>
<span class="spacer"></span>
<button mat-icon-button (click)="reloadLibrary()" *ngIf="onLibraryScreen()">
<button mat-icon-button matTooltip="Toggle dark mode" (click)="toggleTheme()">
<mat-icon>brightness_medium</mat-icon>
</button>
<button mat-icon-button matTooltip="Reload library" (click)="reloadLibrary()" *ngIf="onLibraryScreen()">
<mat-icon>refresh</mat-icon>
</button>
<button mat-icon-button (click)="scanLibrary()" *ngIf="onLibraryManagementScreen()">
<button mat-icon-button matTooltip="Scan library" (click)="scanLibrary()" *ngIf="onLibraryManagementScreen()">
<mat-icon>youtube_searched_for</mat-icon>
</button>
<button mat-icon-button (click)="goToLibraryManagementScreen()" *ngIf="!onLibraryManagementScreen()">
<button mat-icon-button matTooltip="Library management" (click)="goToLibraryManagementScreen()" *ngIf="!onLibraryManagementScreen()">
<mat-icon>settings</mat-icon>
</button>
</mat-toolbar>
frontend/src/app/components/header/header.component.ts
+61 -3
View File
@@ -2,10 +2,8 @@ import {Component} from '@angular/core';
import {LibraryService} from "../../services/library.service";
import {MatSnackBar} from '@angular/material/snack-bar';
import {timeInterval} from "rxjs";
import {ActivatedRoute, Router} from "@angular/router";
import {Router} from "@angular/router";
import {GamesService} from "../../services/games.service";
import {LibraryManagementComponent} from "../library-management/library-management.component";
import {LibraryOverviewComponent} from "../library-overview/library-overview.component";
@Component({
selector: 'app-header',
@@ -14,10 +12,43 @@ import {LibraryOverviewComponent} from "../library-overview/library-overview.com
})
export class HeaderComponent {
darkmodeEnabled: boolean;
constructor(private libraryService: LibraryService,
private gameService: GamesService,
private snackBar: MatSnackBar,
private router: Router) {
if(this.getCookie("darkmode") !== null) {
this.darkmodeEnabled = this.getCookie("darkmode") === "true";
} else
if (window.matchMedia) {
this.darkmodeEnabled = window.matchMedia('(prefers-color-scheme: dark)').matches;
} else {
this.darkmodeEnabled = false;
}
this.setTheme();
}
toggleTheme(): void {
this.darkmodeEnabled = !this.darkmodeEnabled;
this.setTheme();
}
private setTheme(): void {
this.darkmodeEnabled ? this.setDarkmode() : this.setLightmode();
this.setCookie("darkmode", this.darkmodeEnabled);
}
private setDarkmode(): void {
document.body.style.background = "#303030";
document.body.style.color = "white";
}
private setLightmode(): void {
document.body.style.background = "white";
document.body.style.color = "black";
}
scanLibrary(): void {
@@ -48,4 +79,31 @@ export class HeaderComponent {
return this.router.url === "/library-management";
}
private setCookie(name: string, value: any): void {
let d:Date = new Date();
document.cookie = `${name}=${value.toString()};`;
}
private getCookie(name: string): string | null {
var dc = document.cookie;
var prefix = name + "=";
var begin = dc.indexOf("; " + prefix);
if (begin == -1) {
begin = dc.indexOf(prefix);
if (begin != 0) return null;
}
else
{
begin += 2;
var end = document.cookie.indexOf(";", begin);
if (end == -1) {
end = dc.length;
}
}
// because unescape has been deprecated, replaced with decodeURI
//return unescape(dc.substring(begin + prefix.length, end));
// @ts-ignore
return decodeURI(dc.substring(begin + prefix.length, end));
}
}