Dark Theme v2.0 #381

aguero-tech · 2025-03-25T21:30:54Z

@vbakke & @wurstbrot thanks for the feedback on #374, since we are making major angular upgrades, i took off the matrix buttons, so this PR solely focuses on dark theme improvements.

Moved light/dark toggle button to the side nav
icon toggle colors match the theme.
changed the background and headings of text/drawers (in dark mode)
made the heatmap gridlines & text white to contrast with dark background (in dark mode).

Sorry i did not change the DSOMM in black on the top left. I think it looks pretty rad, and i didn't want to load another image lol.

aguero-tech · 2025-03-25T21:37:15Z

vbakke · 2025-03-30T16:59:46Z

@aguero-tech , I created a pull request to your pull request, where the circular heatmap is drawn in dark / light mode.

However, switching the light mode from the menu, currently does not update the setting of the circular component. Are you able to pass on the switch to the circular component?

vbakke · 2025-03-30T20:12:00Z

@aguero-tech , looks like adding the 'Switch to Dark Mode' is breaking the unittest check for navigation names being shown in the same order as options array.

@0x41head: I'm a bit unsure about the benefit of this test, and what sort of mistakes this test is supposed to uncover. Is it meaningful?

aguero-tech · 2025-03-30T23:15:56Z

Thank you @vbakke . I apologize. im out for the weekend. Will touch base on Tuesday. I'll look into the menu unit test break as well and see if I can ameliorate it or find some enlightenment about the purpose of the test as well. I appreciate it.

vbakke · 2025-03-31T06:22:57Z

Not to worry @aguero-tech . I think I broke everything that cold be broken on my first PR. : )

Nor is this any rush. You're doing it in your spare time. Do it when time allows 🙂

0x41head · 2025-03-31T07:12:44Z

fixed the unit test @vbakke @aguero-tech

vbakke · 2025-04-13T21:19:34Z

How are you doing @aguero-tech?

Do you see any issues regarding the PR aguero-tech#11 ?
Or do you need any assistance with Angular and passing the theme to the CircularHeatmapComponent?

@vbakke

Add dark theme for circular heatmap, thanks @vbakke

…ng via side b utton. Will merge PR and then update to DSOMM before contributing.

aguero-tech · 2025-04-18T01:44:45Z

That was fun to work on. (learning is fun) @vbakke apologies for being absent. I actually got in a minor motorcycle accident and was out for a couple weeks with a messed up shoulder, luckily no fractures/broken bones. All good! Here's a clip for proof of concept. Light theme has white graph background, while the dark theme has light gray. I hope this is close to what you had in mind. Feel free to change the colors under custom-theme.scss (under .dark-theme line 152) the trigger is done via theme.service.ts under the app>service folder.

DSOMM.-.Opera.2025-04-17.20-42-35.mp4

vbakke · 2025-04-18T08:39:35Z

Dude, no need to apologize. We do this on our spare time. And having an_accident_ is definitely a good reason to focus on yourself! 😨

I was just meaning to check in. I don't always pick up on messages from GitHub myself, so I was just going to check that you weren't thinking you were waiting for feedback 😊

I'll have a look at the end result. Probably over the Easter weekend or so. Take care, both on and off the road 🤞😃

vbakke

Thank you for your contribution, @aguero-tech. Please see my comments. Feel free to disagree to some of them. Just let me know why :)

src/app/component/circular-heatmap/circular-heatmap.component.ts

src/custom-theme.scss

src/app/component/circular-heatmap/circular-heatmap.component.ts

src/custom-theme.scss

…olors. Incorporate4d lots of vbakke's requests (cleaning up code). Fixed the persistence of theme after refresh.

aguero-tech · 2025-04-23T15:47:20Z

@vbakke thank you very much for being thurough and working on this together. Been a good time so far. I'm done with the fixes. All yours! Let me know how i did!! selected ya for re-review.

vbakke

Much better! Thank you @aguero-tech! :)

I found a few more minor things.

