diff --git a/_includes/theme-toggle.html b/_includes/theme-toggle.html
new file mode 100644
index 0000000000..86556754f8
--- /dev/null
+++ b/_includes/theme-toggle.html
@@ -0,0 +1,63 @@
+<style>
+.theme-toggle-item {
+  display: flex;
+  align-items: center;
+  margin-left: 10px;
+}
+
+.theme-toggle-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.theme-toggle {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  color: var(--text-primary);
+  padding: 0;
+  position: relative;
+  z-index: 1000;
+}
+
+.theme-toggle:hover {
+  background: var(--bg-tertiary);
+  transform: scale(1.05);
+}
+
+.theme-toggle svg {
+  pointer-events: none; /* Prevent SVG from blocking clicks */
+}
+
+.theme-icon-dark {
+  display: none;
+}
+
+[data-theme="dark"] .theme-icon-light {
+  display: none;
+}
+
+[data-theme="dark"] .theme-icon-dark {
+  display: block;
+}
+
+/* Ensure proper alignment in navbar */
+.navbar-nav .theme-toggle-item {
+  padding: 8px 0;
+}
+
+/* Mobile responsiveness */
+@media (max-width: 768px) {
+  .theme-toggle-item {
+    margin: 10px 15px;
+    justify-content: center;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/_sass/_base.scss b/_sass/_base.scss
index 4eb9050523..934d4e619a 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -17,14 +17,15 @@ dl, dd, ol, ul, figure {
  */
 body {
     font: $base-font-weight list.slash($base-font-size, $base-line-height) $base-font-family;
-    color: $text-color;
-    background-color: $background-color;
+    color: var(--text-primary);   
+    background-color: var(--bg-primary);
     -webkit-text-size-adjust: 100%;
     -webkit-font-feature-settings: "kern" 1;
     -moz-font-feature-settings: "kern" 1;
     -o-font-feature-settings: "kern" 1;
     font-feature-settings: "kern" 1;
     font-kerning: normal;
+    transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 
@@ -93,15 +94,15 @@ h1, h2, h3, h4, h5, h6 {
  * Links
  */
 a {
-    color: $brand-color;
+    color: var(--link-color);
     text-decoration: none;
 
     &:visited {
-        color: darken($brand-color, 15%);
+        color: var(--link-color);
     }
 
     &:hover {
-        color: $text-color;
+        color: var(--link-hover);
         text-decoration: underline;
     }
 }
@@ -112,8 +113,8 @@ a {
  * Blockquotes
  */
 blockquote {
-    color: $grey-color;
-    border-left: 4px solid $grey-color-light;
+    color: var(--text-secondary);
+    border-left: 4px solid var(--border-color);
     padding-left: $spacing-unit * 0.5;
     font-size: 18px;
     letter-spacing: -1px;
@@ -132,9 +133,9 @@ blockquote {
 pre,
 code {
     font-size: 15px;
-    border: 1px solid $grey-color-light;
+    border: 1px solid var(--border-color);
     border-radius: 3px;
-    background-color: #eef;
+    background-color: var(--code-bg);
 }
 
 code {
@@ -202,7 +203,7 @@ pre {
         vertical-align: middle;
 
         path {
-            fill: $grey-color;
+            fill: var(--text-secondary);
         }
     }
 }
diff --git a/_sass/_layout.scss b/_sass/_layout.scss
index c332f6c0ed..f48658e61a 100644
--- a/_sass/_layout.scss
+++ b/_sass/_layout.scss
@@ -2,9 +2,11 @@
  * Site header
  */
 .site-header {
-    border-top: 5px solid $grey-color-dark;
-    border-bottom: 1px solid $grey-color-light;
+    border-top: 5px solid var(--header-bg);
+    border-bottom: 1px solid var(--border-color);
     min-height: 56px;
+    background-color: var(--header-bg);
+    color: var(--header-text);
 
     // Positioning context for the mobile navigation icon
     position: relative;
@@ -20,7 +22,7 @@
 
     &,
     &:visited {
-        color: $grey-color-dark;
+        color: var(--header-text);
     }
 }
 
@@ -33,7 +35,7 @@
     }
 
     .page-link {
-        color: $text-color;
+        color: var(--header-text);
         line-height: $base-line-height;
 
         // Gaps between nav items, but not on the last one
@@ -46,8 +48,8 @@
         position: absolute;
         top: 9px;
         right: $spacing-unit * 0.5;
-        background-color: $background-color;
-        border: 1px solid $grey-color-light;
+        background-color: var(--bg-primary);
+        border: 1px solid var(--border-color);
         border-radius: 5px;
         text-align: right;
 
@@ -65,7 +67,7 @@
                 height: 15px;
 
                 path {
-                    fill: $grey-color-dark;
+                    fill: var(--header-text);
                 }
             }
         }
@@ -98,8 +100,10 @@
  * Site footer
  */
 .site-footer {
-    border-top: 1px solid $grey-color-light;
+    border-top: 1px solid var(--border-color); 
     padding: $spacing-unit 0;
+    background-color: var(--footer-bg);
+    color: var(--footer-text);
 }
 
 .footer-heading {
@@ -115,7 +119,7 @@
 
 .footer-col-wrapper {
     font-size: 15px;
-    color: $grey-color;
+    color: var(--footer-text);
     margin-left: -$spacing-unit * 0.5;
     @extend %clearfix;
 }
@@ -186,7 +190,7 @@
 
 .post-meta {
     font-size: $small-font-size;
-    color: $grey-color;
+    color: var(--text-secondary);
 }
 
 .post-link {
diff --git a/_sass/custom/_mixins.scss b/_sass/custom/_mixins.scss
new file mode 100644
index 0000000000..627c7230ad
--- /dev/null
+++ b/_sass/custom/_mixins.scss
@@ -0,0 +1,2 @@
+// Custom mixins for NuttX website
+// Add any custom mixins here if needed
diff --git a/_sass/custom/_themes.scss b/_sass/custom/_themes.scss
new file mode 100644
index 0000000000..efea3c861e
--- /dev/null
+++ b/_sass/custom/_themes.scss
@@ -0,0 +1,40 @@
+// CSS Custom Properties for Theming
+:root {
+  // Light theme (default)
+  --bg-primary: #ffffff;
+  --bg-secondary: #f8f9fa;
+  --bg-tertiary: #e9ecef;
+  --text-primary: #212529;
+  --text-secondary: #6c757d;
+  --link-color: #007bff;
+  --link-hover: #0056b3;
+  --border-color: #dee2e6;
+  --code-bg: #f8f9fa;
+  --header-bg: #343a40;
+  --header-text: #ffffff;
+  --footer-bg: #f8f9fa;
+  --footer-text: #6c757d;
+  --card-bg: #ffffff;
+  --table-bg: #ffffff;
+  --table-border: #dee2e6;
+}
+
+[data-theme="dark"] {
+  // Dark theme
+  --bg-primary: #121212;
+  --bg-secondary: #1e1e1e;
+  --bg-tertiary: #2d3748;
+  --text-primary: #e9ecef;
+  --text-secondary: #adb5bd;
+  --link-color: #4dabf7;
+  --link-hover: #74c0fc;
+  --border-color: #495057;
+  --code-bg: #2d3748;
+  --header-bg: #212529;
+  --header-text: #f8f9fa;
+  --footer-bg: #1a1a1a;
+  --footer-text: #adb5bd;
+  --card-bg: #1e1e1e;
+  --table-bg: #1e1e1e;
+  --table-border: #495057;
+}
\ No newline at end of file
diff --git a/_sass/custom/_variables.scss b/_sass/custom/_variables.scss
new file mode 100644
index 0000000000..1ee3354c8b
--- /dev/null
+++ b/_sass/custom/_variables.scss
@@ -0,0 +1,2 @@
+// Custom variables for NuttX website
+// Add any custom variables here if needed
diff --git a/css/main.scss b/css/main.scss
index f2e566e2a1..7a6fa88aaa 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -1,6 +1,9 @@
 ---
 # Only the main Sass file needs front matter (the dashes are enough)
 ---
+@import "custom/variables";
+@import "custom/mixins";
+@import "custom/themes";
 @charset "utf-8";