Skip to content

Dark and Light switch #78

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Feb 8, 2024
Merged

Dark and Light switch #78

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion _config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
19 changes: 19 additions & 0 deletions _includes/components/aux_nav.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
36 changes: 36 additions & 0 deletions _includes/components/head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
3 changes: 2 additions & 1 deletion _layouts/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
---

<!DOCTYPE html>

<html lang="{{ site.lang | default: 'en-US' }}">
{% include head.html %}
<body>
Expand Down Expand Up @@ -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>
31 changes: 31 additions & 0 deletions assets/js/colorThemeSelection.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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');
}
});