AZEN-SGG/Kavita
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Color Theme applies to scrollbars (#793)

Browse source 
* Moved more scss to use syntax to reduce css size

* Hooked in color-scheme to help brower render scroll bars appropriately depending on color scheme user selects
This commit is contained in:
Joseph Milazzo 2021-11-28 08:24:12 -06:00 • committed by GitHub
parent 7f6fc8c692
commit befbe92cb1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 41 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

17
UI/Web/src/app/_services/nav.service.ts
View file

@ -1,4 +1,4 @@
import { Injectable } from '@angular/core';
import { Injectable, Renderer2, RendererFactory2 } from '@angular/core';
import { ReplaySubject } from 'rxjs';
@Injectable({
@ -13,7 +13,10 @@ export class NavService {
private darkModeSource = new ReplaySubject<boolean>(1);
darkMode$ = this.darkModeSource.asObservable();
constructor() {
private renderer: Renderer2;
constructor(rendererFactory: RendererFactory2) {
this.renderer = rendererFactory.createRenderer(null, null);
this.showNavBar();
}
@ -27,13 +30,23 @@ export class NavService {
toggleDarkMode() {
this.darkMode = !this.darkMode;
this.updateColorScheme();
this.darkModeSource.next(this.darkMode);
}
setDarkMode(mode: boolean) {
this.darkMode = mode;
this.updateColorScheme();
this.darkModeSource.next(this.darkMode);
}
private updateColorScheme() {
if (this.darkMode) {
this.renderer.setStyle(document.querySelector('html'), 'color-scheme', 'dark');
} else {
this.renderer.setStyle(document.querySelector('html'), 'color-scheme', 'light');
}
}
}