Fix dark mode text visibility in ActivityList component

Author: vamsidharpanithi

public/index.css

@@ -328,6 +328,68 @@ body.bm-dashboard-dark .page-item.active .page-link {
   color: #ffffff !important;
 }
 
+/* Activity List Dark Mode Overrides */
+body.dark-mode .activity-list-container,
+body.bm-dashboard-dark .activity-list-container {
+  background-color: #1b2a41 !important;
+  color: #ffffff !important;
+}
+
+body.dark-mode .activity-list-container h1,
+body.bm-dashboard-dark .activity-list-container h1 {
+  color: #ffffff !important;
+}
+
+body.dark-mode .activity-list-container input,
+body.bm-dashboard-dark .activity-list-container input {
+  background-color: #3a506b !important;
+  border-color: #4a6072 !important;
+  color: #ffffff !important;
+}
+
+body.dark-mode .activity-list-container input::placeholder,
+body.bm-dashboard-dark .activity-list-container input::placeholder {
+  color: #b8c5d1 !important;
+}
+
+body.dark-mode .activity-list-container label,
+body.bm-dashboard-dark .activity-list-container label {
+  color: #ffffff !important;
+}
+
+body.dark-mode .activity-list-container ul li,
+body.bm-dashboard-dark .activity-list-container ul li {
+  background-color: #3a506b !important;
+  border-color: #4a6072 !important;
+  color: #ffffff !important;
+}
+
+body.dark-mode .activity-list-container ul li strong,
+body.bm-dashboard-dark .activity-list-container ul li strong {
+  color: #ffffff !important;
+}
+
+body.dark-mode .activity-list-container ul li span,
+body.bm-dashboard-dark .activity-list-container ul li span {
+  color: #d1d8e0 !important;
+}
+
+body.dark-mode .activity-list-container button,
+body.bm-dashboard-dark .activity-list-container button {
+  color: #ffffff !important;
+  background: transparent !important;
+}
+
+body.dark-mode .activity-list-container .activity-item,
+body.bm-dashboard-dark .activity-list-container .activity-item {
+  color: #ffffff !important;
+}
+
+body.dark-mode .activity-list-container p,
+body.bm-dashboard-dark .activity-list-container p {
+  color: #ffffff !important;
+}
+
 /* Fix the position of the header at the top */
 .top {
     position: fixed;

src/components/CommunityPortal/Activities/ActivityList.module.css

@@ -96,6 +96,81 @@
   margin: 20px 0;
 }
 
+/* Dark Mode Styles */
+:global(body.dark-mode) .body,
+:global(body.bm-dashboard-dark) .body {
+  background-color: #1b2a41 !important;
+  color: #ffffff !important;
+}
+
+:global(body.dark-mode) .h1,
+:global(body.bm-dashboard-dark) .h1 {
+  color: #ffffff !important;
+}
+
+:global(body.dark-mode) .filters,
+:global(body.bm-dashboard-dark) .filters {
+  background: #2e5061 !important;
+  color: #ffffff !important;
+}
+
+:global(body.dark-mode) .filters label,
+:global(body.bm-dashboard-dark) .filters label {
+  color: #ffffff !important;
+}
+
+:global(body.dark-mode) .filters input,
+:global(body.bm-dashboard-dark) .filters input {
+  background-color: #3a506b !important;
+  border-color: #4a6072 !important;
+  color: #ffffff !important;
+}
+
+:global(body.dark-mode) .filters input::placeholder,
+:global(body.bm-dashboard-dark) .filters input::placeholder {
+  color: #b8c5d1 !important;
+}
+
+:global(body.dark-mode) .activityList,
+:global(body.bm-dashboard-dark) .activityList {
+  background: #2e5061 !important;
+  color: #ffffff !important;
+}
+
+:global(body.dark-mode) .activityList li,
+:global(body.bm-dashboard-dark) .activityList li {
+  background-color: #3a506b !important;
+  border-color: #4a6072 !important;
+  color: #ffffff !important;
+}
+
+:global(body.dark-mode) .activityList li strong,
+:global(body.bm-dashboard-dark) .activityList li strong {
+  color: #ffffff !important;
+}
+
+:global(body.dark-mode) .activityList li span,
+:global(body.bm-dashboard-dark) .activityList li span {
+  color: #d1d8e0 !important;
+}
+
+:global(body.dark-mode) .activityList p,
+:global(body.bm-dashboard-dark) .activityList p {
+  color: #ffffff !important;
+}
+
+:global(body.dark-mode) .activityItem,
+:global(body.bm-dashboard-dark) .activityItem {
+  color: #ffffff !important;
+  background: transparent !important;
+  border: none !important;
+}
+
+:global(body.dark-mode) .feedbackText,
+:global(body.bm-dashboard-dark) .feedbackText {
+  color: #b8c5d1 !important;
+}
+
 @media (max-width: 768px) {
   .filters {
     flex-direction: column;

src/components/UserProfile/TeamsAndProjects/UserTeamsTable.jsx

@@ -13,7 +13,7 @@ import { AutoCompleteTeamCode } from './AutoCompleteTeamCode';
 
 import ToggleSwitch from '../UserProfileEdit/ToggleSwitch';
 
-import './../../Teams/Team.css';
+import './../../Teams/Team.module.css';
 import { TeamMember } from './TeamMember';
 import axios from 'axios';
 import { ENDPOINTS } from '~/utils/URL.js';