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

fix: mobile browser issues and dark mode flicker

Browse source 
- Fix mobile browser navigation bar color not changing
- Remove scrollbar appearing under 100dvh
- Fix dark mode page transition flicker
This commit is contained in:
radishzzz 2025-01-20 12:52:39 +00:00
parent 60e31ebe35
commit 6ff3d30f80
3 changed files with 38 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

14
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} />
@ -92,6 +92,14 @@ const { cdn, commentURL = '', imageHostURL = '', customGoogleAnalyticsURL = '',
{yandex && <meta name="yandex-verification" content={yandex} />}
{baidu && <meta name="baidu-site-verification" content={baidu} />}
<!-- Theme Toggle -->
<script is:inline>
const savedTheme = localStorage.getItem('theme')
const defaultDark = window.matchMedia('(prefers-color-scheme: dark)').matches
const theme = savedTheme || (defaultDark ? 'dark' : 'light')
document.documentElement.classList.toggle('dark', theme === 'dark')
</script>
<!-- Google Analytics -->
{
googleAnalyticsID && (