Skip to content

Commit 39c76e9

Browse files
aguero-techaguero-tech
committed
icons for darktheme now matches the green dsomm theme
1 parent 6dc7d4a commit 39c76e9

3 files changed

Lines changed: 171 additions & 33 deletions

File tree

‎src/app/component/sidenav-buttons/sidenav-buttons.component.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<mat-nav-list>
2+
<!-- Dynamic nav links -->
23
<a
34
mat-list-item
45
*ngFor="let option of Options; index as i"
@@ -7,3 +8,17 @@
78
<h3 mat-line>{{ Options[i] }}</h3>
89
</a>
910
</mat-nav-list>
11+
12+
<!-- Separate theme toggle outside nav-list -->
13+
<mat-divider></mat-divider>
14+
15+
<mat-list>
16+
<mat-list-item (click)="toggleTheme()" style="cursor: pointer">
17+
<mat-icon mat-list-icon color="primary">
18+
{{ isNightMode ? 'light_mode' : 'dark_mode' }}
19+
</mat-icon>
20+
<h3 mat-line>
21+
{{ isNightMode ? 'Switch to Light Mode' : 'Switch to Dark Mode' }}
22+
</h3>
23+
</mat-list-item>
24+
</mat-list>

‎src/app/component/sidenav-buttons/sidenav-buttons.component.ts‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import { Component } from '@angular/core';
1+
import { Component, OnInit } from '@angular/core';
22

