Browse Source

Add theme toggle

master
parent
commit
fcd8ae3831
  1. 2
      theme/static/css/media.css
  2. 25
      theme/templates/base.html

2
theme/static/css/media.css

@ -26,7 +26,7 @@ main {
.img-container img {
max-width: 100%;
max-height: calc(100vh - 10rem);
max-height: calc(100vh - 11.5rem);
display: block;
margin: auto;
}

25
theme/templates/base.html

@ -13,7 +13,7 @@
{% block extra_head %}{% endblock extra_head %}
</head>
<body theme="dark">
<body>
<header>
<h1><a class="logo" href="{{ album.index_url }}">{{ index_title }} </a></h1>
{% if album.breadcrumb %}
@ -36,7 +36,30 @@
{% block content %}{% endblock content %}
</main>
<footer>
<p><a href="#" id="darkModeToggle">Toggle dark mode</a></p>
<p>Generated using <a href="https://github.com/saimn/sigal/">sigal</a>, custom theme <a href="https://git.bksp.space/BlackSponge/photos">available here</a>.
</footer>
<script type="text/javascript">
function setTheme(themeName) {
localStorage.setItem('theme', themeName);
document.body.setAttribute('theme', themeName);
return themeName;
}
let darkModeToggleElement = document.getElementById('darkModeToggle');
let theme = localStorage.getItem('theme') || 'light';
setTheme(theme);
darkModeToggle.addEventListener('click', (e) => {
e.preventDefault();
if (theme === 'dark') {
theme = setTheme('light');
} else {
theme = setTheme('dark');
}
})
</script>
</body>
</html>

Loading…
Cancel
Save