added theme switch stuff but hisdd them

Author: balotofi

_config.yml

@@ -99,6 +99,10 @@ gh_edit_branch: "main" # the branch that your docs is served from
 gh_edit_view_mode: "edit" # "tree" or "edit" if you want the user to jump into the editor immediately
 
 # Color scheme supports "light" (default) and "dark"
+color_schemes:
+  - light
+  - dark
+  
 color_scheme: light
 
 # Define Jekyll collections

_includes/header_custom.html

@@ -3,4 +3,20 @@
     <div class="lang-switcher">
         {%- include lang-switcher.html -%}
     </div>
-</nav> -->
+</nav> -->
+
+<!-- <nav aria-label="Theme Switcher" class="theme-switcher-nav"></nav>
+    <div class="theme-switcher">
+        <button id="theme-toggle">☾|☼</button>
+        <script>const toggleDarkMode = document.querySelector('.js-toggle-dark-mode'); 
+            jtd.addEvent(toggleDarkMode, 'click', function(){ 
+                if (jtd.getTheme() === 'dark') { jtd.setTheme('light'); 
+                  toggleDarkMode.textContent = '☾'; } 
+                else { jtd.setTheme('dark'); 
+                  toggleDarkMode.textContent = '☼'; } }); 
+        </script>
+    </div>
+</nav>
+
+<script src="{{ '/assets/js/theme-toggle.js' | relative_url }}"></script> -->
+

_includes/theme-switcher.html

@@ -0,0 +1,12 @@
+{% if site.color_schemes %}
+    {% assign current_theme = site.active_theme | default: 'light' %}
+    <div class="theme-switcher">
+        {% for theme in site.color_schemes %}
+            {% if theme == current_theme %}
+                <span>{{ ☼ }}</span>
+            {% else %}
+                <a href="#" class="js-toggle-theme" data-theme="{{ theme }}">{{ ☾ }}</a>
+            {% endif %}
+        {% endfor %}
+    </div>
+{% endif %}

_site/about/index.html

@@ -0,0 +1,48 @@
+
+const toggleDarkMode = document.querySelector('.js-toggle-dark-mode'); 
+jtd.addEvent(toggleDarkMode, 'click', function(){ 
+    if (jtd.getTheme() === 'dark') { jtd.setTheme('light'); 
+      toggleDarkMode.textContent = '☾'; } 
+    else { jtd.setTheme('dark'); 
+      toggleDarkMode.textContent = '☼'; } }); 
+
+
+document.addEventListener("DOMContentLoaded", function () {
+  const toggleButton = document.getElementById("theme-switcher");
+  const currentTheme = localStorage.getItem("theme") || "light";
+
+  // Apply the saved theme
+  document.documentElement.setAttribute("data-theme", currentTheme);
+
+  toggleButton.addEventListener("click", () => {
+    const newTheme = document.documentElement.getAttribute("data-theme") === "light" ? "dark" : "light";
+
+    // Apply and save the new theme
+    document.documentElement.setAttribute("data-theme", newTheme);
+    localStorage.setItem("theme", newTheme);
+  });
+});
+
+document.addEventListener('DOMContentLoaded', function () {
+  const toggleDarkMode = document.querySelector('.js-toggle-dark-mode');
+  
+  // Load the saved theme from localStorage
+  const savedTheme = localStorage.getItem('theme') || 'light';
+  jtd.setTheme(savedTheme);
+  toggleDarkMode.textContent = savedTheme === 'dark' 
+    ? 'Return to the light side' 
+    : 'Preview dark color scheme';
+
+  // Toggle theme on button click
+  jtd.addEvent(toggleDarkMode, 'click', function () {
+    const currentTheme = jtd.getTheme();
+    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+    jtd.setTheme(newTheme);
+    toggleDarkMode.textContent = newTheme === 'dark' 
+      ? 'Return to the light side' 
+      : 'Preview dark color scheme';
+
+    // Save the theme to localStorage
+    localStorage.setItem('theme', newTheme);
+  });
+});

_site/index.html

@@ -11,10 +11,6 @@ lang: en
 
 ---
 
-Preview dark color scheme
-
-<script> const toggleDarkMode = document.querySelector('.js-toggle-dark-mode'); jtd.addEvent(toggleDarkMode, 'click', function(){ if (jtd.getTheme() === 'dark') { jtd.setTheme('light'); toggleDarkMode.textContent = 'Preview dark color scheme'; } else { jtd.setTheme('dark'); toggleDarkMode.textContent = 'Return to the light side'; } }); </script>
-
 # **Learn**
 {: .lh-0 .text-purple-200}
 # Everything you need to know about building a satellite with a guide to take you step-by-step.