websites/homedocs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

wip

Browse source
This commit is contained in:
pika 2025-03-30 22:31:10 +02:00
parent 9433d9d235
commit 7b6837cf96
7 changed files with 370 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

79
app/templates/layout.html
View file

@ -140,6 +140,45 @@
background-color: rgba(0, 0, 0, 0.03);
border-radius: 4px;
}
/* Navigation bar theming */
.navbar {
background-color: var(--bs-body-bg) !important;
border-bottom: 1px solid var(--bs-border-color);
}
.navbar .navbar-brand,
.navbar .nav-link,
.navbar .dropdown-toggle {
color: var(--bs-body-color) !important;
}
/* Markdown styling for better contrast in dark mode */
[data-bs-theme="dark"] .markdown-content {
color: rgba(255, 255, 255, 0.9);
}
[data-bs-theme="dark"] .markdown-content h1,
[data-bs-theme="dark"] .markdown-content h2,
[data-bs-theme="dark"] .markdown-content h3,
[data-bs-theme="dark"] .markdown-content h4,
[data-bs-theme="dark"] .markdown-content h5,
[data-bs-theme="dark"] .markdown-content h6 {
color: rgba(255, 255, 255, 0.95);
}
[data-bs-theme="dark"] .markdown-content code {
background-color: rgba(255, 255, 255, 0.1);
color: #e6e6e6;
}
[data-bs-theme="dark"] .markdown-content pre {
background-color: rgba(0, 0, 0, 0.3);
}
[data-bs-theme="dark"] .markdown-content a {
color: #6ea8fe;
}
</style>
</head>
@ -228,10 +267,10 @@
<li><a class="dropdown-item" href="{{ url_for('auth.logout') }}">Logout</a></li>
</ul>
</div>
<div class="ms-auto me-3">
<button class="btn btn-icon" id="theme-toggle" aria-label="Toggle theme">
<span class="ti ti-moon theme-icon-light"></span>
<span class="ti ti-sun theme-icon-dark"></span>
<div class="nav-item ms-2">
<button id="theme-toggle" class="btn btn-icon" aria-label="Toggle theme">
<span class="ti ti-moon dark-icon d-none"></span>
<span class="ti ti-sun light-icon"></span>
</button>
</div>
</div>
@ -458,6 +497,38 @@
}
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const themeToggle = document.getElementById('theme-toggle');
const darkIcon = document.querySelector('.dark-icon');
const lightIcon = document.querySelector('.light-icon');
// Set initial icon state
updateThemeIcon();
function updateThemeIcon() {
const currentTheme = localStorage.getItem('theme') ||
(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
if (currentTheme === 'dark') {
darkIcon.classList.remove('d-none');
lightIcon.classList.add('d-none');
} else {
darkIcon.classList.add('d-none');
lightIcon.classList.remove('d-none');
}
}
themeToggle.addEventListener('click', function () {
const currentTheme = document.documentElement.getAttribute('data-bs-theme');
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
document.documentElement.setAttribute('data-bs-theme', newTheme);
localStorage.setItem('theme', newTheme);
updateThemeIcon();
});
});
</script>
{% block scripts %}{% endblock %}
</body>