Skip to content

Commit 455923f

Browse files
sei-tspencersei-tspencer
authored
Chore/dark mode color (#680)
* new dark theme * style view list like other apps main list
1 parent 131d547 commit 455923f

File tree

4 files changed

+161
-38
lines changed

4 files changed

+161
-38
lines changed

‎src/app/components/home-app/home-app.component.html‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,8 @@
33
Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
44
-->
55
<div class="container background">
6-
<app-topbar
7-
[title]="title"
8-
[topbarView]="TopbarView.PLAYER_HOME"
9-
></app-topbar>
10-
<div>
6+
<app-topbar [title]="title" [topbarView]="TopbarView.PLAYER_HOME"></app-topbar>
7+
<div class="content-container elevate">
118
<app-view-list></app-view-list>
129
</div>
1310
</div>

‎src/app/components/home-app/home-app.component.scss‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,15 @@
99
top: 0;
1010
bottom: 0;
1111
}
12+
13+
.content-container {
14+
width: 80%;
15+
margin-top: 50px;
16+
margin-left: auto;
17+
margin-right: auto;
18+
overflow: hidden;
19+
flex: 1;
20+
min-height: 0;
21+
display: flex;
22+
flex-direction: column;
23+
}

‎src/styles/_dark-theme-colors.scss‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
/*
2+
Copyright 2025 Carnegie Mellon University. All Rights Reserved.
3+
Released under a MIT (SEI)-style license. See LICENSE.md in the
4+
project root for license information.
5+
*/
6+
7+
@use 'sass:map';
8+
@use '@angular/material' as mat;
9+
10+
$_palettes: (
11+
primary: (0: #000000,
12+
10: #1b1b1b,
13+
20: #303030,
14+
25: #3b3b3b,
15+
30: #474747,
16+
35: #525252,
17+
40: #5e5e5e,
18+
50: #777777,
19+
60: #919191,
20+
70: #ababab,
21+
80: #c6c6c6,
22+
90: #e2e2e2,
23+
95: #f1f1f1,
24+
98: #f9f9f9,
25+
99: #fcfcfc,
26+
100: #ffffff,
27+
),
28+
secondary: (0: #000000,
29+
10: #1b1b1b,
30+
20: #303030,
31+
25: #3b3b3b,
32+
30: #474747,
33+
35: #525252,
34+
40: #5e5e5e,
35+
50: #777777,
36+
60: #919191,
37+
70: #ababab,
38+
80: #c6c6c6,
39+
90: #e2e2e2,
40+
95: #f1f1f1,
41+
98: #f9f9f9,
42+
99: #fcfcfc,
43+
100: #ffffff,
44+
),
45+
tertiary: (0: #000000,
46+
10: #1b1b1b,
47+
20: #303030,
48+
25: #3b3b3b,
49+
30: #474747,
50+
35: #525252,
51+
40: #5e5e5e,
52+
50: #777777,
53+
60: #919191,
54+
70: #ababab,
55+
80: #c6c6c6,
56+
90: #e2e2e2,
57+
95: #f1f1f1,
58+
98: #f9f9f9,
59+
99: #fcfcfc,
60+
100: #ffffff,
61+
),
62+
neutral: (0: #000000,
63+
4: #2f2f2f,
64+
6: #313131,
65+
10: #3b3b3b,
66+
12: #3d3d3d,
67+
17: #424242,
68+
20: #454545,
69+
22: #474747,
70+
24: #494949,
71+
25: #4a4a4a,
72+
30: #666670,
73+
35: #76767f,
74+
40: #86868e,
75+
50: #a0a0a7,
76+
60: #b7b7bd,
77+
70: #cdcdd2,
78+
80: #e2e2e6,
79+
87: #efeff2,
80+
90: #f4f4f6,
81+
92: #f7f7f9,
82+
94: #f9f9fa,
83+
95: #fafafb,
84+
96: #fbfbfc,
85+
98: #fdfdfe,
86+
99: #fefefe,
87+
100: #ffffff,
88+
),
89+
neutral-variant: (0: #000000,
90+
10: #1b1b1b,
91+
20: #303030,
92+
25: #3b3b3b,
93+
30: #474747,
94+
35: #525252,
95+
40: #5e5e5e,
96+
50: #777777,
97+
60: #919191,
98+
70: #ababab,
99+
80: #c6c6c6,
100+
90: #e2e2e2,
101+
95: #f1f1f1,
102+
98: #f9f9f9,
103+
99: #fcfcfc,
104+
100: #ffffff,
105+
),
106+
error: (0: #000000,
107+
10: #410002,
108+
20: #690005,
109+
25: #7e0007,
110+
30: #93000a,
111+
35: #a80710,
112+
40: #ba1a1a,
113+
50: #de3730,
114+
60: #ff5449,
115+
70: #ff897d,
116+
80: #ffb4ab,
117+
90: #ffdad6,
118+
95: #ffedea,
119+
98: #fff8f7,
120+
99: #fffbff,
121+
100: #ffffff,
122+
),
123+
);
124+
125+
$_rest: (
126+
secondary: map.get($_palettes, secondary),
127+
neutral: map.get($_palettes, neutral),
128+
neutral-variant: map.get($_palettes, neutral-variant),
129+
error: map.get($_palettes, error),
130+
);
131+
132+
$dark-primary-palette: map.merge(map.get($_palettes, primary), $_rest);
133+
$dark-tertiary-palette: map.merge(map.get($_palettes, tertiary), $_rest);

