3c2dae6bd6
This commit addresses the issue of incorrect dark mode icon placement in the toggle button. Previously, the moon and sun icons were displayed in the background, which was not the desired behavior. The icons are now correctly placed inside the circle of the toggle button. Changes include: - Updated CSS to center icons within the toggle button. - Adjusted HTML to ensure the correct icon is displayed based on the current theme. - Modified JavaScript to toggle icons appropriately when the theme changes. These changes improve the visual consistency and user experience of the dark mode toggle. Fixes #FLAS-5
51 lines
1.8 KiB
HTML
51 lines
1.8 KiB
HTML
<!doctype html>
|
|
<title>{% block title %}{% endblock %} - Flaskr</title>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
|
<script src="https://kit.fontawesome.com/57e33e1f60.js" crossorigin="anonymous"></script>
|
|
<nav>
|
|
<h1><a href="{{ url_for('index') }}">Flaskr</a></h1>
|
|
<ul>
|
|
<li>
|
|
<div id="theme-toggle" aria-label="Toggle Dark Mode">
|
|
<i id="theme-icon" class="fas fa-moon"></i>
|
|
</div>
|
|
</li>
|
|
{% 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>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const themeToggle = document.getElementById('theme-toggle');
|
|
const themeIcon = document.getElementById('theme-icon');
|
|
const currentTheme = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
|
|
|
|
if (currentTheme === 'dark') {
|
|
document.body.classList.add('dark-mode');
|
|
themeIcon.classList.remove('fa-moon');
|
|
themeIcon.classList.add('fa-sun');
|
|
}
|
|
|
|
themeToggle.addEventListener('click', function() {
|
|
document.body.classList.toggle('dark-mode');
|
|
const newTheme = document.body.classList.contains('dark-mode') ? 'dark' : 'light';
|
|
localStorage.setItem('theme', newTheme);
|
|
themeIcon.classList.toggle('fa-sun');
|
|
themeIcon.classList.toggle('fa-moon');
|
|
});
|
|
});
|
|
</script>
|