From e23478c9af515cf63d82becd4324b9000e550e53 Mon Sep 17 00:00:00 2001
From: Verzatiledev <47317248+VerzatileDev@users.noreply.github.com>
Date: Thu, 8 Feb 2024 04:28:33 +0200
Subject: [PATCH] Dark and Light switch
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 -> Selects the default color scheme
Aux_nav -> adds a new nav list item to the top right panel where " Contribute to .. " is located as a label button
Head.html -> 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 -> Adds our local script " colorThemeSelection.js " this is what controls the theme button and selection and load.
ColorThemeSelection.js -> As described
---
_config.yml | 5 ++++-
_includes/components/aux_nav.html | 19 ++++++++++++++++
_includes/components/head.html | 36 +++++++++++++++++++++++++++++++
_layouts/default.html | 3 ++-
assets/js/colorThemeSelection.js | 31 ++++++++++++++++++++++++++
5 files changed, 92 insertions(+), 2 deletions(-)
create mode 100644 _includes/components/aux_nav.html
create mode 100644 _includes/components/head.html
create mode 100644 assets/js/colorThemeSelection.js
diff --git a/_config.yml b/_config.yml
index 3c46c64..d88dbbe 100644
--- 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'
\ No newline at end of file
+ date-format: '%d/%m/%Y'
+
+# Color Theme
+color_scheme: light
\ No newline at end of file
diff --git a/_includes/components/aux_nav.html b/_includes/components/aux_nav.html
new file mode 100644
index 0000000..95e28e8
--- /dev/null
+++ b/_includes/components/aux_nav.html
@@ -0,0 +1,19 @@
+
\ No newline at end of file
diff --git a/_includes/components/head.html b/_includes/components/head.html
new file mode 100644
index 0000000..8c7b1d1
--- /dev/null
+++ 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 -%}
+
+
+
+
+
+
+
+ {% include head_nav.html %}
+
+ {% if site.search_enabled != false %}
+
+ {% endif %}
+
+
+
+
+
+
+ {% include_cached favicon.html %}
+
+ {% seo %}
+
+ {% include head_custom.html %}
+
+
diff --git a/_layouts/default.html b/_layouts/default.html
index 8b1f465..d93b16c 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -5,7 +5,6 @@
---
-
{% include head.html %}
@@ -61,5 +60,7 @@
{% if page.include_programming_language_switch_script %}
{% endif %}
+
+
\ No newline at end of file
diff --git a/assets/js/colorThemeSelection.js b/assets/js/colorThemeSelection.js
new file mode 100644
index 0000000..956879a
--- /dev/null
+++ 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');
+ }
+});
\ No newline at end of file