finmoon/moon-anemone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

renamed default_mode to default_theme, streamlined the code for theme switching, added documentation

Browse Source
This commit is contained in:
Speyll
2023-10-05 22:38:45 +01:00
parent f8d26c5907
commit 520cbd0dbc
3 changed files with 49 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
templates/header.html
View File

@@ -7,46 +7,44 @@
rel="noreferrer noopener" {% endif %}>{{ current_nav_item.name }}</a>
{% endif %}
{% endfor %}
<div class="themeSwitch">
{% if not config.extra.default_mode %}
<button class="themeButton light" onclick="setTheme('light')" title="Light mode"><svg
class="icons icons__background">
<use href="{{ get_url(path='icons.svg#lightMode', trailing_slash=false) | safe }}"></use>
</svg></button>
<button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"><svg class="icons icons__background">
<use href="{{ get_url(path='icons.svg#darkMode', trailing_slash=false) | safe }}"></use>
</svg></button>
{% elif config.extra.default_mode and config.extra.default_mode == "light" %}
<button class="themeButton light" onclick="setTheme('light')" title="Light mode"><svg
class="icons icons__background">
<use href="{{ get_url(path='icons.svg#lightMode', trailing_slash=false) | safe }}"></use>
</svg></button>
<button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"><svg class="icons icons__background">
<use href="{{ get_url(path='icons.svg#darkMode', trailing_slash=false) | safe }}"></use>
</svg></button>
{% elif config.extra.default_mode and config.extra.default_mode == "dark" %}
<button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"><svg class="icons icons__background">
<use href="{{ get_url(path='icons.svg#darkMode', trailing_slash=false) | safe }}"></use>
</svg></button>
<button class="themeButton light" onclick="setTheme('light')" title="Light mode"><svg
class="icons icons__background">
<use href="{{ get_url(path='icons.svg#lightMode', trailing_slash=false) | safe }}"></use>
</svg></button>
{% if not config.extra.default_theme %}
<button class="themeButton light" onclick="setTheme('light')" title="Light mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#lightMode', trailing_slash=false) | safe }}"></use></svg></button>
<button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#darkMode', trailing_slash=false) | safe }}"></use></svg></button>
{% elif config.extra.default_theme and config.extra.default_theme == "light" %}
<button class="themeButton light" onclick="setTheme('light')" title="Light mode"><svg class="icons icons__background"> <use href="{{ get_url(path='icons.svg#lightMode', trailing_slash=false) | safe }}"></use></svg></button>
<button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#darkMode', trailing_slash=false) | safe }}"></use></svg></button>
{% elif config.extra.default_theme and config.extra.default_theme == "dark" %}
<button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#darkMode', trailing_slash=false) | safe }}"></use></svg></button>
<button class="themeButton light" onclick="setTheme('light')" title="Light mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#lightMode', trailing_slash=false) | safe }}"></use></svg></button>
{% endif %}
</div>
</nav>
{% endif %}
<script>
const setTheme = (theme) => {
document.documentElement.className = theme;
localStorage.setItem('theme', theme);
}
const hasCodeRun = localStorage.getItem('hasCodeRun');
if (!hasCodeRun) {
const defaultTheme = "{{ config.extra.default_theme }}";
setTheme(defaultTheme);
localStorage.setItem('hasCodeRun', 'true');
}
const getTheme = () => {
const theme = localStorage.getItem('theme');
theme && setTheme(theme);
if (theme) {
setTheme(theme);
}
}
getTheme()
{% if config.extra.default_mode %}
setTheme("{{ config.extra.default_mode }}")
{% endif %}
</script>
getTheme();
</script>