Skip to content

Commit 30b1cb0

Browse files
Raul-TSAalexszilagyi
Raul-TSA
and
alexszilagyi
authored
Dark mode fix (#596)
* fix: 🐛 Dark mode fix on devices with light mode by default * Removed comments --------- Co-authored-by: Raul U. @ TSA <hello@techstackapps.com>
1 parent 7e72d50 commit 30b1cb0

File tree

11 files changed

+526
-440
lines changed

11 files changed

+526
-440
lines changed

‎frontend/src/app/components/header/header.component.ts‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -27,25 +27,21 @@ export class HeaderComponent implements OnInit, OnDestroy {
2727
submitSuccess: boolean = false
2828

2929
routerSubscription: Subscription = null
30+
isDarkModeSubscription: Subscription = null
3031

3132
is_environment_desktop: boolean = environment.environment_desktop
3233

3334
isAdmin: boolean = false;
34-
isDarkMode: boolean;
35-
private isDarkModeSubscription: Subscription;
35+
isDarkMode: boolean = false;
3636

3737
constructor(
3838
private authService: AuthService,
3939
private router: Router,
4040
private fastenApi: FastenApiService,
4141
private modalService: NgbModal,
4242
private themeService: ThemeService) {
43-
this.themeService.isDarkMode$.subscribe(darkMode => {
44-
this.isDarkMode = darkMode;
45-
});
4643
}
4744

48-
4945
ngOnInit() {
5046
try {
5147
this.current_user_claims = this.authService.GetCurrentUser()
@@ -123,14 +119,11 @@ export class HeaderComponent implements OnInit, OnDestroy {
123119
this.fastenApi.supportRequest(this.newSupportRequest).subscribe((resp: any) => {
124120
this.loading = false
125121
this.submitSuccess = true
126-
//show success toast? close modal?
127122
},
128123
(err)=>{
129124
this.loading = false
130125
console.error("an error occurred during support request submission",err)
131126
this.errorMsg = err || "An error occurred while submitting your support request. Please try again later."
132127
})
133128
}
134-
135-
136-
}
129+
}

‎frontend/src/app/theme.service.ts‎

Lines changed: 69 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,79 @@
11
import { Injectable } from '@angular/core';
2-
import { BehaviorSubject } from 'rxjs';
2+
import { BehaviorSubject, Observable } from 'rxjs';
33

44
@Injectable({
55
providedIn: 'root'
66
})
77
export class ThemeService {
8-
private darkMode = new BehaviorSubject<boolean>(window.matchMedia('(prefers-color-scheme: dark)').matches);
9-
isDarkMode$ = this.darkMode.asObservable();
8+
private darkMode: BehaviorSubject<boolean>;
9+
isDarkMode$: Observable<boolean>;
1010

11-
constructor() { }
11+
constructor() {
12+
const initialTheme = this.getInitialTheme();
13+
this.darkMode = new BehaviorSubject<boolean>(initialTheme);
14+
this.isDarkMode$ = this.darkMode.asObservable();
15+
16+
this.applyTheme(initialTheme);
17+
18+
this.listenToSystemThemeChanges();
19+
}
1220

13-
setDarkMode(isDarkMode: boolean) {
14-
this.darkMode.next(isDarkMode);
15-
if (isDarkMode) {
16-
document.body.classList.add('dark-theme');
17-
document.body.classList.remove('light-theme');
18-
} else {
19-
document.body.classList.remove('dark-theme');
20-
document.body.classList.add('light-theme');
21+
private getInitialTheme(): boolean {
22+
const savedTheme = localStorage.getItem('darkMode');
23+
if (savedTheme !== null) {
24+
return savedTheme === 'true';
2125
}
26+
27+
const systemPreference = window.matchMedia('(prefers-color-scheme: dark)').matches;
28+
return systemPreference;
29+
}
30+
31+
private listenToSystemThemeChanges(): void {
32+
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
33+
const savedTheme = localStorage.getItem('darkMode');
34+
if (savedTheme === null) {
35+
this.setDarkMode(e.matches);
36+
}
37+
});
38+
}
39+
40+
private applyTheme(isDarkMode: boolean): void {
41+
42+
if (typeof document !== 'undefined') {
43+
if (isDarkMode) {
44+
document.body.classList.add('dark-theme');
45+
document.body.classList.remove('light-theme');
46+
} else {
47+
document.body.classList.remove('dark-theme');
48+
document.body.classList.add('light-theme');
49+
}
50+
}
51+
}
52+
53+
setDarkMode(isDarkMode: boolean): void {
54+
55+
this.darkMode.next(isDarkMode);
56+
this.applyTheme(isDarkMode);
57+
58+
localStorage.setItem('darkMode', isDarkMode.toString());
59+
}
60+
61+
toggleDarkMode(): void {
62+
const currentValue = this.darkMode.value;
63+
this.setDarkMode(!currentValue);
64+
}
65+
66+
getCurrentTheme(): boolean {
67+
return this.darkMode.value;
68+
}
69+
70+
resetToSystemPreference(): void {
71+
localStorage.removeItem('darkMode');
72+
const systemPreference = window.matchMedia('(prefers-color-scheme: dark)').matches;
73+
this.setDarkMode(systemPreference);
74+
}
75+
76+
hasUserPreference(): boolean {
77+
return localStorage.getItem('darkMode') !== null;
2278
}
23-
}
79+
}

‎frontend/src/assets/scss/dark/_buttons.scss‎

Lines changed: 52 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,72 @@
1-
@media (prefers-color-scheme: dark) {
2-
body:not(.light-theme) {
1+
@mixin dark-buttons-styles {
2+
// Dashboard purple buttons "Add source" & "Add condition"
3+
.btn-purple {
4+
background-color: var(--dark-button-color);
5+
color: var(--dark-text-white-color);
6+
border-color: var(--dark-button-color);
7+
8+
&:hover {
9+
background-color: var(--dark-button-pressed-color);
10+
color: var(--dark-text-white-color);
11+
border-color: var(--dark-button-pressed-color);
12+
}
13+
}
314

15+
// Login button
16+
.btn-az-primary {
17+
background-color: var(--dark-button-color);
18+
color: var(--dark-text-white-color);
19+
border-color: var(--dark-button-color);
20+
}
21+
22+
// Light mode indigo outline buttons
23+
.btn-outline-indigo {
24+
border-color: var(--dark-button-outline-color);
25+
color: var(--dark-button-outline-color);
426

5-
// Dashboard purple buttons "Add source" & "Add condition"
6-
.btn-purple {
27+
&:hover {
728
background-color: var(--dark-button-color);
829
color: var(--dark-text-white-color);
930
border-color: var(--dark-button-color);
10-
11-
&:hover {
12-
background-color: var(--dark-button-pressed-color);
13-
color: var(--dark-text-white-color);
14-
border-color: var(--dark-button-pressed-color);
15-
}
1631
}
1732

18-
// Login buttonv
19-
.btn-az-primary {
33+
&:focus {
2034
background-color: var(--dark-button-color);
2135
color: var(--dark-text-white-color);
2236
border-color: var(--dark-button-color);
2337
}
38+
}
2439

25-
// Light mode indigo outline buttons
26-
.btn-outline-indigo {
27-
border-color: var(--dark-button-outline-color);
28-
color: var(--dark-button-outline-color);
29-
30-
&:hover {
31-
background-color: var(--dark-button-color);
32-
color: var(--dark-text-white-color);
33-
border-color: var(--dark-button-color);
34-
}
40+
// Light mode indigo buttons
41+
.btn-indigo {
42+
background-color: var(--dark-button-color);
43+
color: var(--dark-text-white-color);
44+
border-color: var(--dark-button-color);
3545

36-
&:focus {
37-
background-color: var(--dark-button-color);
38-
color: var(--dark-text-white-color);
39-
border-color: var(--dark-button-color);
40-
}
46+
&:hover {
47+
background-color: var(--dark-text-white-color);
48+
color: var(--dark-button-color);
49+
border-color: var(--dark-text-white-color);
4150
}
4251

43-
44-
45-
// Light mode indigo buttons
46-
.btn-indigo {
47-
background-color: var(--dark-button-color);
48-
color: var(--dark-text-white-color);
49-
border-color: var(--dark-button-color);
50-
51-
&:hover {
52-
background-color: var(--dark-text-white-color);
53-
color: var(--dark-button-color);
54-
border-color: var(--dark-text-white-color);
55-
}
56-
57-
&:focus {
58-
background-color: var(--dark-text-white-color);
59-
color: var(--dark-button-color);
60-
border-color: var(--dark-text-white-color);
61-
}
52+
&:focus {
53+
background-color: var(--dark-text-white-color);
54+
color: var(--dark-button-color);
55+
border-color: var(--dark-text-white-color);
6256
}
57+
}
6358

59+
.btn-link-collapsed {
60+
color: var(--dark-text-color);
61+
}
62+
}
6463

65-
.btn-link-collapsed {
66-
color: var(--dark-text-color);
67-
}
64+
@media (prefers-color-scheme: dark) {
65+
body:not(.light-theme) {
66+
@include dark-buttons-styles;
6867
}
68+
}
69+
70+
body.dark-theme {
71+
@include dark-buttons-styles;
6972
}

0 commit comments

Comments
 (0)