43 lines
1.9 KiB
PHP
43 lines
1.9 KiB
PHP
<button
|
|
type="button"
|
|
onclick="toggleTheme()"
|
|
class="p-2 rounded-md text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:focus:ring-offset-gray-900 transition-colors"
|
|
aria-label="Toggle theme">
|
|
<!-- Sun icon (visible in dark mode) -->
|
|
<svg class="h-5 w-5 hidden dark:block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<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"></path>
|
|
</svg>
|
|
<!-- Moon icon (visible in light mode) -->
|
|
<svg class="h-5 w-5 block dark:hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<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"></path>
|
|
</svg>
|
|
</button>
|
|
|
|
<script>
|
|
if (
|
|
localStorage.theme === 'dark' ||
|
|
(!('theme' in localStorage) &&
|
|
window.matchMedia('(prefers-color-scheme: dark)').matches)
|
|
) {
|
|
document.documentElement.classList.add('dark');
|
|
} else {
|
|
document.documentElement.classList.remove('dark');
|
|
document.documentElement.classList.add('light');
|
|
}
|
|
|
|
function toggleTheme() {
|
|
const html = document.documentElement;
|
|
const isDark = html.classList.contains('dark');
|
|
|
|
if (isDark) {
|
|
html.classList.remove('dark');
|
|
html.classList.add('light');
|
|
localStorage.setItem('theme', 'light');
|
|
} else {
|
|
html.classList.remove('light');
|
|
html.classList.add('dark');
|
|
localStorage.setItem('theme', 'dark');
|
|
}
|
|
}
|
|
</script>
|