‎src/styles/styles.scss‎

Lines changed: 14 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -6,53 +6,32 @@
66
@use '@mdi/font/scss/materialdesignicons' with ($mdi-font-path: '~@mdi/font/fonts'
77
);
88
@use './theme-colors' as theme;
9+
@use './dark-theme-colors' as dark-theme;
910
/* END IMPORTS */
1011

1112
/* VENDER INCLUDES */
1213
@include mat.elevation-classes();
1314
@include mat.app-background();
1415
/* END VENDER INCLUDES */
1516

17+
.elevate {
18+
@include mat.elevation(5);
19+
}
20+
1621
html {
1722
@include mat.theme((color: theme.$primary-palette,
1823
typography: '"Open Sans", sans-serif',
19-
),
20-
$overrides: ((background: #f1f1f2,
21-
surface: var(--mat-sys-background),
22-
surface-variant: var(--mat-sys-background),
23-
surface-dim: var(--mat-sys-background),
24-
surface-bright: var(--mat-sys-background),
25-
surface-container-lowest: var(--mat-sys-background),
26-
surface-container-low: var(--mat-sys-background),
27-
surface-container: var(--mat-sys-background),
28-
surface-container-high: var(--mat-sys-background),
29-
surface-container-highest: var(--mat-sys-background),
30-
surface-tint: var(--mat-sys-primary),
31-
icon: var(--mat-sys-primary),
32-
)));
33-
@include mat.icon-button-overrides((icon-color: var(--mat-sys-primary)));
24+
));
25+
@include mat.icon-button-overrides((icon-color: var(--mat-sys-primary),
26+
));
3427
}
3528

3629
.darkMode {
37-
@include mat.theme((color: (primary: theme.$primary-palette,
30+
@include mat.theme((color: (primary: dark-theme.$dark-primary-palette,
3831
typography: '"Open Sans", sans-serif',
3932
theme-type: dark,
4033
),
41-
),
42-
$overrides: ((background: #313131,
43-
surface: var(--mat-sys-background),
44-
surface-variant: var(--mat-sys-background),
45-
surface-dim: var(--mat-sys-background),
46-
surface-bright: var(--mat-sys-background),
47-
surface-container-lowest: var(--mat-sys-background),
48-
surface-container-low: var(--mat-sys-background),
49-
surface-container: var(--mat-sys-background),
50-
surface-container-high: var(--mat-sys-background),
51-
surface-container-highest: var(--mat-sys-background),
52-
surface-tint: var(--mat-sys-primary),
53-
icon: var(--mat-sys-primary),
54-
)));
55-
@include mat.icon-button-overrides((icon-color: var(--mat-sys-primary)));
34+
));
5635
}
5736

5837
body {
@@ -85,7 +64,8 @@ body {
8564
}
8665

8766
// default all icons to the primary theme color
88-
mat-icon, .mat-icon {
67+
mat-icon,
68+
.mat-icon {
8969
--mat-icon-color: var(--mat-sys-primary);
9070
}
9171

@@ -134,6 +114,7 @@ mat-paginator {
134114
// Global utility classes (previously from theme.globals() mixin)
135115
.selected {
136116
background: var(--mat-sys-primary);
117+
137118
&:hover,
138119
&:focus {
139120
background: var(--mat-sys-primary) !important;
@@ -149,6 +130,7 @@ mat-paginator {
149130
}
150131

151132
.highlight {
133+
152134
&:hover,
153135
&:focus {
154136
background: var(--mat-sys-surface-variant);
@@ -195,4 +177,3 @@ a {
195177
.normal-text {
196178
color: var(--mat-sys-on-background) !important;
197179
}
198-

0 commit comments

Comments
 (0)
⚡