z0x/blog.z0x.ca
Code Activity Actions

feat: update theme handling and improve icons
All checks were successful
build dist / build-dist (push) Successful in 47s
Details

Browse source
This commit is contained in:
z0x 2025-05-23 21:04:11 -04:00
parent 0e48c6baf7
commit 17a1981fba
8 changed files with 45 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

47
src/components/ThemeToggle.astro
View file

@ -3,7 +3,13 @@ import { Button } from "@/components/ui/button";
import { Icon } from "astro-icon/components";
---
<Button id="theme-toggle" variant="ghost" size="icon" title="Toggle theme" className="-me-2 size-8">
<Button
id="theme-toggle"
variant="ghost"
size="icon"
title="Toggle theme"
className="-me-2 size-8"
>
<Icon
name="lucide:sun"
class="size-4 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90"
@ -27,30 +33,31 @@ import { Icon } from "astro-icon/components";
return 'light'
})()
if (theme === 'light') {
document.documentElement.classList.remove('dark')
} else {
document.documentElement.classList.add('dark')
}
document.documentElement.setAttribute('data-theme', theme)
document.documentElement.classList.add(
theme === 'dark' ? 'scheme-dark' : 'scheme-light',
)
window.localStorage.setItem('theme', theme)
</script>
<script>
function handleToggleClick() {
const element = document.documentElement
const currentTheme = element.getAttribute('data-theme')
const newTheme = currentTheme === 'dark' ? 'light' : 'dark'
element.classList.add('disable-transitions')
element.classList.toggle('dark')
element.classList.add('[&_*]:transition-none')
element.setAttribute('data-theme', newTheme)
element.classList.remove('scheme-dark', 'scheme-light')
element.classList.add(newTheme === 'dark' ? 'scheme-dark' : 'scheme-light')
window.getComputedStyle(element).getPropertyValue('opacity')
requestAnimationFrame(() => {
element.classList.remove('disable-transitions')
element.classList.remove('[&_*]:transition-none')
})
const isDark = element.classList.contains('dark')
localStorage.setItem('theme', isDark ? 'dark' : 'light')
localStorage.setItem('theme', newTheme)
}
function initThemeToggle() {
@ -63,21 +70,21 @@ import { Icon } from "astro-icon/components";
initThemeToggle()
document.addEventListener('astro:after-swap', () => {
const storedTheme = localStorage.getItem('theme')
const storedTheme = localStorage.getItem('theme') || 'light'
const element = document.documentElement
element.classList.add('disable-transitions')
element.classList.add('[&_*]:transition-none')
window.getComputedStyle(element).getPropertyValue('opacity')
if (storedTheme === 'dark') {
element.classList.add('dark')
} else {
element.classList.remove('dark')
}
element.setAttribute('data-theme', storedTheme)
element.classList.remove('scheme-dark', 'scheme-light')
element.classList.add(
storedTheme === 'dark' ? 'scheme-dark' : 'scheme-light',
)
requestAnimationFrame(() => {
element.classList.remove('disable-transitions')
element.classList.remove('[&_*]:transition-none')
})
initThemeToggle()