diff --git a/webiu-ui/src/app/components/navbar/navbar.component.html b/webiu-ui/src/app/components/navbar/navbar.component.html
index d94e6ab7..5ea18965 100644
--- a/webiu-ui/src/app/components/navbar/navbar.component.html
+++ b/webiu-ui/src/app/components/navbar/navbar.component.html
@@ -1,5 +1,5 @@
 <div class="navbar">
-  <img src="../../../assets/c2silogo-dark.png" alt="C2SI Logo" class="logo" />
+  <img src="../../../assets/c2silogo-dark_no_bg.png" alt="C2SI Logo" class="logo" />
 
   <div [ngClass]="{ navbar__menu: true, open: isMenuOpen }" id="navbarMenu">
     <div class="navbar__menu__items" routerLink="/">
@@ -26,6 +26,14 @@
       <img src="../../../assets/gsoc.svg" alt="GSoC Icon" />
       <p>GSoC</p>
     </div>
+      <button class="sun-moon-toggle" aria-label="Toggle color mode" title="Toggle color mode" (click)="toggleMode()">
+        <div class="sun" [class.visible]="isSunVisible"></div>
+  
+        <div class="moon" [class.visible]="!isSunVisible">
+          <div class="star"></div>
+          <div class="star small"></div>
+        </div>
+      </button>
   </div>
 
   <div class="navigation__buttons" (click)="toggleMenu()">
@@ -38,4 +46,4 @@
       <img *ngIf="isMenuOpen" src="../../../assets/cross.svg" alt="cross" />
     </div>
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/webiu-ui/src/app/components/navbar/navbar.component.scss b/webiu-ui/src/app/components/navbar/navbar.component.scss
index c8281d41..b9b8e498 100644
--- a/webiu-ui/src/app/components/navbar/navbar.component.scss
+++ b/webiu-ui/src/app/components/navbar/navbar.component.scss
@@ -4,7 +4,7 @@
   padding: 10px 50px;
   justify-content: space-between;
   align-items: center;
-  background: var(--primary-white, #fff);
+  background: var(--navbar-bg);
   box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.15);
 }
 
@@ -28,7 +28,7 @@
     right: 20px;
     align-items: flex-start;
     width: auto;
-    background: var(--primary-white, #fff);
+    background: var(--navbar-bg);
     box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.15);
     padding: 10px;
     border-radius: 8px;
@@ -43,7 +43,7 @@
     padding: 7px 14px;
     gap: 8px;
     border-radius: 7px;
-    background: var(--primary-white, #fff);
+    background: var(--primary-white, var(--navbar-bg));
     cursor: pointer;
     transition: all 0.2s;
     text-align: center;
@@ -59,6 +59,7 @@
   .navbar__menu__items p {
     margin: 0;
     line-height: 1;
+    color:var(--navbar-p);
   }
 
   /* Active state styling */
@@ -88,6 +89,139 @@
   display: none;
 }
 
