Dark and Light switch (#78)

JDSherbert · web-flow · commit ea2c704887f5 · 2024-02-08T22:59:16.000Z
The current modification implements local storage for the selected theme
using an event listener. This ensures that the chosen theme persists
even when users leave and return to the site. By default, the website
adopts a white theme, but users can change it. The selected theme should
remain fixed upon subsequent visits.

For the theme selection, I've utilized default Windows emojis for the
Sun and moon icons, enhancing the visual appeal. Notably, I've
maintained a visible border on the icon to signify its selectability.

There don't seem to be any performance issues, but there's a minor
inconvenience where the page initially loads with a white theme before
flickering to the selected theme. This may be more noticeable on slower
internet connections, potentially revealing the behind-the-scenes of the
website. Whether this is a significant issue is open to discussion.

Key changes can be found in the following files:

1. config: Sets the default color scheme.
2. Aux_nav: Adds a new navigation list item to the top-right panel,
labeled "Contribute to.."
3 Head.html: Modifies stylesheets and introduces a script for the
default "just the docs" theme.js, essentially fixing it to the original
code.
4. Default.html: Incorporates the local script "colorThemeSelection.js,"
responsible for controlling the theme button, selection, and loading.
5. ColorThemeSelection.js: Enhances readability and functionality as
described.


Issues
---

The following issues are as listed:

- Theme by default is forced to be " light " themed, which means that
upon page change it has to be overwritten which introduces flickering to
the website when it is changed.
- May have issues on very slow internet where the user could see the
backsite, but shouldn't be too worried about it performance seem to be
valid for the site still.

Fixes
---

It would be possible to force load stylesheets globally so that the
theme changes it for the entire site, but it has underlying issues with
the way ruby website is setup and might need internal code changes.
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');
+    }
+});
