e0b8f34770
This commit addresses the issue of improper dark mode implementation. The background of all pages and form elements in dark mode were previously displayed in white, which has now been corrected. The background for input and textarea elements is set to a darker shade in dark mode, ensuring consistency with the overall theme. Additionally, the toggle button for switching themes has been redesigned to resemble iPhone-style toggles, replacing the previous square button. This enhances the user interface and provides a more intuitive experience when toggling between light and dark modes. Fixes #FLAS-3
52 lines
1.8 KiB
HTML
52 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"></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.add('fa-sun');
|
|
} else {
|
|
themeIcon.classList.add('fa-moon');
|
|
}
|
|
|
|
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>
|