diff --git a/.jekyll-metadata b/.jekyll-metadata new file mode 100644 index 0000000000..5448ccf87b Binary files /dev/null and b/.jekyll-metadata differ diff --git a/_includes/theme-toggle.html b/_includes/theme-toggle.html new file mode 100644 index 0000000000..8f40fef3a6 --- /dev/null +++ b/_includes/theme-toggle.html @@ -0,0 +1,180 @@ + diff --git a/_includes/theme-toggle.html.backup b/_includes/theme-toggle.html.backup new file mode 100644 index 0000000000..7299a620b1 --- /dev/null +++ b/_includes/theme-toggle.html.backup @@ -0,0 +1,96 @@ + diff --git a/_includes/themes/apache/_navigation.html b/_includes/themes/apache/_navigation.html index 0e8090dab6..1fd4942afc 100644 --- a/_includes/themes/apache/_navigation.html +++ b/_includes/themes/apache/_navigation.html @@ -25,7 +25,7 @@
  • Documentation
  • Articles
  • GitHub
    • -
  • +
  • Apache
    • + +
  • +
    + +
    +
    • diff --git a/_includes/themes/apache/default.html b/_includes/themes/apache/default.html index 8a5356dc80..512343bc89 100644 --- a/_includes/themes/apache/default.html +++ b/_includes/themes/apache/default.html @@ -6,26 +6,14 @@ {% if page.description %}{% endif %} - - - - - - - - + + + {% include theme-toggle.html %} @@ -44,9 +32,10 @@ {% include JB/analytics %} - + + - + \ 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/assets/js/theme.js b/assets/js/theme.js new file mode 100644 index 0000000000..8eeab3543e --- /dev/null +++ b/assets/js/theme.js @@ -0,0 +1,79 @@ +console.log('=== THEME DEBUG START ==='); + +// Function to toggle theme +function toggleTheme() { + console.log('=== TOGGLE THEME CALLED ==='); + + const html = document.documentElement; + const current = html.getAttribute('data-theme'); + console.log('Current theme attribute:', current); + + const newTheme = current === 'dark' ? 'light' : 'dark'; + console.log('New theme will be:', newTheme); + + // Set the theme + html.setAttribute('data-theme', newTheme); + console.log('Theme attribute set to:', html.getAttribute('data-theme')); + + // Save to localStorage + localStorage.setItem('theme', newTheme); + console.log('Saved to localStorage:', localStorage.getItem('theme')); + + // Test if CSS variables are working + const bgColor = getComputedStyle(document.documentElement).getPropertyValue('--bg-primary').trim(); + console.log('CSS variable --bg-primary:', bgColor); + + return false; +} + +// Initialize when DOM is ready +document.addEventListener('DOMContentLoaded', function() { + console.log('=== DOM READY ==='); + + // Find the toggle button + const toggleBtn = document.getElementById('themeToggle'); + console.log('Toggle button found:', toggleBtn); + + if (toggleBtn) { + // Add click event + toggleBtn.addEventListener('click', function(e) { + console.log('=== CLICK EVENT FIRED ==='); + e.preventDefault(); + e.stopPropagation(); + toggleTheme(); + return false; + }); + + console.log('Click event listener added successfully'); + } else { + console.error('ERROR: Toggle button not found!'); + } + + // Load saved theme + const savedTheme = localStorage.getItem('theme'); + console.log('Saved theme from localStorage:', savedTheme); + + if (savedTheme) { + document.documentElement.setAttribute('data-theme', savedTheme); + console.log('Applied saved theme, current attribute:', document.documentElement.getAttribute('data-theme')); + } else { + console.log('No saved theme, using default (light)'); + document.documentElement.setAttribute('data-theme', 'light'); + } + + // Test CSS variables + console.log('Testing CSS variables:'); + console.log('--bg-primary:', getComputedStyle(document.documentElement).getPropertyValue('--bg-primary').trim()); + console.log('--text-primary:', getComputedStyle(document.documentElement).getPropertyValue('--text-primary').trim()); + + console.log('=== THEME DEBUG END ==='); +}); + +// Fallback click handler +document.addEventListener('click', function(e) { + if (e.target.closest('#themeToggle')) { + console.log('Fallback click handler triggered'); + e.preventDefault(); + toggleTheme(); + } +}); diff --git a/base-changes.patch b/base-changes.patch new file mode 100644 index 0000000000..860c155ec2 --- /dev/null +++ b/base-changes.patch @@ -0,0 +1,73 @@ +diff --git a/_sass/_base.scss b/_sass/_base.scss +index 4eb905052..934d4e619 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/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"; diff --git a/layout-changes.patch b/layout-changes.patch new file mode 100644 index 0000000000..eb760a1c0b --- /dev/null +++ b/layout-changes.patch @@ -0,0 +1,86 @@ +diff --git a/_sass/_layout.scss b/_sass/_layout.scss +index c332f6c0e..f48658e61 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 {