2018-02-09 14:39:05 -08:00
|
|
|
<!doctype html>
|
|
|
|
|
<title>{% block title %}{% endblock %} - Flaskr</title>
|
|
|
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
2024-09-05 23:24:01 +00:00
|
|
|
<script src="https://kit.fontawesome.com/57e33e1f60.js" crossorigin="anonymous"></script>
|
2018-02-09 14:39:05 -08:00
|
|
|
<nav>
|
|
|
|
|
<h1><a href="{{ url_for('index') }}">Flaskr</a></h1>
|
|
|
|
|
<ul>
|
2024-09-05 23:24:01 +00:00
|
|
|
<li>
|
2024-09-05 23:33:19 +00:00
|
|
|
<div id="theme-toggle" aria-label="Toggle Dark Mode">
|
2024-09-06 01:28:16 +01:00
|
|
|
<!-- <i id="theme-icon" class="fas fa-moon"></i> -->
|
2024-09-05 23:33:19 +00:00
|
|
|
</div>
|
2024-09-05 23:24:01 +00:00
|
|
|
</li>
|
2018-02-09 14:39:05 -08:00
|
|
|
{% if g.user %}
|
|
|
|
|
<li><span>{{ g.user['username'] }}</span>
|
|
|
|
|
<li><a href="{{ url_for('auth.logout') }}">Log Out</a>
|
|
|
|
|
{% else %}
|
|
|
|
|
<li><a href="{{ url_for('auth.register') }}">Register</a>
|
|
|
|
|
<li><a href="{{ url_for('auth.login') }}">Log In</a>
|
|
|
|
|
{% endif %}
|
|
|
|
|
</ul>
|
|
|
|
|
</nav>
|
|
|
|
|
<section class="content">
|
|
|
|
|
<header>
|
|
|
|
|
{% block header %}{% endblock %}
|
|
|
|
|
</header>
|
|
|
|
|
{% for message in get_flashed_messages() %}
|
|
|
|
|
<div class="flash">{{ message }}</div>
|
|
|
|
|
{% endfor %}
|
|
|
|
|
{% block content %}{% endblock %}
|
|
|
|
|
</section>
|
2024-09-05 23:24:01 +00:00
|
|
|
<script>
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
|
const themeToggle = document.getElementById('theme-toggle');
|
2024-09-06 01:28:16 +01:00
|
|
|
// const themeIcon = document.getElementById('theme-icon');
|
2024-09-05 23:24:01 +00:00
|
|
|
const currentTheme = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
|
|
|
|
|
|
|
|
|
|
if (currentTheme === 'dark') {
|
2024-09-09 17:58:15 +01:00
|
|
|
document.body.parentElement.classList.add('dark-mode');
|
2024-09-05 23:24:01 +00:00
|
|
|
document.body.classList.add('dark-mode');
|
2024-09-06 01:28:16 +01:00
|
|
|
// themeIcon.classList.remove('fa-moon');
|
|
|
|
|
// themeIcon.classList.add('fa-sun');
|
2024-09-05 23:24:01 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
themeToggle.addEventListener('click', function() {
|
|
|
|
|
document.body.classList.toggle('dark-mode');
|
2024-09-09 18:16:56 +01:00
|
|
|
document.body.parentElement.classList.toggle('dark-mode');
|
2024-09-05 23:24:01 +00:00
|
|
|
const newTheme = document.body.classList.contains('dark-mode') ? 'dark' : 'light';
|
|
|
|
|
localStorage.setItem('theme', newTheme);
|
2024-09-06 01:28:16 +01:00
|
|
|
// themeIcon.classList.toggle('fa-sun');
|
|
|
|
|
// themeIcon.classList.toggle('fa-moon');
|
2024-09-05 23:24:01 +00:00
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
</script>
|