33
@Component({
44
selector: 'app-sidenav-buttons',
55
templateUrl: './sidenav-buttons.component.html',
66
styleUrls: ['./sidenav-buttons.component.css'],
77
})
8-
export class SidenavButtonsComponent {
8+
export class SidenavButtonsComponent implements OnInit {
99
Options: string[] = [
1010
'Overview',
1111
'Matrix',
@@ -33,5 +33,28 @@ export class SidenavButtonsComponent {
3333
'/about',
3434
'/userday',
3535
];
36+
37+
isNightMode = false;
38+
3639
constructor() {}
40+
41+
ngOnInit(): void {
42+
const themePref = localStorage.getItem('theme');
43+
this.isNightMode = themePref === 'night';
44+
this.applyTheme();
45+
}
46+
47+
toggleTheme(): void {
48+
this.isNightMode = !this.isNightMode;
49+
this.applyTheme();
50+
localStorage.setItem('theme', this.isNightMode ? 'night' : 'light');
51+
}
52+
53+
private applyTheme(): void {
54+
if (this.isNightMode) {
55+
document.body.classList.add('night-mode');
56+
} else {
57+
document.body.classList.remove('night-mode');
58+
}
59+
}
3760
}

‎src/custom-theme.scss‎

Lines changed: 131 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,144 @@
1-
2-
// Custom Theming for Angular Material
3-
// For more information: https://material.angular.io/guide/theming
41
@use '@angular/material' as mat;
5-
// Plus imports for other components in your app.
62

7-
// Include the common styles for Angular Material. We include this here so that you only
8-
// have to load a single css file for Angular Material in your app.
9-
// Be sure that you only ever include this mixin once!
3+
// ----------------------------------------------
4+
// Theme Colors and Typography
5+
// ----------------------------------------------
6+
$light-theme: (
7+
background: white,
8+
text: black,
9+
link: blue
10+
);
1011

11-
$custom-typography: mat.define-typography-level(
12-
$font-family: montserrat,
13-
$font-weight: 400,
14-
$font-size: 1rem,
15-
$line-height: 1,
16-
$letter-spacing: normal,
12+
$custom-dark-theme: (
13+
background: #2c2c2c,
14+
text: #e0e0e0,
15+
link: #bb86fc
1716
);
1817

18+
$custom-typography: mat.define-typography-level(
19+
$font-family: montserrat,
20+
$font-weight: 400,
21+
$font-size: 1rem,
22+
$line-height: 1,
23+
$letter-spacing: normal
24+
);
1925
@include mat.core($custom-typography);
2026

21-
// Define the palettes for your theme using the Material Design palettes available in palette.scss
22-
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
23-
// hue. Available color palettes: https://material.io/design/color/
24-
$DSOMM-primary: mat.define-palette(mat.$green-palette,400);
27+
// ----------------------------------------------
28+
// Angular Material Palettes
29+
// ----------------------------------------------
30+
$DSOMM-primary: mat.define-palette(mat.$green-palette, 400);
2531
$DSOMM-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
26-
27-
// The warn palette is optional (defaults to red).
2832
$DSOMM-warn: mat.define-palette(mat.$red-palette);
2933

30-
// Create the theme object. A theme consists of configurations for individual
31-
// theming systems such as "color" or "typography".
32-
$DSOMM-theme: mat.define-light-theme((
33-
color: (
34-
primary: $DSOMM-primary,
35-
accent: $DSOMM-accent,
36-
warn: $DSOMM-warn,
37-
)
34+
// ----------------------------------------------
35+
// Angular Material Themes
36+
// ----------------------------------------------
37+
$DSOMM-light-theme: mat.define-light-theme((
38+
color: (
39+
primary: $DSOMM-primary,
40+
accent: $DSOMM-accent,
41+
warn: $DSOMM-warn
42+
)
3843
));
3944

40-
// Include theme styles for core and each component used in your app.
41-
// Alternatively, you can import and @include the theme mixins for each component
42-
// that you are using.
43-
@include mat.all-component-themes($DSOMM-theme);
45+
$DSOMM-dark-theme: mat.define-dark-theme((
46+
color: (
47+
primary: $DSOMM-primary,
48+
accent: $DSOMM-accent,
49+
warn: $DSOMM-warn
50+
)
51+
));
52+
53+
// ----------------------------------------------
54+
// Base Theme Mixin
55+
// ----------------------------------------------
56+
@mixin apply-theme($theme) {
57+
background-color: map-get($theme, background);
58+
color: map-get($theme, text);
59+
60+
a {
61+
color: map-get($theme, link);
62+
}
63+
}
64+
65+
// ----------------------------------------------
66+
// Light Mode Styles
67+
// ----------------------------------------------
68+
body {
69+
@include apply-theme($light-theme);
70+
@include mat.all-component-themes($DSOMM-light-theme);
71+
72+
.title-button,
73+
h1, h2, h3, h4, h5, h6 {
74+
color: map-get($light-theme, text);
75+
}
76+
}
77+
78+
// ----------------------------------------------
79+
// Dark Mode Styles
80+
// ----------------------------------------------
81+
body.night-mode {
82+
@include apply-theme($custom-dark-theme);
83+
@include mat.all-component-themes($DSOMM-dark-theme);
84+
85+
.title-button,
86+
h1, h2, h3, h4, h5, h6 {
87+
color: map-get($custom-dark-theme, text);
88+
}
89+
90+
// Common containers
91+
mat-card,
92+
.mat-dialog-container,
93+
.mat-expansion-panel,
94+
.mat-accordion,
95+
.overlay-wrapper {
96+
background-color: #2c2c2c !important;
97+
color: #e0e0e0;
98+
}
99+
100+
// Dialog styling
101+
.mat-dialog-container {
102+
border: 1px solid #444;
103+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
104+
}
105+
106+
// Modal override
107+
.overlay-modal {
108+
background-color: #2c2c2c !important;
109+
color: #e0e0e0;
110+
border-radius: 6px;
111+
112+
mat-card {
113+
background-color: transparent !important;
114+
}
115+
116+
h1, h2, h3, h4, h5, h6 {
117+
color: #e0e0e0 !important;
118+
}
119+
}
120+
121+
// Matrix override
122+
.matrix-output p,
123+
.matrix-output span,
124+
.matrix-output div {
125+
color: #e0e0e0;
126+
}
127+
128+
// Circular heatmap (radar chart)
129+
.circular-heat text,
130+
.labels.segment text {
131+
fill: #ffffff !important;
132+
}
133+
134+
.circular-heat line,
135+
.circular-heat path {
136+
stroke: #000000;
137+
}
138+
}
44139

140+
.button-container {
141+
display: flex;
142+
flex-direction: column; // Vertical alignment
143+
gap: 10px; // Space between buttons
144+
}

0 commit comments

Comments
 (0)