reonokiy/blog
1
0
Fork 0
mirror of https://github.com/reonokiy/blog.nokiy.net.git synced 2025-06-15 19:22:52 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: issues in last commit

Browse source
This commit is contained in:
radishzzz 2025-01-20 13:51:19 +00:00
parent 6ff3d30f80
commit 42fa1be00f
3 changed files with 39 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/Head.astro
View file

@ -27,9 +27,9 @@ const { cdn, commentURL = '', imageHostURL = '', customGoogleAnalyticsURL = '',
<meta name="description" content={postDescription || description} />
<meta name="author" content={author} />
<meta name="generator" content={Astro.generator} />
<meta name="theme-color" content=`"${lightMode}"` />
<meta name="theme-color" media="(prefers-color-scheme: light)" content={`"${lightMode}"`} />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content={`"${darkMode}"`} />
<meta name="theme-color" content={lightMode} />
<meta name="theme-color" media="(prefers-color-scheme: light)" content={lightMode} />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content={darkMode} />
<meta itemprop="name" content={postTitle || title} />
<meta itemprop="image" content={postImage || siteScreenshot} />
<meta itemprop="description" content={postDescription || subtitle} />

58
src/components/ThemeToggle.astro
View file

@ -1,40 +1,50 @@
<script>
declare global {
interface Document {
startViewTransition: (callback: () => void) => void
declare global {
interface Document {
startViewTransition: (callback: () => void) => void
}
}
}
const TOGGLE = document.querySelector('button[aria-pressed]') as HTMLButtonElement
if (!TOGGLE)
throw new Error('Theme toggle button not found')
const TOGGLE = document.querySelector('button[aria-pressed]') as HTMLButtonElement
if (!TOGGLE)
throw new Error('Theme toggle button not found')
const isDark = document.documentElement.classList.contains('dark')
TOGGLE.setAttribute('aria-pressed', String(isDark))
function SWITCH() {
const isDark = !TOGGLE.matches('[aria-pressed=true]')
const isDark = document.documentElement.classList.contains('dark')
TOGGLE.setAttribute('aria-pressed', String(isDark))
const newTheme = isDark ? 'dark' : 'light'
document.documentElement.classList.toggle('dark', isDark)
localStorage.setItem('theme', newTheme)
}
function TOGGLE_THEME() {
if (!document.startViewTransition) {
SWITCH()
return
function SWITCH() {
const isDark = !TOGGLE.matches('[aria-pressed=true]')
TOGGLE.setAttribute('aria-pressed', String(isDark))
const newTheme = isDark ? 'dark' : 'light'
document.documentElement.classList.toggle('dark', isDark)
localStorage.setItem('theme', newTheme)
}
document.startViewTransition(SWITCH)
}
TOGGLE.addEventListener('click', TOGGLE_THEME)
function TOGGLE_THEME() {
if (!document.startViewTransition) {
SWITCH()
return
}
document.startViewTransition(SWITCH)
}
TOGGLE.addEventListener('click', TOGGLE_THEME)
</script>
<style>
[aria-pressed='true'] .moon-icon,
.sun-icon {
display: none;
}
[aria-pressed='true'] .sun-icon {
display: block;
}
</style>
<button
aria-pressed="false"
aria-label="Theme Toggle Button"
class="absolute right-10 top-10 z-999 aspect-square w-8 text-secondary [&[aria-pressed='true']_.sun-icon]:block [&_.sun-icon]:hidden [&[aria-pressed='true']_.moon-icon]:hidden"
class="absolute right-10 top-10 z-999 aspect-square w-8 text-secondary"
>
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="moon-icon" fill="currentColor">
<g>

4
src/styles/global.css
View file

@ -4,10 +4,10 @@
--uno-colors-background: theme('colors.background');
}
html {
--at-apply: 'min-h-screen min-h-dvh scroll-smooth antialiased text-62.5%';
--at-apply: 'h-[-webkit-fill-available] scroll-smooth antialiased text-62.5%';
}
body {
--at-apply: 'min-h-screen min-h-dvh bg-background text-primary text-1.6rem';
--at-apply: 'min-h-screen min-h-[-webkit-fill-available] bg-background text-primary text-1.6rem';
}
@supports not (view-transition-name: none) {
body {