website: add CSS custom properties for theme support

Siddhi Tripathi · Siddhi Tripathi · commit c61269d0a563 · 2025-12-04T11:04:18.000+05:30
diff --git a/_includes/theme-toggle.html 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>
diff --git 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
@@ -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
@@ -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
@@ -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;
+}
diff --git a/_sass/custom/_variables.scss 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
@@ -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";
 
 
diff --git a/index.md b/index.md
@@ -27,57 +27,23 @@ limitations under the License.
 
 ## Apache NuttX
 
-NuttX is a free and open-source (FOSS) real-time operating system (RTOS)
-with an emphasis on standards compliance and small footprint.
-Scalable from 8-bit to 64-bit microcontroller environments,
-the primary governing standards in NuttX are POSIX and ANSI standards.
-Additional standard APIs from Unix and other common RTOS's (such as VxWorks)
-are adopted for functionality not available under these standards,
-or for functionality that is not appropriate for deeply-embedded environments
-(such as fork()).
-
-
-## Get NuttX
-
-Release packages are available [here]({{ site.baseurl }}/download).
-We use three GIT repositories to develop the project:
-[RTOS]({{ site.data.project.source_repository_os_mirror }}),
-[Applications]({{ site.data.project.source_repository_apps_mirror }}),
-and [Website]({{ site.data.project.source_repository_website_mirror }}).
-Documentation is part of the RTOS repository and then built and hosted online.
-
-
-## Join Us
-
-NuttX is developed and maintained by an international
-[group of volunteers]({{ site.baseurl }}/community-members) from all around the
-world.  Please take a look at our [community]({{ site.baseurl }}/community)
-page to see how to join us and contribute to the project.
-
-[Mailing list]({{ site.data.project.dev_list_archive_mailarchive }}) is our
-main communication channel, but we are also present on various social media
-platforms such as
-[Discord]({{ site.data.project.socialmedia_discord }}),
-[Hackster]({{ site.data.project.socialmedia_hackster }}),
-[LinkedIn]({{ site.data.project.socialmedia_linkedin_company }}),
-[Reddit]({{ site.data.project.socialmedia_reddit }}).
-
-[NuttX Channel on YouTube]({{ site.data.project.socialmedia_youtube }}) contains
-many demos, tutorials, and hands-on exercises, as well as events videos.
+NuttX is a real-time operating system (RTOS) with an emphasis on standards
+compliance and small footprint. Scalable from 8-bit to 64-bit microcontroller
+environments, the primary governing standards in NuttX are POSIX and ANSI
+standards. Additional standard APIs from Unix and other common RTOS's (such as
+VxWorks) are adopted for functionality not available under these standards, or
+for functionality that is not appropriate for deeply-embedded environments (such
+as fork()).
 
 
 ## Documentation
 
-Full project documentation can be found [here]({{ site.baseurl }}/docs/latest).
-Scientific papers are [here]({{ site.baseurl }}/articles).
+Extensive documentation can be found [here]({{ site.baseurl }}/docs/latest).
 
 
 ## Online Demo
 
-NuttX is incredibly portable. It runs on over 15 different CPU architectures,
-over 300 popular embedded hardware boards and development kits, provides
-more than 1500 ready to use firmware configuration templates for your project.
-See yourself, try out the [NuttX WebAssembly demo]({{ site.baseurl }}/demo).
+Try the online demo [here]({{ site.baseurl }}/demo).
 
 
 ## Community Events

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+// Custom mixins for NuttX website`
	`2`	`+// Add any custom mixins here if needed`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+// Custom variables for NuttX website`
	`2`	`+// Add any custom variables here if needed`