Adding general properties for text in dark theme. (custome-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.

Author: aguero-tech

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

@@ -78,7 +78,8 @@
   grid-column: 2/3;
   grid-row: 1/4;
   display: grid;
-  justify-content: top;
+  justify-content: center;
+  align-items: start;
   margin-left: auto;
 }
 .team-filter {
@@ -161,6 +162,6 @@ button.filter-toggle {
 
   .overlay-details {
     width: 100%;
-  }  
+  }
 
 }

src/app/component/matrix/matrix.component.css

@@ -61,9 +61,20 @@
 .tags-activity {
   font-weight: 800;
   font-style: italic;
-  color: rgb(0, 113, 151);
   font-size: 12px;
 }
+/*tag activity - light */
+:host-context(body.light-theme) .tags-activity,
+:host-context(body.light-theme) .tags-activity span {
+  color: rgb(0, 113, 151);
+}
+
+/*tag activity - dark */
+:host-context(body.dark-theme) .tags-activity,
+:host-context(body.dark-theme) .tags-activity span {
+  color: #397af4;
+}
+
 .reset-button {
   background-color: #66bb6a;
   display: block;

src/app/component/teams/teams.component.css

@@ -33,6 +33,7 @@ h3 {
   height: 100px;
   background-color: #66bb6a;
   border-radius: 10px;
+  color: white;
   margin-right: 20px;
   display: flex; /* Use flex layout */
   justify-content: center; /* Center horizontally */

src/custom-theme.scss

@@ -6,13 +6,13 @@
 $light-theme: (
         background: white,
         text: black,
-        link: blue
+        link: blue,
 );
 
 $custom-dark-theme: (
         background: #2c2c2c,
         text: #e0e0e0,
-        link: #bb86fc
+        link: #bb86fc,
 );
 
 $custom-typography: mat.define-typography-level(
@@ -60,6 +60,9 @@ $DSOMM-dark-theme: mat.define-dark-theme((
   a {
     color: map-get($theme, link);
   }
+  a:visited {
+    color: map-get($theme, visited-link);
+  }
 }
 
 // ----------------------------------------------
@@ -100,15 +103,18 @@ body.dark-theme {
 
 
   }
-
+  // General properties
+  p, li, tr {
+    color: #e0e0e0;
+  }
 
   // Common containers
   mat-card,
   .mat-dialog-container,
   .mat-expansion-panel,
   .mat-accordion,
   .overlay-wrapper {
-    background-color: #2c2c2c !important;
+    background-color: #2c2c2c;
     color: #e0e0e0;
   }
 
@@ -120,24 +126,24 @@ body.dark-theme {
 
   // Modal override
   .overlay-modal {
-    background-color: #2c2c2c !important;
+    background-color: #2c2c2c;
     color: #e0e0e0;
     border-radius: 6px;
 
     mat-card {
-      background-color: transparent !important;
+      background-color: transparent;
     }
 
     h1, h2, h3, h4, h5, h6 {
-      color: #e0e0e0 !important;
+      color: #e0e0e0;
     }
   }
 
 
   // Circular heatmap (radar chart)
   .circular-heat text,
   .labels.segment text {
-    fill: #ffffff !important;
+    fill: #ffffff;
   }
 
 
@@ -156,14 +162,6 @@ body.dark-theme {
   --heatmap-cursor-selected:var(--heatmap-cursor);
   --heatmap-cursor-hover: transparent;
 
-  app-matrix a:visited {
-    color: #d4baf4;
-  }
-
-  app-matrix .tags-activity,
-  app-matrix .tags-activity span {
-    color: #397af4;
-  }
 
   .mat-chip.mat-standard-chip {
     color: #ababab;

src/styles.css

@@ -8,6 +8,13 @@ body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
     padding: 0.3em;
 }
 
+.dark-theme .userday table :is(td, th) {
+    border-color: #e0e0e0;
+}
+.dark-theme .userday tr:nth-child(even) {
+    background-color: #365d36;
+}
+
 .userday tr:nth-child(even) {
     background-color: #66bb6a;
 }