Skip to content

Chore/dark mode color #680

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sei-aschlackman merged 3 commits into from
Mar 11, 2026
Merged

Chore/dark mode color #680

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
45970c5
new dark theme
sei-tspencer Mar 10, 2026
b4d1e01
style view list like other apps main list
sei-tspencer Mar 10, 2026
0d20bdc
Merge branch 'main' into chore/dark-mode-color
sei-tspencer Mar 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 2 additions & 5 deletions src/app/components/home-app/home-app.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,8 @@
Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
-->
<div class="container background">
<app-topbar
[title]="title"
[topbarView]="TopbarView.PLAYER_HOME"
></app-topbar>
<div>
<app-topbar [title]="title" [topbarView]="TopbarView.PLAYER_HOME"></app-topbar>
<div class="content-container elevate">
<app-view-list></app-view-list>
</div>
</div>
12 changes: 12 additions & 0 deletions src/app/components/home-app/home-app.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,15 @@
top: 0;
bottom: 0;
}

.content-container {
width: 80%;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
133 changes: 133 additions & 0 deletions src/styles/_dark-theme-colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
/*
Copyright 2025 Carnegie Mellon University. All Rights Reserved.
Released under a MIT (SEI)-style license. See LICENSE.md in the
project root for license information.
*/

@use 'sass:map';
@use '@angular/material' as mat;

$_palettes: (
primary: (0: #000000,
10: #1b1b1b,
20: #303030,
25: #3b3b3b,
30: #474747,
35: #525252,
40: #5e5e5e,
50: #777777,
60: #919191,
70: #ababab,
80: #c6c6c6,
90: #e2e2e2,
95: #f1f1f1,
98: #f9f9f9,
99: #fcfcfc,
100: #ffffff,
),
secondary: (0: #000000,
10: #1b1b1b,
20: #303030,
25: #3b3b3b,
30: #474747,
35: #525252,
40: #5e5e5e,
50: #777777,
60: #919191,
70: #ababab,
80: #c6c6c6,
90: #e2e2e2,
95: #f1f1f1,
98: #f9f9f9,
99: #fcfcfc,
100: #ffffff,
),
tertiary: (0: #000000,
10: #1b1b1b,
20: #303030,
25: #3b3b3b,
30: #474747,
35: #525252,
40: #5e5e5e,
50: #777777,
60: #919191,
70: #ababab,
80: #c6c6c6,
90: #e2e2e2,
95: #f1f1f1,
98: #f9f9f9,
99: #fcfcfc,
100: #ffffff,
),
neutral: (0: #000000,
4: #2f2f2f,
6: #313131,
10: #3b3b3b,
12: #3d3d3d,
17: #424242,
20: #454545,
22: #474747,
24: #494949,
25: #4a4a4a,
30: #666670,
35: #76767f,
40: #86868e,
50: #a0a0a7,
60: #b7b7bd,
70: #cdcdd2,
80: #e2e2e6,
87: #efeff2,
90: #f4f4f6,
92: #f7f7f9,
94: #f9f9fa,
95: #fafafb,
96: #fbfbfc,
98: #fdfdfe,
99: #fefefe,
100: #ffffff,
),
neutral-variant: (0: #000000,
10: #1b1b1b,
20: #303030,
25: #3b3b3b,
30: #474747,
35: #525252,
40: #5e5e5e,
50: #777777,
60: #919191,
70: #ababab,
80: #c6c6c6,
90: #e2e2e2,
95: #f1f1f1,
98: #f9f9f9,
99: #fcfcfc,
100: #ffffff,
),
error: (0: #000000,
10: #410002,
20: #690005,
25: #7e0007,
30: #93000a,
35: #a80710,
40: #ba1a1a,
50: #de3730,
60: #ff5449,
70: #ff897d,
80: #ffb4ab,
90: #ffdad6,
95: #ffedea,
98: #fff8f7,
99: #fffbff,
100: #ffffff,
),
);

$_rest: (
secondary: map.get($_palettes, secondary),
neutral: map.get($_palettes, neutral),
neutral-variant: map.get($_palettes, neutral-variant),
error: map.get($_palettes, error),
);

$dark-primary-palette: map.merge(map.get($_palettes, primary), $_rest);
$dark-tertiary-palette: map.merge(map.get($_palettes, tertiary), $_rest);
47 changes: 14 additions & 33 deletions src/styles/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,53 +6,32 @@
@use '@mdi/font/scss/materialdesignicons' with ($mdi-font-path: '~@mdi/font/fonts'
);
@use './theme-colors' as theme;
@use './dark-theme-colors' as dark-theme;
/* END IMPORTS */

/* VENDER INCLUDES */
@include mat.elevation-classes();
@include mat.app-background();
/* END VENDER INCLUDES */

.elevate {
@include mat.elevation(5);
}

html {
@include mat.theme((color: theme.$primary-palette,
typography: '"Open Sans", sans-serif',
),
$overrides: ((background: #f1f1f2,
surface: var(--mat-sys-background),
surface-variant: var(--mat-sys-background),
surface-dim: var(--mat-sys-background),
surface-bright: var(--mat-sys-background),
surface-container-lowest: var(--mat-sys-background),
surface-container-low: var(--mat-sys-background),
surface-container: var(--mat-sys-background),
surface-container-high: var(--mat-sys-background),
surface-container-highest: var(--mat-sys-background),
surface-tint: var(--mat-sys-primary),
icon: var(--mat-sys-primary),
)));
@include mat.icon-button-overrides((icon-color: var(--mat-sys-primary)));
));
@include mat.icon-button-overrides((icon-color: var(--mat-sys-primary),
));
}

.darkMode {
@include mat.theme((color: (primary: theme.$primary-palette,
@include mat.theme((color: (primary: dark-theme.$dark-primary-palette,
typography: '"Open Sans", sans-serif',
theme-type: dark,
),
),
$overrides: ((background: #313131,
surface: var(--mat-sys-background),
surface-variant: var(--mat-sys-background),
surface-dim: var(--mat-sys-background),
surface-bright: var(--mat-sys-background),
surface-container-lowest: var(--mat-sys-background),
surface-container-low: var(--mat-sys-background),
surface-container: var(--mat-sys-background),
surface-container-high: var(--mat-sys-background),
surface-container-highest: var(--mat-sys-background),
surface-tint: var(--mat-sys-primary),
icon: var(--mat-sys-primary),
)));
@include mat.icon-button-overrides((icon-color: var(--mat-sys-primary)));
));
}

body {
Expand Down Expand Up @@ -85,7 +64,8 @@ body {
}

// default all icons to the primary theme color
mat-icon, .mat-icon {
mat-icon,
.mat-icon {
--mat-icon-color: var(--mat-sys-primary);
}

Expand Down Expand Up @@ -134,6 +114,7 @@ mat-paginator {
// Global utility classes (previously from theme.globals() mixin)
.selected {
background: var(--mat-sys-primary);

&:hover,
&:focus {
background: var(--mat-sys-primary) !important;
Expand All @@ -149,6 +130,7 @@ mat-paginator {
}

.highlight {

&:hover,
&:focus {
background: var(--mat-sys-surface-variant);
Expand Down Expand Up @@ -195,4 +177,3 @@ a {
.normal-text {
color: var(--mat-sys-on-background) !important;
}

Loading
⚡