diff --git a/www/app/src/components/HomePage.vue b/www/app/src/components/HomePage.vue
index ee7e7c8..43dc357 100644
--- a/www/app/src/components/HomePage.vue
+++ b/www/app/src/components/HomePage.vue
@@ -261,6 +261,7 @@
   </div>
   <section>
     <!-- Wave section started -->
+     <!-- Wave section is not changed in dark mode -->
     <div class="wave_info">
       <div class="wave-background"></div>
       <img
@@ -1012,7 +1013,7 @@ h2 {
 
 a {
   text-decoration: none;
-  color: #fff;
+  color: var(--homepage-text-white);
 }
 
 .badge {
@@ -1021,7 +1022,7 @@ a {
 }
 
 .star_us:hover {
-  background-color: #fcfcfc;
+  background-color: var(--homepage-button-hover-bg);
 }
 
 .star_us_star {
@@ -1054,7 +1055,7 @@ a {
   width: 100%;
   height: 100%;
   gap: 6px;
-  color: #09090b;
+  color: var(--homepage-text-dark);
   font-weight: 500;
   align-items: center;
   justify-content: center;
@@ -1171,13 +1172,9 @@ a {
 /* Header */
 
 .banner {
-  background: rgb(1, 131, 255);
+  background: var(--homepage-bg-fallback);
+  background: var(--homepage-bg-gradient-top);
   z-index: 9;
-  background: linear-gradient(
-    180deg,
-    rgba(1, 131, 255, 0.5214460784313726) -20%,
-    rgba(255, 255, 255, 1) 20%
-  );
   position: relative;
   padding-top: 100px;
 }
@@ -1234,7 +1231,7 @@ a {
 .banner_info_more {
   max-width: 800px;
   font-size: 25px;
-  color: #4d4d4d;
+  color: var(--homepage-text-secondary);
   font-weight: 300;
 }
 
@@ -1260,8 +1257,8 @@ a {
 
 .buttons a {
   width: 220px;
-  background-color: #d6d6d6;
-  color: #fff;
+  background-color: var(--homepage-button-bg);
+  color: var(--homepage-text-white);
   height: 63px;
   border: none;
   display: flex;
@@ -1291,21 +1288,14 @@ a {
 /* Section */
 
 section {
-  background: rgb(1, 131, 255);
-  background: linear-gradient(
-    0deg,
-    rgba(1, 131, 255, 0.5214460784313726) -20%,
-    rgba(255, 255, 255, 1) 16%
-  );
+  background: var(--homepage-bg-fallback);
+  background: var(--homepage-bg-gradient-bottom);
 }
 
 @media (max-width: 600px) {
   section {
-    background: linear-gradient(
-      0deg,
-      rgba(1, 131, 255, 0.5214460784313726) -20%,
-      rgba(255, 255, 255, 1) 14%
-    );
+    background: var(--homepage-bg-fallback);
+    background: var(--homepage-bg-gradient-bottom-mobile);
   }
 }
 
@@ -1392,7 +1382,7 @@ section {
 .card {
   width: 300px;
   height: 150px;
-  background: linear-gradient(180deg, #ffffff 0%, #b2b9f6 100%);
+  background: var(--homepage-card-bg);
   border-radius: 50px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   border-radius: 10px;
@@ -1432,7 +1422,7 @@ section {
   margin-top: 10px;
   font-size: 15px;
   font-weight: 400;
-  color: #4e4e4e;
+  color: var(--homepage-card-text);
 }
 
 @media (max-width: 600px) {
@@ -1455,7 +1445,7 @@ section {
 }
 
 .card a {
-  color: #0183ff;
+  color: var(--homepage-link-blue);
   text-decoration: underline;
 }
 
@@ -1505,7 +1495,7 @@ section {
 .left_article p,
 .right_article p {
   margin-top: 20px;
-  color: #646464;
+  color: var(--homepage-text-muted);
 }
 
 @media (max-width: 600px) {
@@ -1523,7 +1513,8 @@ section {
 /* Progess Bar */
 
 .metrics-wrapper {
-  background: linear-gradient(0deg, #7e71ba 0%, #0183ff 100%);
+  background: var(--homepage-metrics-bg-fallback);
+  background: var(--homepage-metrics-bg);
   padding: 1.3rem 1.5rem;
   color: white;
   margin-top: 100px;
@@ -1691,7 +1682,7 @@ section {
   align-items: center;
   justify-content: center;
   flex-direction: column;
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--homepage-metrics-text);
 }
 
 .metrics-link {
@@ -1710,7 +1701,7 @@ section {
 
 .metrics-p {
   display: flex;
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--homepage-metrics-text);
 }
 
 /* Text block 1 */
@@ -1760,7 +1751,7 @@ section {
 
 .text_block_1_subtitle {
   font-size: 1.5rem;
-  color: #9ca3af;
+  color: var(--homepage-text-light);
   font-weight: 600;
 }
 
@@ -1790,7 +1781,7 @@ section {
 
 .text_block_1_description {
   font-size: 1.25rem;
-  color: #aeaeae;
+  color: var(--homepage-text-light);
   max-width: 600px;
   margin-bottom: 4rem;
   line-height: 1.7;
@@ -1864,7 +1855,7 @@ section {
 }
 
 .item-description {
-  color: #9ca3af;
+  color: var(--homepage-text-light);
   font-size: 0.875rem;
   line-height: 1.7;
 }
@@ -1876,7 +1867,7 @@ section {
 }
 
 .item-link {
-  color: #9ca3af;
+  color: var(--homepage-text-light);
   text-decoration: underline;
 }
 
@@ -1903,13 +1894,13 @@ section {
 
 .sample_content h1 {
   font-size: 3.5rem;
-  color: #4e4e4e;
+  color: var(--homepage-card-text);
   font-weight: 600;
 }
 
 .sample_content .sample_highlight {
   display: block;
-  color: #0066ff;
+  color: var(--homepage-sample-highlight);
   font-size: 3.2rem;
 }
 
@@ -1961,7 +1952,7 @@ section {
 }
 
 .sample_button_secondary {
-  background-color: #a5b4fc;
+  background-color: var(--homepage-sample-secondary-bg);
   color: white;
 }
 
@@ -1977,7 +1968,8 @@ section {
 /* Footer */
 
 footer {
-  background: linear-gradient(0deg, #7e71ba 0%, #0183ff 100%);
+  background: var(--homepage-footer-bg-fallback);
+  background: var(--homepage-footer-bg);
   color: white;
   padding: 50px 0 0 0;
 }
@@ -2099,11 +2091,11 @@ footer {
   flex: 1 1 100%;
   margin: 70px 0 25px 0;
   font-size: 0.9em;
-  color: #c8c8c8;
+  color: var(--homepage-footer-text);
   text-align: center;
 }
 .footer_copyright a {
-  color: #c8c8c8;
+  color: var(--homepage-footer-text);
   text-decoration: underline;
 }
 
@@ -2215,7 +2207,7 @@ footer {
 }
 
 .contributors-title {
-  color: #0066ff;
+  color: var(--homepage-sample-highlight);
   font-size: 2.5rem;
   margin-bottom: 80px;
 }
@@ -2268,7 +2260,7 @@ footer {
 }
 
 .contributor-avatar {
-  background-color: #0066ff;
+  background-color: var(--homepage-contributor-bg);
   box-shadow: 0 0 0 8px rgba(0, 102, 255, 0.1);
   cursor: pointer;
   margin-bottom: 20px;
@@ -2291,12 +2283,12 @@ footer {
 }
 
 .contributon-block:hover .contributor-name {
-  color: #0066ff;
+  color: var(--homepage-sample-highlight);
 }
 
 .contributor-name {
   font-size: 0.875rem;
-  color: #666;
+  color: var(--homepage-contributor-text);
   text-align: center;
 }
 
diff --git a/www/app/src/pages/index.astro b/www/app/src/pages/index.astro
index 6c56c6b..696f899 100644
--- a/www/app/src/pages/index.astro
+++ b/www/app/src/pages/index.astro
@@ -29,7 +29,7 @@
     margin: 0;
   }
   :global(.main-frame) {
-    padding: 0 !important;   
+    padding: 0 !important;
     margin: 0 !important;
   }
 </style>
@@ -38,13 +38,9 @@
   <div id="app"></div>
 </StarlightPage>
 
-<script is:inline>
-  document.documentElement.dataset.theme = 'light';
-</script>
-
 <script>
   import { createApp } from 'vue'
   import LandingPage from '../components/HomePage.vue'
 
   createApp(LandingPage).mount('#app')
-</script>
\ No newline at end of file
+</script>
diff --git a/www/app/src/styles/main.css b/www/app/src/styles/main.css
index e586254..392b5dd 100644
--- a/www/app/src/styles/main.css
+++ b/www/app/src/styles/main.css
@@ -13,3 +13,93 @@
 .nova-header-search {
   position: relative;
 }
+
+/* Homepage Theme Variables - Light Mode */
+:root[data-theme="light"] {
+  --homepage-bg-primary: #ffffff;
+  --homepage-bg-secondary: rgba(1, 131, 255, 0.5214460784313726);
+  --homepage-bg-fallback: rgb(1, 131, 255);
+  --homepage-bg-gradient-top: linear-gradient(180deg, rgba(1, 131, 255, 0.5214460784313726) -20%, rgba(255, 255, 255, 1) 20%);
+  --homepage-bg-gradient-bottom: linear-gradient(0deg, rgba(1, 131, 255, 0.5214460784313726) -20%, rgba(255, 255, 255, 1) 16%);
+  --homepage-bg-gradient-bottom-mobile: linear-gradient(0deg, rgba(1, 131, 255, 0.5214460784313726) -20%, rgba(255, 255, 255, 1) 14%);
+
+  /* Text Colors */
+  --homepage-text-primary: #000000;
+  --homepage-text-secondary: #4d4d4d;
+  --homepage-text-muted: #646464;
+  --homepage-text-light: #9ca3af;
+  --homepage-text-white: #ffffff;
+  --homepage-text-dark: #09090b;
+
+  /* Card & Component Colors */
+  --homepage-card-bg: linear-gradient(180deg, #ffffff 0%, #b2b9f6 100%);
+  --homepage-card-text: #4e4e4e;
+
+  /* Button & Link Colors */
+  --homepage-button-bg: #d6d6d6;
+  --homepage-button-hover-bg: #fcfcfc;
+  --homepage-link-blue: #0183ff;
+
+  /* Metric Section */
+  --homepage-metrics-bg-fallback: #7e71ba;
+  --homepage-metrics-bg: linear-gradient(0deg, #7e71ba 0%, #0183ff 100%);
+  --homepage-metrics-text: rgba(255, 255, 255, 0.7);
+
+  /* Footer */
+  --homepage-footer-bg-fallback: #7e71ba;
+  --homepage-footer-bg: linear-gradient(0deg, #7e71ba 0%, #0183ff 100%);
+  --homepage-footer-text: #c8c8c8;
+
+  /* Contributors */
+  --homepage-contributor-bg: #0066ff;
+  --homepage-contributor-text: #666;
+
+  /* Sample Section */
+  --homepage-sample-highlight: #0066ff;
+  --homepage-sample-secondary-bg: #a5b4fc;
+}
+
+/* Homepage Theme Variables - Dark Mode */
+:root[data-theme="dark"] {
+  --homepage-bg-primary: #0c0e16;
+  --homepage-bg-secondary: rgba(1, 131, 255, 0.3);
+  --homepage-bg-fallback: rgb(1, 131, 255);
+  --homepage-bg-gradient-top: linear-gradient(180deg, rgba(1, 131, 255, 0.3) -20%, rgba(12, 14, 22, 1) 20%);
+  --homepage-bg-gradient-bottom: linear-gradient(0deg, rgba(1, 131, 255, 0.3) -20%, rgba(12, 14, 22, 1) 16%);
+  --homepage-bg-gradient-bottom-mobile: linear-gradient(0deg, rgba(1, 131, 255, 0.3) -20%, rgba(12, 14, 22, 1) 14%);
+
+  /* Text Colors */
+  --homepage-text-primary: #ffffff;
+  --homepage-text-secondary: #b8b9bf;
+  --homepage-text-muted: #9ca3af;
+  --homepage-text-light: #6b7280;
+  --homepage-text-white: #ffffff;
+  --homepage-text-dark: #f3f4f6;
+
+  /* Card & Component Colors */
+  --homepage-card-bg: linear-gradient(180deg, #1a1d29 0%, #252a3a 100%);
+  --homepage-card-text: #d1d5db;
+
+  /* Button & Link Colors */
+  --homepage-button-bg: #374151;
+  --homepage-button-hover-bg: #2d3748;
+  --homepage-link-blue: #60a5fa;
+
+  /* Metric Section */
+  --homepage-metrics-bg-fallback: #4c1d95;
+  --homepage-metrics-bg: linear-gradient(0deg, #4c1d95 0%, #1e40af 100%);
+  --homepage-metrics-text: rgba(255, 255, 255, 0.8);
+
+  /* Footer */
+  --homepage-footer-bg-fallback: #4c1d95;
+  --homepage-footer-bg: linear-gradient(0deg, #4c1d95 0%, #1e40af 100%);
+  --homepage-footer-text: #9ca3af;
+
+  /* Contributors */
+  --homepage-contributor-bg: #3b82f6;
+  --homepage-contributor-text: #9ca3af;
+
+  /* Sample Section */
+  --homepage-sample-highlight: #60a5fa;
+  --homepage-sample-secondary-bg: #4f46e5;
+}