In teams.component.css we get a very low contrast on the teams' names. I suggest we add:
color: white; to the .team-list ul li { ... } (for both light and dark mode)
In styles.css (used in 'DSOMM User Day 2024' (not sure why it is still here)), the green table row need adjustments in the dark mode:

.dark-theme .userday table :is(td, th) {
    border-color: #e0e0e0;
}
.dark-theme .userday tr:nth-child(even) {
    background-color: #365d36;
}

src/custom-theme.scss

… online 106). (Line-63; updating link colors to determine by browser visited state for dark theme. (Line-159; moving app-matrix to respective componenet.css and fix for visited. Fix on styles.css for dark theme on About Us.

aguero-tech · 2025-04-30T18:56:45Z

@vbakke all very good recommendations! Thanks again!

vbakke

Think we are there now. Just two minor issues

src/app/component/circular-heatmap/circular-heatmap.component.css

src/custom-theme.scss

…dapt to dark/light theme

aguero-tech · 2025-05-05T17:33:11Z

Thanks @vbakke! We did it! lol first round on me.

vbakke

Excellent, @aguero-tech! Looking forward to that! :) 🍻

Looks good to me now @wurstbrot / @0x41head . :) 👍

wurstbrot · 2025-05-05T19:59:54Z

src/custom-theme.scss

+  .title-button,
+  h1, h2, h3, h4, h5, h6 {
+    color: map-get($custom-dark-theme, text);
+


please format the CSS and remove whitespaces

I have removed extra lines and spaces and have consolidated some ".body.dark-theme" code. Some lines i did not align just to keep it nested, but we can move it if desired.

wurstbrot · 2025-05-05T20:00:19Z

src/custom-theme.scss

+    background-color: #74b277;
+  }
+}
+


please format the CSS and remove whitespaces

wurstbrot · 2025-05-05T20:00:32Z

src/custom-theme.scss

+
+
+
+  @include mat.all-component-themes($DSOMM-dark-theme);


why is here a space?

spaces removed.

wurstbrot · 2025-05-05T20:04:05Z

@aguero-tech thank you. Great idea. Please run auto format with a tool over the files or fix the comments.
In the future, signed commits would be good.

aguero-tech · 2025-05-08T16:43:31Z

I ran an auto formatting tool and didn't like what it changed, so i manually removed extra spaces and lines. Let me work on re-establishing my signature. Sorry I let it expire and forgot about it.

… fixed my GPG key signature for contribution - Manny

aguero-tech · 2025-05-08T17:16:12Z

Thanks for lessons on code quality and styling @wurstbrot and @vbakke! I think this should be it. I finished my reformatting and got my GPG signed. Let me know if there is anything else! Thanks gentlemen!

0x41head · 2025-05-08T17:37:28Z

Can we change the text color for the acyclic graph as well ?

aguero-tech · 2025-05-08T17:41:12Z

Oh thats a good find @0x41head! Not sure where that is but I'll hunt it down.

0x41head · 2025-05-08T18:25:03Z

@aguero-tech let me know if you have difficulties finding the root cause of the bug 👍

aguero-tech · 2025-05-08T20:09:25Z

Thanks @0x41head!

My color edit changed the parameter "activity" to unused. Line 143.
.

But other than that. were ok.

… mode. Also subscribed the dependency graph text to theme.service to dynamically change text color w/o refresh. Basic Linting.

0x41head · 2025-05-08T20:57:16Z

LGTM! Thanks for the work on this PR @aguero-tech 👍

icons for darktheme now matches the green dsomm theme

39c76e9

aguero-tech marked this pull request as ready for review March 25, 2025 21:31

aguero-tech mentioned this pull request Mar 25, 2025

Dark Theme with Matrix Update #374

Closed

wurstbrot requested a review from 0x41head March 29, 2025 16:32

add dark theme for circular heatmap

7a1dab0

Giving in to nitpicking linter

f9a8d37

Update sidenav-buttons.component.spec.ts

5256901

