a human touch
This commit is contained in:
parent
ab02397494
commit
9fa696d5a9
3 changed files with 7 additions and 6 deletions
|
|
@ -52,6 +52,7 @@ nav ul {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav ul li a, nav ul li span, header .action {
|
nav ul li a, nav ul li span, header .action {
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<div id="theme-toggle" aria-label="Toggle Dark Mode">
|
<div id="theme-toggle" aria-label="Toggle Dark Mode">
|
||||||
<i id="theme-icon" class="fas fa-moon"></i>
|
<!-- <i id="theme-icon" class="fas fa-moon"></i> -->
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
{% if g.user %}
|
{% if g.user %}
|
||||||
|
|
@ -31,21 +31,21 @@
|
||||||
<script>
|
<script>
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
const themeToggle = document.getElementById('theme-toggle');
|
const themeToggle = document.getElementById('theme-toggle');
|
||||||
const themeIcon = document.getElementById('theme-icon');
|
// const themeIcon = document.getElementById('theme-icon');
|
||||||
const currentTheme = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
|
const currentTheme = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
|
||||||
|
|
||||||
if (currentTheme === 'dark') {
|
if (currentTheme === 'dark') {
|
||||||
document.body.classList.add('dark-mode');
|
document.body.classList.add('dark-mode');
|
||||||
themeIcon.classList.remove('fa-moon');
|
// themeIcon.classList.remove('fa-moon');
|
||||||
themeIcon.classList.add('fa-sun');
|
// themeIcon.classList.add('fa-sun');
|
||||||
}
|
}
|
||||||
|
|
||||||
themeToggle.addEventListener('click', function() {
|
themeToggle.addEventListener('click', function() {
|
||||||
document.body.classList.toggle('dark-mode');
|
document.body.classList.toggle('dark-mode');
|
||||||
const newTheme = document.body.classList.contains('dark-mode') ? 'dark' : 'light';
|
const newTheme = document.body.classList.contains('dark-mode') ? 'dark' : 'light';
|
||||||
localStorage.setItem('theme', newTheme);
|
localStorage.setItem('theme', newTheme);
|
||||||
themeIcon.classList.toggle('fa-sun');
|
// themeIcon.classList.toggle('fa-sun');
|
||||||
themeIcon.classList.toggle('fa-moon');
|
// themeIcon.classList.toggle('fa-moon');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
BIN
instance/flaskr.sqlite
Normal file
BIN
instance/flaskr.sqlite
Normal file
Binary file not shown.
Loading…
Add table
Add a link
Reference in a new issue