+.sun-moon-toggle {
+  width: 46px;
+  height: 46px;
+  box-sizing: border-box;
+  padding: 12px;
+  background: none;
+  border: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+}
+
+.sun {
+  width: 50%;
+  height: 50%;
+  position: absolute;
+  pointer-events: none;
+  opacity: 0;
+  transform: scale(0.6) rotate(0deg);
+  transition: transform 0.3s ease-in, opacity 0.2s ease-in 0.1s;
+  background: radial-gradient(circle, rgba(0, 0, 0, 0) 50%, #fbbc05 50%);
+}
+
+.sun:before {
+  content: "";
+  position: absolute;
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(
+    circle,
+    #fbbc05 30%,
+    rgba(0, 0, 0, 0) 31%,
+    rgba(0, 0, 0, 0) 50%,
+    #fbbc05 51%
+  );
+  transform: rotate(45deg);
+}
+
+.sun.visible {
+  pointer-events: auto;
+  opacity: 1;
+  transform: scale(1) rotate(180deg);
+  transition: transform 0.3s ease-in, opacity 0.2s ease-in 0.1s;
+}
+
+
+.moon {
+  width: 50%;
+  height: 50%;
+  pointer-events: none;
+  position: absolute;
+  left: 12.5%;
+  top: 18.75%;
+  background-color: rgba(0, 0, 0, 0);
+  border-radius: 50%;
+  box-shadow: 9px 3px 0px 0px #f0f0f0;
+  opacity: 0;
+  transform: scale(0.3) rotate(65deg);
+  transition: transform 0.3s ease-in, opacity 0.2s ease-in 0.1s;
+}
+
+.moon.visible {
+  pointer-events: auto;
+  opacity: 1;
+  transform: scale(1) rotate(0deg);
+  transition: transform 0.3s ease-in, opacity 0.2s ease-in 0.1s;
+}
+
+.star {
+  position: absolute;
+  top: 25%;
+  left: 5%;
+  display: block;
+  width: 0px;
+  height: 0px;
+  border-right: 7px solid rgba(0, 0, 0, 0);
+  border-bottom: 5px solid #f0f0f0;
+  border-left: 7px solid rgba(0, 0, 0, 0);
+  transform: scale(0.55) rotate(35deg);
+  opacity: 0;
+  transition: all 0.2s ease-in 0.4s;
+}
+
+.star:before {
+  border-bottom: 5px solid #f0f0f0;
+  border-left: 3px solid rgba(0, 0, 0, 0);
+  border-right: 3px solid rgba(0, 0, 0, 0);
+  position: absolute;
+  height: 0;
+  width: 0;
+  top: -3px;
+  left: -5px;
+  display: block;
+  content: "";
+  transform: rotate(-35deg);
+}
+
+.star:after {
+  position: absolute;
+  display: block;
+  color: red;
+  top: 0px;
+  left: -7px;
+  width: 0px;
+  height: 0px;
+  border-right: 7px solid rgba(0, 0, 0, 0);
+  border-bottom: 5px solid #f0f0f0;
+  border-left: 7px solid rgba(0, 0, 0, 0);
+  transform: rotate(-70deg);
+  content: "";
+}
+
+.moon.visible .star {
+  opacity: 0.8;
+}
+
+.star.small {
+  transform: scale(0.35) rotate(35deg);
+  position: relative;
+  top: 50%;
+  left: 37.5%;
+  opacity: 0;
+  transition: all 0.2s ease-in 0.45s;
+}
+
+.moon.visible .star.small {
+  opacity: 0.7;
+  transform: scale(0.45) rotate(35deg);
+}
+
 @media (max-width: 1100px) {
   .navbar__menu {
     display: none !important;
@@ -101,3 +235,4 @@
     display: block !important;
   }
 }
+
diff --git a/webiu-ui/src/app/components/navbar/navbar.component.ts b/webiu-ui/src/app/components/navbar/navbar.component.ts
index 6b61d78a..6b590702 100644
--- a/webiu-ui/src/app/components/navbar/navbar.component.ts
+++ b/webiu-ui/src/app/components/navbar/navbar.component.ts
@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
+import { ThemeService } from '../../services/theme.service';
 
 @Component({
   selector: 'app-navbar',
@@ -11,8 +12,18 @@ import { RouterModule } from '@angular/router';
 })
 export class NavbarComponent {
   isMenuOpen = false;
-
+  isSunVisible = true; 
   toggleMenu() {
     this.isMenuOpen = !this.isMenuOpen;
   }
+  constructor(private themeService: ThemeService) {
+    this.isSunVisible = !this.themeService.isDarkMode();
+  }
+  toggleTheme(): void {
+    this.themeService.toggleDarkMode();
+  }
+  toggleMode() {
+    this.isSunVisible = !this.isSunVisible;
+    this.toggleTheme();
+  }
 }
diff --git a/webiu-ui/src/app/components/profile-card/profile-card.component.scss b/webiu-ui/src/app/components/profile-card/profile-card.component.scss
index b9c6a4a9..2b011612 100644
--- a/webiu-ui/src/app/components/profile-card/profile-card.component.scss
+++ b/webiu-ui/src/app/components/profile-card/profile-card.component.scss
@@ -1,7 +1,8 @@
 .profile-box {
   display: flex;
-  border: solid 1px #e0e0e0;
-  box-shadow: 10px 10px 30px 10px #0505051a;
+  border: solid 1px var(--profile-box-border);
+  background-color: var(--profile-box-bg);
+  box-shadow: 10px 10px 30px 10px var(--profile-github-box-shadow);
   border-radius: 10px;
   width: 100%;
   max-width: 350px;
@@ -33,7 +34,7 @@
   align-items: center;
   gap: 10px;
   border-radius: 5px;
-  background: var(--Gray-6, #eeecec);
+  background: var(--profile-github-bg);
   padding: 8px 12px;
   justify-content: center;
   margin-top: 5%;
@@ -43,12 +44,17 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  svg {
+    path {
+      fill: var(--profile-github-username);
+    }
+  }
 }
 
 .github-username {
   display: flex;
   align-items: center;
-  color: black;
+  color: var(--profile-github-username);
 }
 
 /* Media Queries */
diff --git a/webiu-ui/src/app/components/projects-card/projects-card.component.scss b/webiu-ui/src/app/components/projects-card/projects-card.component.scss
index 2c5e6562..3a0bc281 100644
--- a/webiu-ui/src/app/components/projects-card/projects-card.component.scss
+++ b/webiu-ui/src/app/components/projects-card/projects-card.component.scss
@@ -6,8 +6,8 @@
   justify-content: space-between;
   gap: 20px;
   border-radius: 8px;
-  border: 2px solid var(--primary-white, #fff);
-  background: var(--primary-white, #fff);
+  border: 2px solid var(--border-color, #fff);
+  background: var(--card-container-2, #fff);
   box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.1);
 
   .projects__card__main {
@@ -71,10 +71,11 @@
           gap: 8px;
           color: var(--primary-dark, var(--primary-dark, #0a0a15));
           border-radius: 4px;
-          border: 1px solid var(--Gray-5, #e0e0e0);
-          background: var(--Gray-6, #f2f2f2);
+          border: 1px solid var(--card-button-border);
+          background: var(--card-button-bg);
 
           p {
+            color: var(--card-color-p);
             width: 100px;
             font-size: 14px;
             font-weight: 500;
@@ -86,9 +87,12 @@
             font-size: 14px;
             font-weight: 400;
             border-radius: 20px;
-            background: var(--primary-white, #fff);
+            background: var(--card-span, #fff);
             padding: 6px;
           }
+          svg path {
+            fill: var(--card-color-p); /* Apply dynamic fill color */
+          }
         }
 
         .issue-btn {
@@ -100,23 +104,28 @@
           border-radius: 4px;
           color: var(--primary-dark, var(--primary-dark, #0a0a15));
 
-          border: 1px solid var(--Gray-5, #e0e0e0);
-          background: var(--Gray-6, #f2f2f2);
+          border: 1px solid var(--card-button-border);
+          background: var(--card-button-bg);
 
           span {
             color: var(--primary-dark, var(--primary-dark, #0a0a15));
             font-size: 14px;
             font-weight: 400;
             border-radius: 20px;
-            background: var(--primary-white, #fff);
+            background: var(--card-span, #fff);
             padding: 6px;
           }
 
           p {
+            color: var(--card-color-p);
             font-size: 14px;
             font-weight: 500;
             line-height: 150%;
           }
+          svg path {
+            fill: var(--card-color-p); /* Apply dynamic fill color */
+          }
+
         }
 
         .git-btn {
@@ -149,10 +158,14 @@
       align-items: center;
       gap: 10px;
       border-radius: 28px;
-      border: 1px solid var(--Gray-5, #e0e0e0);
-      background: var(--primary-white, #fff);
+      border: 1px solid var(--card-drop-button-border);
+      background: var(--card-drop-button-bg);
       box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.1);
       transition: transform 0.3s ease;
+
+      svg path {
+        fill: var(--card-drop-button-svg);
+      }
     }
 
     .projects__card__open__btn.rotate-90 {
@@ -181,8 +194,9 @@
 
       .projects__card__tag {
         font-size: 12px;
-        border: 2px solid rgba(0, 0, 0, 0.1);
-        background-color: #f6f6f6;
+        border: 2px solid var(--card-drop-tag-border);
+        background-color: var(--card-drop-tag-bg);
+        color:var(--card-color-p);
         // box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.2);
         padding: 4px 6px;
         border-radius: 20px;
diff --git a/webiu-ui/src/app/components/publications-card/publications-card.component.scss b/webiu-ui/src/app/components/publications-card/publications-card.component.scss
index e24b16db..80b51b1b 100644
--- a/webiu-ui/src/app/components/publications-card/publications-card.component.scss
+++ b/webiu-ui/src/app/components/publications-card/publications-card.component.scss
@@ -6,9 +6,9 @@
   align-items: flex-start;
   gap: 20px;
   border-radius: 8px;
-  border: 2px solid var(--primary-white, #fff);
-  background: var(--primary-white, #fff);
-  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.1);
+  border: 2px solid var(--publications-card-border);
+  background: var(--publications-card-bg);
+  box-shadow: 0px 4px 24px 0px var(--publications-card-box-shadow);
   width: 500px;
 
   a {
diff --git a/webiu-ui/src/app/page/community/community.component.scss b/webiu-ui/src/app/page/community/community.component.scss
index b51763e2..f91ba937 100644
--- a/webiu-ui/src/app/page/community/community.component.scss
+++ b/webiu-ui/src/app/page/community/community.component.scss
@@ -74,8 +74,8 @@
           align-items: flex-start;
           gap: 5px;
           border-radius: 10px;
-          border: 1px solid var(--Gray-5, #e0e0e0);
-          background: var(--primary-white, #fff);
+          border: 1px solid var(--community-card-border);
+          background: var(--community-card-bg);
           box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.1);
 
           .card-data {
diff --git a/webiu-ui/src/app/page/contributors/contributors.component.scss b/webiu-ui/src/app/page/contributors/contributors.component.scss
index 15a36230..075afab4 100644
--- a/webiu-ui/src/app/page/contributors/contributors.component.scss
+++ b/webiu-ui/src/app/page/contributors/contributors.component.scss
@@ -28,21 +28,21 @@
           flex: 1;
           padding: 14px 24px;
           border-radius: 12px;
-          border: 1px solid #e5e5e5;
-          background: #f5f5f5;
+          border: 1px solid var(--search-border);
+          background: var(--search-bg);
           font-size: 16px;
-          color: #1a1a1a;
+          color: var(--search-color);
           outline: none;
           transition: all 0.2s ease;
 
           &::placeholder {
-            color: #1a1a1a;
+            color: var(--search-color);
             opacity: 0.5;
           }
 
           &:focus {
             border-color: #0066ff;
-            background: #ffffff;
+            background: var(--search-bg);
           }
         }
 
@@ -77,23 +77,23 @@
       gap: 12px;
 
       span {
-        color: var(--gray-900);
+        color: var(--filter-section-color);
         font-size: 14px;
       }
 
       .repository-select {
-        background-color: #e9f6ff;
+        background-color: var(--select-bg);
         max-width: 300px;
       }
 
       select {
         padding: 8px 16px;
-        border: 1px solid var(--gray-200);
+        border: 1px solid var(--select-border);
         border-radius: 6px;
         font-size: 14px;
         cursor: pointer;
         outline: none;
-
+        color: var(--search-color);
         &:focus {
           border-color: var(--primary-blue);
         }
@@ -121,9 +121,9 @@
       font-size: 16px;
       cursor: pointer;
       transition: background-color 0.2s ease;
-
+      
       &:disabled {
-        background-color: var(--gray-200);
+        opacity: 0; // Hide button when disabled 
         cursor: not-allowed;
       }
 
@@ -134,7 +134,7 @@
 
     span {
       font-size: 16px;
-      color: var(--gray-900);
+      color: var(--pagination-span);
     }
   }
 
diff --git a/webiu-ui/src/app/page/gsoc/gsoc.component.html b/webiu-ui/src/app/page/gsoc/gsoc.component.html
index 031c0c20..844a31c1 100644
--- a/webiu-ui/src/app/page/gsoc/gsoc.component.html
+++ b/webiu-ui/src/app/page/gsoc/gsoc.component.html
@@ -9,7 +9,7 @@ <h1>C2SI GSOC 2024</h1>
         page.
       </p>
     </div>
-    <img src="../../../assets/gsoc.png" alt="GSOC" />
+    <img src="../../../assets/gsoc_no_bg.png" alt="GSOC" />
   </div>
 
   <div class="gsoc__details">
diff --git a/webiu-ui/src/app/page/gsoc/gsoc.component.scss b/webiu-ui/src/app/page/gsoc/gsoc.component.scss
index 1a3630bc..0caf1cae 100644
--- a/webiu-ui/src/app/page/gsoc/gsoc.component.scss
+++ b/webiu-ui/src/app/page/gsoc/gsoc.component.scss
@@ -62,7 +62,7 @@
         font-size: 16px;
         font-style: italic;
         font-weight: 400;
-        line-height: 150%;
+        line-height: 150%; 
       }
     }
   }
@@ -73,7 +73,7 @@
     flex-direction: column;
     gap: 20px;
     border-radius: 10px;
-    background: var(--Gray-6, #f2f2f2);
+    background: var(--gsoc-project-list-bg);
     box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05) inset;
     margin: 30px 16px;
 
@@ -82,9 +82,9 @@
       padding: 16px;
       align-items: center;
       border-radius: 8px;
-      border: 2px solid var(--primary-white, #fff);
-      background: var(--primary-white, #fff);
-      box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.1);
+      border: 2px solid var(--primary-white, var(--gsoc-project-list-border));
+      background: var(--primary-white, var(--gsoc-project-list-bg-2));
+      box-shadow: 0px 4px 24px 0px var(--gsoc-project-list-box-shadow);
 
       p {
         font-size: 16px;
diff --git a/webiu-ui/src/app/page/projects/projects.component.scss b/webiu-ui/src/app/page/projects/projects.component.scss
index 7e558026..75b46a60 100644
--- a/webiu-ui/src/app/page/projects/projects.component.scss
+++ b/webiu-ui/src/app/page/projects/projects.component.scss
@@ -35,7 +35,7 @@
     flex-direction: column;
     gap: 30px;
     border-radius: 10px;
-    background: var(--Gray-6, #f2f2f2);
+    background: var(--cards-container);
     box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05) inset;
   }
 }
diff --git a/webiu-ui/src/app/services/theme.service.spec.ts b/webiu-ui/src/app/services/theme.service.spec.ts
new file mode 100644
index 00000000..1c2957ba
--- /dev/null
+++ b/webiu-ui/src/app/services/theme.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ThemeService } from './theme.service';
+
+describe('ThemeService', () => {
+  let service: ThemeService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ThemeService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/webiu-ui/src/app/services/theme.service.ts b/webiu-ui/src/app/services/theme.service.ts
new file mode 100644
index 00000000..5e40a19b
--- /dev/null
+++ b/webiu-ui/src/app/services/theme.service.ts
@@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ThemeService {
+  private readonly DARK_MODE_KEY = 'dark-mode';
+
+  constructor() {
+    const isDarkMode = localStorage.getItem(this.DARK_MODE_KEY) === 'true';
+    if (isDarkMode) {
+      document.documentElement.setAttribute('data-theme', 'dark');
+    }
+  }
+  
+  toggleDarkMode(): void {
+    const isDarkMode = document.documentElement.getAttribute('data-theme') === 'dark';
+    if (isDarkMode) {
+      document.documentElement.removeAttribute('data-theme');
+      localStorage.setItem(this.DARK_MODE_KEY, 'false');
+    } else {
+      document.documentElement.setAttribute('data-theme', 'dark');
+      localStorage.setItem(this.DARK_MODE_KEY, 'true');
+    }
+  }
+  
+  isDarkMode(): boolean {
+    return document.documentElement.getAttribute('data-theme') === 'dark';
+  }
+  
+}
\ No newline at end of file
diff --git a/webiu-ui/src/assets/c2silogo-dark_no_bg.png b/webiu-ui/src/assets/c2silogo-dark_no_bg.png
new file mode 100644
index 00000000..94f54ded
Binary files /dev/null and b/webiu-ui/src/assets/c2silogo-dark_no_bg.png differ
diff --git a/webiu-ui/src/assets/gsoc_no_bg.png b/webiu-ui/src/assets/gsoc_no_bg.png
new file mode 100644
index 00000000..e056e056
Binary files /dev/null and b/webiu-ui/src/assets/gsoc_no_bg.png differ
diff --git a/webiu-ui/src/styles.scss b/webiu-ui/src/styles.scss
index 161bb28e..61b86ebd 100644
--- a/webiu-ui/src/styles.scss
+++ b/webiu-ui/src/styles.scss
@@ -16,7 +16,51 @@ body {
 :root {
   --primary-color: #3498db;
   --secondary-color: #2ecc71;
-  --font-color-dark: #333;
+  --primary-dark: #0a0a15; // #0a0a15
+  --card-dark-2: #1b1b28; //#1b1b28
+  --font-light: #898989; // #898989
+  --font-color-dark: #333; // #333
+  --native-dark-bg-color: #181a1b;
+  --cards-container:#f2f2f2; // #f2f2f2
+  --card-container-2: #fff;
+  --border-color: #fff;
+  --card-color-p: var(var(--font-color-dark));
+  --card-span: #dddddd;
+  --card-button-bg: var(--Gray-6, #f2f2f2);
+  --card-color-p:#0a0a15;
+  --card-button-border:#e0e0e0;
+  --card-drop-button-border:#e0e0e0;
+  --card-drop-button-bg:#fff;
+  --card-drop-button-svg:black;
+  --card-drop-tag-border:rgba(0, 0, 0, 0.1);
+  --card-drop-tag-bg:#f6f6f6;
+  --publications-card-bg: #fff;
+  --publications-card-color: #333;
+  --publications-card-border: #fff;
+  --publications-card-border-link:#0a0a15;
+  --publications-card-box-shadow:rgba(0, 0, 0, 0.1);
+  --search-bg: #f5f5f5;
+  --search-border: #e5e5e5;
+  --search-color: #1a1a1a;
+  --select-border: #ddd;
+  --select-bg:#e9f6ff;
+  --filter-section-color:#1a1a1a; 
+  --profile-box-border:#e0e0e0; 
+  --profile-github-bg:#eeecec;
+  --profile-github-username:black;
+  --profile-github-box-shadow: #0505051a;
+  --pagination-span:#1a1a1a;
+  --community-card-bg:#fff;
+  --community-card-border:#e0e0e0;
+  --profile-box-bg: #fff;
+  --font-color-list: #333;
+  --font-color-p:var(--font-color-dark);
+  --gsoc-project-list-bg:#f2f2f2;
+  --gsoc-project-list-bg-2:#fff;
+  --gsoc-project-list-border:#fff;
+  --gsoc-project-list-box-shadow:rgba(0, 0, 0, 0.1);
+  --navbar-bg:#fff;
+  --navbar-p:var(--font-color-dark);
   --hover-color: #0892ed;
   --font-color-light: #fff;
   --background-light: #f9f9f9;
@@ -28,16 +72,61 @@ body {
   --line-height-lg: 1.8;
   --spacing: 16px;
 }
-
-[data-theme="dark"] {
-  --primary-color: #2980b9;
-  --secondary-color: #27ae60;
-  --font-color-dark: #f9f9f9;
-  --background-dark: #1a1a1a;
-  background-color: var(--background-dark);
-  color: var(--font-color-dark);
+[data-theme="dark"]{
+  background-color: #0A0A15;
+  --primary-dark: #fff;
+  --card-dark-2: #dcdcdc; 
+  --font-light: #b3b3b3;  
+  --font-color-dark: #e0e0e0;
+  --cards-container: #1B1B28;
+  --card-container-2: #11111E;
+  --card-button-bg: #1B1B28;
+  --native-dark-border-color: #555555;
+  --border-color: #282A3B;
+  --card-color-p: #ffffff;
+  --card-span: #11111E;
+  --card-button-border:#282A3B;
+  --card-drop-button-border:#FFFFFF33;
+  --card-drop-button-bg:#1B1B28;
+  --card-drop-button-svg:#fff;
+  --card-drop-tag-border:#282A3B;
+  --card-drop-tag-bg:#1B1B28;
+  --publications-card-bg: #1B1B28;
+  --publications-card-border: #282A3B;
+  --publications-card-border-link:#8db2e5;
+  --search-bg: #1B1B28;
+  --search-border: #282A3B;
+  --search-color: #d8d4cf;
+  --select-border: #282A3B;
+  --select-bg:#1B1B28;
+  --filter-section-color:#e8e6e3;
+  --profile-box-border:#282A3B; 
+  --profile-box-bg:#1B1B28;
+  --profile-github-bg:#219653;
+  --profile-github-username:white;
+  --profile-github-box-shadow:#292c4949;
+  --pagination-span:#e8e6e3;
+  --community-card-bg:#1B1B28;
+  --community-card-border:#282A3B;
+  --font-color-list: #e8e6e3;
+  --font-color-p:var(--font-color-light);
+  --gsoc-project-list-bg:#1B1B28;
+  --gsoc-project-list-bg-2:#11111E;
+  --gsoc-project-list-border:#282A3B;
+  --gsoc-project-list-box-shadow:#292c4949;
+  --navbar-bg:#11111E;
+  --navbar-p:var(--font-color-light);
+  --publications-card-box-shadow:none;
+}
+[data-theme="dark"] .navbar__menu__items img {
+    filter: invert(1);
+  }
+[data-theme="dark"] .navbar .logo {
+      filter: invert(1); 
+}
+[data-theme="dark"] .nav-btn {
+  filter: invert(1); 
 }
-
 h1,
 h2,
 h3,
@@ -49,7 +138,7 @@ h6 {
 }
 
 p {
-  color: var(--font-color-dark);
+  color: var(--font-color-p);
 }
 
 a {
@@ -201,7 +290,9 @@ nav ul {
   gap: 1.5rem;
   margin: 0;
 }
-
+li {
+  color: var(--font-color-list);
+}
 nav ul li a {
   color: var(--font-color-light);
   text-decoration: none;