You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
38 lines
1.2 KiB
38 lines
1.2 KiB
<script lang="ts"> |
|
import { onMount } from 'svelte'; |
|
import Icon from '../ui/Icon.svelte'; |
|
|
|
let isDark = $state(false); |
|
|
|
onMount(() => { |
|
// Check localStorage and system preference |
|
const stored = localStorage.getItem('theme'); |
|
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; |
|
isDark = stored === 'dark' || (!stored && prefersDark); |
|
updateTheme(); |
|
}); |
|
|
|
function toggleTheme() { |
|
isDark = !isDark; |
|
updateTheme(); |
|
} |
|
|
|
function updateTheme() { |
|
if (isDark) { |
|
document.documentElement.classList.add('dark'); |
|
localStorage.setItem('theme', 'dark'); |
|
} else { |
|
document.documentElement.classList.remove('dark'); |
|
localStorage.setItem('theme', 'light'); |
|
} |
|
} |
|
</script> |
|
|
|
<button |
|
onclick={toggleTheme} |
|
class="px-3 py-1 rounded border border-fog-border dark:border-fog-dark-border bg-fog-post dark:bg-fog-dark-post text-fog-text dark:text-fog-dark-text hover:bg-fog-highlight dark:hover:bg-fog-dark-highlight transition-colors flex items-center justify-center" |
|
aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'} |
|
title={isDark ? 'Switch to light mode' : 'Switch to dark mode'} |
|
> |
|
<Icon name={isDark ? 'sun' : 'moon'} size={16} /> |
|
</button>
|
|
|