gitea-admin/gh-christianlouis-docuelevate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): add dark mode support with system preference detection and localStorage persistence

Browse Source 
Co-authored-by: christianlouis <361235+christianlouis@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
2026-02-25 13:59:49 +00:00
parent 9cbffc4acb
commit c428a7ec00
9 changed files with 416 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/templates/base.html
+37 -1
View File
@@ -1,9 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" data-color-scheme-default="{{ ui_default_color_scheme | default('system') }}">
<head>
<meta charset="UTF-8" />
<title>{% block title %}DocuElevate{% endblock %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Anti-flash dark mode script: runs before CSS/JS to prevent white flash -->
<script>
(function () {
var stored = localStorage.getItem('colorScheme');
var serverDefault = document.documentElement.getAttribute('data-color-scheme-default') || 'system';
var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
var scheme = stored || serverDefault;
if (scheme === 'dark' || (scheme === 'system' && prefersDark)) {
document.documentElement.classList.add('dark');
}
})();
</script>
<!-- Tailwind CSS or other global CSS references -->
<link rel="stylesheet" href="/static/styles.css" />
<!-- Alpine.js moved to head for earlier loading -->
@@ -93,6 +105,18 @@
<a href="/about" class="text-gray-700 hover:text-gray-900">About</a>
<!-- Dark mode toggle (desktop) -->
<button
id="darkModeToggle"
onclick="toggleDarkMode()"
type="button"
class="p-1.5 rounded-md text-gray-500 hover:text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
aria-label="Toggle dark mode"
title="Toggle dark mode"
>
<i class="fas fa-moon"></i>
</button>
<!-- Dynamic Auth Section -->
<div id="authSection" class="text-gray-700 hover:text-gray-900"></div>
</div>
@@ -152,6 +176,18 @@
<a href="/about" class="block px-3 py-3 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">About</a>
<!-- Dark mode toggle (mobile) -->
<button
onclick="toggleDarkMode()"
type="button"
class="flex items-center w-full px-3 py-3 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50"
id="darkModeToggleMobile"
aria-label="Toggle dark mode"
>
<i class="fas fa-moon mr-2" id="darkModeIconMobile"></i>
<span id="darkModeTextMobile">Dark Mode</span>
</button>
<!-- Mobile Auth Section -->
<div id="mobileAuthSection" class="block px-3 py-3 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">
<!-- Will be populated by JS -->