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