49 lines
No EOL
1.8 KiB
HTML
49 lines
No EOL
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-bs-theme="dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>StreamFusion Users Management</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<style>
|
|
.theme-switch {
|
|
position: fixed;
|
|
top: 10px;
|
|
right: 10px;
|
|
}
|
|
body {
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
}
|
|
[data-bs-theme="dark"] {
|
|
--bs-body-bg: #212529;
|
|
--bs-body-color: #f8f9fa;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="theme-switch form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="themeSwitch" checked>
|
|
<label class="form-check-label" for="themeSwitch">Dark Mode</label>
|
|
</div>
|
|
<div class="container mt-5">
|
|
{% block content %}{% endblock %}
|
|
</div>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
const themeSwitch = document.getElementById('themeSwitch');
|
|
themeSwitch.addEventListener('change', function() {
|
|
if (this.checked) {
|
|
document.documentElement.setAttribute('data-bs-theme', 'dark');
|
|
localStorage.setItem('theme', 'dark');
|
|
} else {
|
|
document.documentElement.setAttribute('data-bs-theme', 'light');
|
|
localStorage.setItem('theme', 'light');
|
|
}
|
|
});
|
|
|
|
const savedTheme = localStorage.getItem('theme') || 'dark';
|
|
document.documentElement.setAttribute('data-bs-theme', savedTheme);
|
|
themeSwitch.checked = savedTheme === 'dark';
|
|
</script>
|
|
</body>
|
|
</html> |