diff --git a/src/app/app.component.html b/src/app/app.component.html
index 0166da4..4eae2af 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -3,10 +3,10 @@
\ No newline at end of file
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 823a9f9..2736cf6 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,11 +1,34 @@
-import { Component } from "@angular/core";
+import { Component, HostBinding, OnInit } from "@angular/core";
import { invoke } from "@tauri-apps/api/tauri";
+import { ThemeService, ThemeType } from "./services/theme/theme.service";
+import { OverlayContainer } from "@angular/cdk/overlay";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"],
})
-export class AppComponent {
+export class AppComponent implements OnInit {
+ @HostBinding('class') componentCssClass = ThemeType.Dark;
+
+ constructor(public overlayContainer : OverlayContainer,
+ public theme: ThemeService) {}
+
+ ngOnInit() {
+ this.setTheme(this.theme.getSaved());
+ }
+
+ setTheme(theme: ThemeType) {
+ this.overlayContainer.getContainerElement().classList.forEach((v,k,p)=> {
+ if (v.endsWith('theme')) {
+ p.replace(v,theme);
+ return;
+ }
+ })
+ document.documentElement.classList.remove(this.theme.getTheme())
+ document.documentElement.classList.add(theme);
+ this.componentCssClass = theme;
+ this.theme.set(theme);
+ }
}
diff --git a/src/app/elements/logo/logo.component.scss b/src/app/elements/logo/logo.component.scss
index 2646963..5fd0d94 100644
--- a/src/app/elements/logo/logo.component.scss
+++ b/src/app/elements/logo/logo.component.scss
@@ -6,7 +6,7 @@ svg {
}
-@media (prefers-color-scheme: dark) {
+:host(.dark-theme) {
fill {
color: $text-color;
}
diff --git a/src/app/elements/scrubber/scrubber.component.scss b/src/app/elements/scrubber/scrubber.component.scss
index a03b9ce..f273e97 100644
--- a/src/app/elements/scrubber/scrubber.component.scss
+++ b/src/app/elements/scrubber/scrubber.component.scss
@@ -13,7 +13,7 @@ mat-slider {
flex: 1 1;
}
-@media (prefers-color-scheme: dark) {
+:host(.dark-theme) {
.scrubber-container {
border-top: 1px solid $sec-background;
}
diff --git a/src/app/elements/settings/settings.component.scss b/src/app/elements/settings/settings.component.scss
index 437ada8..0fe3b12 100644
--- a/src/app/elements/settings/settings.component.scss
+++ b/src/app/elements/settings/settings.component.scss
@@ -3,10 +3,15 @@
.settings-container {
padding: 8px 16px 8px 16px;
height: 350px;
+}
+
+.light-theme {
+ .settings-container {
border-top: 1px solid $sec-background-light;
}
+}
-@media (prefers-color-scheme: dark) {
+:host(.dark-theme) {
.settings-container {
border-top: 1px solid $sec-background;
}
diff --git a/src/app/elements/sidebar/sidebar.component.scss b/src/app/elements/sidebar/sidebar.component.scss
index 7e506d8..07a16f3 100644
--- a/src/app/elements/sidebar/sidebar.component.scss
+++ b/src/app/elements/sidebar/sidebar.component.scss
@@ -18,7 +18,7 @@
}
-@media (prefers-color-scheme: dark) {
+:host(.dark-theme) {
.sidebar-container {
border-right: 1px solid $sec-background;
}
diff --git a/src/app/services/theme/theme.service.spec.ts b/src/app/services/theme/theme.service.spec.ts
new file mode 100644
index 0000000..1c2957b
--- /dev/null
+++ b/src/app/services/theme/theme.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ThemeService } from './theme.service';
+
+describe('ThemeService', () => {
+ let service: ThemeService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ service = TestBed.inject(ThemeService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/src/app/services/theme/theme.service.ts b/src/app/services/theme/theme.service.ts
new file mode 100644
index 0000000..9fd9f38
--- /dev/null
+++ b/src/app/services/theme/theme.service.ts
@@ -0,0 +1,62 @@
+import { Injectable } from '@angular/core';
+import { Meta } from '@angular/platform-browser';
+
+export enum ThemeType {
+ Light = 'light-theme',
+ Dark = 'dark-theme',
+ Black = 'black-theme'
+}
+
+@Injectable({
+ providedIn: 'root'
+})
+export class ThemeService {
+ themeType : ThemeType;
+ LOCAL_STORAGE_KEY = 'sentinel-theme'
+
+ prefersDarkTheme = window.matchMedia('(prefers-color-scheme: dark)');
+
+ constructor(public meta: Meta) {
+ this.themeType = ThemeType.Dark;
+ }
+
+ set(theme: ThemeType) {
+ if (theme == ThemeType.Light) {
+ this.themeType = theme;
+ this.meta.updateTag({name: 'theme-color', content: "#f5f5f5"});
+ } else if (theme == ThemeType.Dark) {
+ this.themeType = theme;
+ this.meta.updateTag({name: 'theme-color', content: "#262626"});
+ } else if (theme == ThemeType.Black) {
+ this.themeType = theme;
+ this.meta.updateTag({name: 'theme-color', content: "#000000"});
+ }
+ localStorage.setItem(this.LOCAL_STORAGE_KEY, theme);
+ }
+
+ getSaved(): ThemeType {
+ let theme = localStorage.getItem(this.LOCAL_STORAGE_KEY);
+ if (theme == ThemeType.Light ||
+ theme == ThemeType.Dark ||
+ theme == ThemeType.Black)
+ return theme;
+ else localStorage.removeItem(this.LOCAL_STORAGE_KEY);
+ return (this.prefersDarkTheme) ? ThemeType.Dark : ThemeType.Light;
+ }
+
+ isLight(): boolean {
+ return this.themeType == ThemeType.Light;
+ }
+
+ isDark(): boolean {
+ return this.themeType == ThemeType.Dark;
+ }
+
+ isBlack(): boolean {
+ return this.themeType == ThemeType.Black;
+ }
+
+ getTheme(): ThemeType {
+ return this.themeType;
+ }
+}
diff --git a/src/styles.scss b/src/styles.scss
index 4613b60..fb08626 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -81,9 +81,6 @@ $sentinel-dark-theme: mat.define-dark-theme((
line-height: 24px;
font-weight: 400;
- color: $text-color-light;
- background-color: $main-background-light;
-
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
@@ -91,22 +88,32 @@ $sentinel-dark-theme: mat.define-dark-theme((
-webkit-text-size-adjust: 100%;
}
-.mat-toolbar {
- background: $sec-background-light;
+:root.light-theme {
+ @include mat.all-component-colors($sentinel-light-theme);
color: $text-color-light;
+ background-color: $main-background-light;
}
-@media (prefers-color-scheme: dark) {
- @include mat.all-component-colors($sentinel-dark-theme);
-
- :root {
- color: $text-color;
- background-color: $main-background;
+.light-theme {
+ .mat-toolbar {
+ background: $sec-background-light !important;
+ color: $text-color-light;
+ border-bottom: 1px solid $sec-background-light;
}
+}
+
+:root.dark-theme {
+ @include mat.all-component-colors($sentinel-dark-theme);
+ color: $text-color !important;
+ background-color: $main-background !important;
+}
+
+.dark-theme {
.mat-toolbar {
- background: $sec-background;
+ background: $main-background !important;
color: $text-color;
+ border-bottom: 1px solid $sec-background;
}
}