8c57553ada
Implemented dark mode across all pages, allowing users to toggle between light and dark themes. The default theme is determined by the operating system or browser settings. A toggle button in the navigation bar enables users to switch themes, using sun and moon icons from Font Awesome. User preferences are stored in cookies and local storage to ensure consistency across sessions and pages. The changes include: - Added a before_request function to load theme preference from cookies or set a default based on user agent. - Updated CSS to support dark mode styling. - Modified base.html to include a theme toggle button and corresponding JavaScript for theme switching. Fixes #FLAS-2
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>
|
|
<button id="theme-toggle" aria-label="Toggle Dark Mode">
|
|
<i id="theme-icon" class="fas"></i>
|
|
</button>
|
|
</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>
|