Skip to content

Commit 7dc1c7d

Browse files
aguero-techaguero-tech
committed
Darktheme added. new branch to fix PR for DSOMM contribution
1 parent 6dc7d4a commit 7dc1c7d

File tree

4 files changed

+125
-48
lines changed

4 files changed

+125
-48
lines changed

‎src/app/app.component.html

+9-11
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,26 @@
11
<mat-drawer-container class="main-container" autosize>
2-
<mat-drawer
3-
#drawer
4-
class="sidenav-menu"
5-
mode="side"
6-
opened="{{ menuIsOpen }}">
7-
<button class="menu-close" (click)="toggleMenu()">
8-
<mat-icon class="white-icon">close</mat-icon>
9-
</button>
2+
<mat-drawer #drawer class="example-sidenav" mode="side">
103
<a routerLink="/"><app-logo></app-logo></a>
114
<app-sidenav-buttons></app-sidenav-buttons>
125
</mat-drawer>
136

147
<div class="sidenav-content">
15-
<button type="button" mat-button (click)="toggleMenu()" color="primary">
8+
<button type="button" mat-button (click)="drawer.toggle()" color="primary">
169
<mat-icon>menu</mat-icon>
1710
</button>
1811
<a
1912
class="github-fork-ribbon"
2013
href="https://github.com/wurstbrot/DevSecOps-MaturityModel"
2114
data-ribbon="Fork me on GitHub"
2215
title="Fork me on GitHub"
23-
>Fork me on GitHub</a
16+
>Fork me on GitHub</a
2417
>
2518
</div>
19+
20+
<!-- Adding the toggle night mode -->
21+
<button (click)="toggleTheme()">
22+
{{ isNightMode ? 'Switch to Light Mode' : 'Switch to Night Mode' }}
23+
</button>
2624
<mat-divider></mat-divider>
2725
<router-outlet></router-outlet>
28-
</mat-drawer-container>
26+
</mat-drawer-container>

‎src/app/app.component.ts

+20-1
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,38 @@ import { Component, OnInit } from '@angular/core';
33
@Component({
44
selector: 'app-root',
55
templateUrl: './app.component.html',
6-
styleUrls: ['./app.component.css'],
6+
styleUrls: ['./app.component.css'], // This is for component-specific styles.
77
})
88
export class AppComponent implements OnInit {
99
title = 'DSOMM';
10+
isNightMode = false;
1011
menuIsOpen: boolean = true;
1112

1213
ngOnInit(): void {
14+
// Load menu state
1315
let menuState: string | null = localStorage.getItem('state.menuIsOpen');
1416
if (menuState === 'false') {
1517
setTimeout(() => {
1618
this.menuIsOpen = false;
1719
}, 600);
1820
}
21+
22+
// Load night mode state
23+
let nightModeState: string | null = localStorage.getItem('state.isNightMode');
24+
if (nightModeState === 'true') {
25+
this.isNightMode = true;
26+
document.body.classList.add('night-mode');
27+
}
28+
}
29+
30+
toggleTheme(): void {
31+
this.isNightMode = !this.isNightMode;
32+
if (this.isNightMode) {
33+
document.body.classList.add('night-mode');
34+
} else {
35+
document.body.classList.remove('night-mode');
36+
}
37+
localStorage.setItem('state.isNightMode', this.isNightMode.toString());
1938
}
2039

2140
toggleMenu(): void {

‎src/custom-theme.scss

+67-31
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,80 @@
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+
// Custom Theme Maps for Body Styles
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: ( // renamed to avoid conflict with Angular Material variables
13+
background: #2c2c2c,
14+
text: #e0e0e0,
15+
link: #bb86fc
1716
);
1817

18+
// ----------------------------------------------
19+
// Angular Material Core Styles & Typography
20+
// ----------------------------------------------
21+
$custom-typography: mat.define-typography-level(
22+
$font-family: montserrat,
23+
$font-weight: 400,
24+
$font-size: 1rem,
25+
$line-height: 1,
26+
$letter-spacing: normal,
27+
);
1928
@include mat.core($custom-typography);
2029

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);
30+
// ----------------------------------------------
31+
// Angular Material Palettes
32+
// ----------------------------------------------
33+
$DSOMM-primary: mat.define-palette(mat.$green-palette, 400);
2534
$DSOMM-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
26-
27-
// The warn palette is optional (defaults to red).
2835
$DSOMM-warn: mat.define-palette(mat.$red-palette);
2936

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-
)
37+
// ----------------------------------------------
38+
// Define Angular Material Light and Dark Themes
39+
// ----------------------------------------------
40+
$DSOMM-light-theme: mat.define-light-theme((
41+
color: (
42+
primary: $DSOMM-primary,
43+
accent: $DSOMM-accent,
44+
warn: $DSOMM-warn,
45+
)
3846
));
3947

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);
48+
$DSOMM-dark-theme: mat.define-dark-theme((
49+
color: (
50+
primary: $DSOMM-primary, // using the same palette; adjust if needed
51+
accent: $DSOMM-accent,
52+
warn: $DSOMM-warn,
53+
)
54+
));
55+
56+
// Include Angular Material styles for the light theme by default
57+
@include mat.all-component-themes($DSOMM-light-theme);
58+
59+
// ----------------------------------------------
60+
// Mixin to Apply Custom Body Styles
61+
// ----------------------------------------------
62+
@mixin apply-theme($theme) {
63+
background-color: map-get($theme, background);
64+
color: map-get($theme, text);
65+
66+
a {
67+
color: map-get($theme, link);
68+
}
69+
}
70+
71+
// Apply custom light theme styles to the body by default
72+
body {
73+
@include apply-theme($light-theme);
74+
}
4475

76+
// When night mode is active, override with custom dark theme styles and include Angular Material dark theme
77+
body.night-mode {
78+
@include apply-theme($custom-dark-theme);
79+
@include mat.all-component-themes($DSOMM-dark-theme);
80+
}

‎src/styles.css

+29-5
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,31 @@
1-
/* You can add global styles to this file, and also import other style files */
1+
/* Global Styles and Reset */
2+
html, body {
3+
height: 100%;
4+
margin: 0;
5+
font-family: Roboto, "Helvetica Neue", sans-serif;
6+
}
7+
8+
/* Light Theme Variables (Default) */
9+
:root {
10+
--bg-color: white;
11+
--text-color: black;
12+
--link-color: blue;
13+
}
214

3-
html, body { height: 100%; }
4-
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
15+
/* Dark Theme Variables */
16+
body.night-mode {
17+
--bg-color: #121212;
18+
--text-color: #e0e0e0;
19+
--link-color: blue;
20+
}
21+
22+
/* Apply Theme Variables */
23+
body {
24+
background-color: var(--bg-color);
25+
color: var(--text-color);
26+
}
527

28+
/* Existing Styles */
629
.userday table :is(td, th) {
730
border: 1px solid black;
831
padding: 0.3em;
@@ -18,6 +41,7 @@ body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
1841
margin-right: 10px;
1942
}
2043

21-
.usage-dimensions img {
22-
max-width: 40rem;
44+
/* Link Colors */
45+
a {
46+
color: var(--link-color);
2347
}

0 commit comments

Comments
 (0)