Dark and Light switch

VerzatileDev · VerzatileDev · commit e23478c9af51 · 2024-02-08T04:28:33.000+02:00
With the current modification the theme selected is stored locally with an eventListener that stores that information and asks for it.

By default the website will be on a white theme, unless the user changes it, in theory the selection should stay fixed even when the user leave the site and comes back later.

For the icons I used a the default windows emojis of the Sun and moon, which I think work great and show it off to its best abilities.

Additionally I left the Border on the icon so indicate that it can be selected or changed.

Doesn't seem to have a performance issues.

Does have an issue that page by default is white themed, so upon changing it flickers with the lights, occasionally on slow internets it may show behind the scenes of the website which could be an issue but that is up for debate.

See files changed

config -&gt; Selects the default color scheme
Aux_nav -&gt; adds a new nav list item to the top right panel where " Contribute to .. " is located as a label button

Head.html -&gt; Modifies the stylesheets and adds a script of the default " just the docs " theme .js  Essentially it has been fixated to the original code

Default.html -&gt; Adds our local script " colorThemeSelection.js " this is what controls the theme button and selection and load.

ColorThemeSelection.js -&gt; As described
diff --git a/_config.yml b/_config.yml
@@ -14,4 +14,7 @@ plugins:
 
 # Optional. The default date format, used if none is specified in the tag.
 last-modified-at:
-    date-format: '%d/%m/%Y'
+    date-format: '%d/%m/%Y'
+
+# Color Theme
+color_scheme: light
diff --git a/_includes/components/aux_nav.html b/_includes/components/aux_nav.html
@@ -0,0 +1,19 @@
+<nav aria-label="Auxiliary" class="aux-nav">
+    <ul class="aux-nav-list">
+      {% for link in site.aux_links %}
+        <li class="aux-nav-list-item">
+          <a href="{{ link.last }}" class="site-button"
+            {% if site.aux_links_new_tab %}
+            target="_blank" rel="noopener noreferrer"
+            {% endif %}
+          >
+            {{ link.first }}
+          </a>
+        </li>
+      {% endfor %}
+      <li class="aux-nav-list-item"></li>
+        <button class="btn js-toggle-dark-mode"aria-label="Switch to dark mode">🌞</button>
+        
+    </li>
+    </ul>
+  </nav>
diff --git a/_includes/components/head.html b/_includes/components/head.html
@@ -0,0 +1,36 @@
+{%- comment -%}
+  Include as: {%- include head.html -%}
+  Depends on: site.ga_tracking, site.ga_tracking_anonymize_ip,
+    site.search_enabled, site.static_files, site.favicon_ico.
+  Results in: HTML for the head element.
+  Includes:
+    head_nav.html, head_custom.html.
+  Overwrites: 
+    ga_tracking_ids, ga_property, file, favicon.
+  Should not be cached, because included files depend on page.
+{%- endcomment -%}
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
+
+  <link rel="stylesheet" href="{{ '/assets/css/just-the-docs-default.css' | relative_url }}">
+  
+  {% include head_nav.html %}
+
+  {% if site.search_enabled != false %}
+    <script src="{{ '/assets/js/vendor/lunr.min.js' | relative_url }}"></script>
+  {% endif %}
+
+  <script src="{{ '/assets/js/just-the-docs.js' | relative_url }}"></script>
+  
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  {% include_cached favicon.html %}
+
+  {% seo %}
+
+  {% include head_custom.html %}
+
+</head>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -5,7 +5,6 @@
 ---
 
 <!DOCTYPE html>
-
 <html lang="{{ site.lang | default: 'en-US' }}">
 {% include head.html %}
 <body>
@@ -61,5 +60,7 @@
   {% if page.include_programming_language_switch_script %}
     <script src="{{ '/assets/js/programmingLanguageSwitch.js' | relative_url }}" defer></script>
   {% endif %}
+
+  <script src="{{ '/assets/js/colorThemeSelection.js' | relative_url }}" defer></script>
 </body>
 </html>
diff --git a/assets/js/colorThemeSelection.js b/assets/js/colorThemeSelection.js
@@ -0,0 +1,31 @@
+// Get the stored theme when the page loads
+document.addEventListener('DOMContentLoaded', (event) => {
+    const storedTheme = localStorage.getItem('theme');
+    if (storedTheme) {
+        jtd.setTheme(storedTheme);
+        // Set the button icon and aria-label based on the stored theme
+        toggleDarkMode.textContent = storedTheme === 'dark' ? '🌞' : '🌜';
+        toggleDarkMode.setAttribute('aria-label', storedTheme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode');
+    }
+});
+
+const toggleDarkMode = document.querySelector('.js-toggle-dark-mode');
+
+// Set the initial font size
+toggleDarkMode.style.fontSize = '1.5em';
+
+toggleDarkMode.addEventListener('click', function() {
+    if (jtd.getTheme() === 'dark') {
+        jtd.setTheme('light');
+        toggleDarkMode.textContent = '🌜';
+        toggleDarkMode.setAttribute('aria-label', 'Switch to dark mode');
+        // Store the theme in localStorage
+        localStorage.setItem('theme', 'light');
+    } else {
+        jtd.setTheme('dark');
+        toggleDarkMode.textContent = '🌞';
+        toggleDarkMode.setAttribute('aria-label', 'Switch to light mode');
+        // Store the theme in localStorage
+        localStorage.setItem('theme', 'dark');
+    }
+});
