WIP: Add light/dark theme with toggle in navbar (dark theme styling incomplete - dont care for now)

This commit is contained in:
Peter Stockings
2025-11-23 22:00:41 +11:00
parent fc494a9355
commit 89a17f68ab
15 changed files with 463 additions and 260 deletions

View File

@@ -122,14 +122,30 @@
</svg>
Home
</a>
</li>
<!-- Dynamic breadcrumbs could be injected here via blocks if needed -->
</ol>
</nav>
</svg>
<span class="sr-only">Sign out</span>
</a>
</div>
<!-- User Menu -->
<div class="flex items-center gap-4">
<button onclick="toggleTheme()"
class="p-2 rounded-full text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
title="Toggle theme">
<!-- Sun icon (shown in dark mode) -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 hidden dark:block" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
<!-- Moon icon (shown in light mode) -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 block dark:hidden" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
</svg>
</button>
<div class="h-6 w-px bg-gray-200 dark:bg-gray-800"></div>
<a class="inline-flex items-center justify-center text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full w-9 h-9 text-gray-500 dark:text-gray-400"
href="{{ url_for('auth.logout') }}" title="Sign out">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"