aguero-tech added 3 commits April 17, 2025 10:49

Merge pull request #11 from vbakke/vbakke_darktheme

6371c90

Add dark theme for circular heatmap, thanks @vbakke

merged @vbakke's commit and hope to have fixed the theming, all worki…

3d0aa67

…ng via side b utton. Will merge PR and then update to DSOMM before contributing.

forgot about the white text in circular heatmap during dark mode

94420d8

vbakke self-requested a review April 18, 2025 08:28

vbakke requested changes Apr 19, 2025

View reviewed changes

vbakke reviewed Apr 20, 2025

View reviewed changes

src/custom-theme.scss Outdated Show resolved Hide resolved

dark theme color improvements; scss improvements, removed hardcoded c…

f0684c3

…olors. Incorporate4d lots of vbakke's requests (cleaning up code). Fixed the persistence of theme after refresh.

aguero-tech requested a review from vbakke April 23, 2025 15:47

giving into a return for prettier eslint

a7d8cc1

vbakke reviewed Apr 27, 2025

View reviewed changes

aguero-tech added 2 commits April 30, 2025 13:44

aguero-tech requested a review from vbakke April 30, 2025 18:56

vbakke requested changes May 1, 2025

View reviewed changes

src/app/component/circular-heatmap/circular-heatmap.component.css Show resolved Hide resolved

src/custom-theme.scss Show resolved Hide resolved

aguero-tech added 2 commits May 5, 2025 12:19

removing the border on the close dialog box and updating the "x" to a…

48f1a52

…dapt to dark/light theme

darkened the filled green in heatmap when in dark theme

e035bb3

vbakke previously approved these changes May 5, 2025

View reviewed changes

wurstbrot reviewed May 5, 2025

View reviewed changes

final reformatting and improved body.dark-theme nesting in scss; also…

a961553

… fixed my GPG key signature for contribution - Manny

aguero-tech dismissed vbakke’s stale review via a961553 May 8, 2025 17:13

changed the dependency graph node from yellow to #666666 when in dark…

1277ef3

… mode. Also subscribed the dependency graph text to theme.service to dynamically change text color w/o refresh. Basic Linting.

wurstbrot merged commit 87d6312 into devsecopsmaturitymodel:master May 9, 2025
2 checks passed

Uh oh!

Dark Theme v2.0 #381

Dark Theme v2.0 #381

Uh oh!

Conversation

aguero-tech commented Mar 25, 2025

Uh oh!

aguero-tech commented Mar 25, 2025

Uh oh!

vbakke commented Mar 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vbakke commented Mar 30, 2025

Uh oh!

aguero-tech commented Mar 30, 2025

Uh oh!

vbakke commented Mar 31, 2025

Uh oh!

0x41head commented Mar 31, 2025

Uh oh!

vbakke commented Apr 13, 2025

Uh oh!

aguero-tech commented Apr 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vbakke commented Apr 18, 2025

Uh oh!

vbakke left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

aguero-tech commented Apr 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vbakke left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

aguero-tech commented Apr 30, 2025

Uh oh!

vbakke left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

aguero-tech commented May 5, 2025

Uh oh!

vbakke left a comment

Choose a reason for hiding this comment

Uh oh!

wurstbrot May 5, 2025

Choose a reason for hiding this comment

Uh oh!

aguero-tech May 8, 2025

Choose a reason for hiding this comment

Uh oh!

wurstbrot May 5, 2025

Choose a reason for hiding this comment

Uh oh!

aguero-tech May 8, 2025

Choose a reason for hiding this comment

Uh oh!

wurstbrot May 5, 2025

Choose a reason for hiding this comment

Uh oh!

aguero-tech May 8, 2025

vbakke commented Mar 30, 2025 •

edited

Loading

aguero-tech commented Apr 18, 2025 •

edited

Loading

aguero-tech commented Apr 23, 2025 •

edited

Loading

vbakke left a comment •

edited

Loading

aguero-tech commented May 8, 2025 •

edited

Loading