mirror of
https://github.com/reonokiy/blog.nokiy.net.git
synced 2025-06-15 19:22:52 +02:00
fix: mobile browser issues and dark mode flicker
- 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
parent
60e31ebe35
commit
6ff3d30f80
3 changed files with 38 additions and 37 deletions
|
|
@ -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 && (
|
||||
|
|
|
|||
|
|
@ -1,19 +1,3 @@
|
|||
<button
|
||||
aria-pressed="false"
|
||||
aria-label="Theme Toggle Button"
|
||||
class="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>
|
||||
<path d="m11.64 12.36c-3.6-3.6-4.14-8.89-2.8-10.66-2.39 1.75-1.88 7.86 1.86 11.6s9.86 4.28 11.6 1.86c-1.77 1.34-7.06.8-10.66-2.8" />
|
||||
<path d="m5.22 4.01a10 10 0 0 1 3.54-2.28c-2.02.47-3.24 1.19-4.54 2.49-4.3 4.3-4.3 11.26 0 15.55 4.29 4.29 11.26 4.3 15.55 0 1.3-1.3 2.27-2.68 2.51-4.6a9.8 9.8 0 0 1 -2.3 3.6c-3.96 3.96-10.48 3.86-14.56-.21-4.08-4.08-4.18-10.6-.21-14.56z" />
|
||||
</g>
|
||||
</svg>
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="sun-icon" fill="currentColor">
|
||||
<path d="m4.22 4.22c-4.3 4.3-4.3 11.26 0 15.56s11.26 4.3 15.56 0 4.3-11.26 0-15.56-11.26-4.3-15.56 0m15.17 15.17c-3.63 3.63-9.88 3.26-13.96-.82s-4.45-10.33-.82-13.96 9.88-3.26 13.96.82 4.45 10.33.82 13.96" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<script>
|
||||
declare global {
|
||||
interface Document {
|
||||
|
|
@ -25,12 +9,8 @@ const TOGGLE = document.querySelector('button[aria-pressed]') as HTMLButtonEleme
|
|||
if (!TOGGLE)
|
||||
throw new Error('Theme toggle button not found')
|
||||
|
||||
const defaultDark = window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
const savedTheme = localStorage.getItem('theme')
|
||||
const initialTheme = savedTheme || (defaultDark ? 'dark' : 'light')
|
||||
|
||||
TOGGLE.setAttribute('aria-pressed', initialTheme === 'dark' ? 'true' : 'false')
|
||||
document.documentElement.classList.toggle('dark', initialTheme === 'dark')
|
||||
const isDark = document.documentElement.classList.contains('dark')
|
||||
TOGGLE.setAttribute('aria-pressed', String(isDark))
|
||||
|
||||
function SWITCH() {
|
||||
const isDark = !TOGGLE.matches('[aria-pressed=true]')
|
||||
|
|
@ -51,12 +31,18 @@ function TOGGLE_THEME() {
|
|||
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"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="moon-icon" fill="currentColor">
|
||||
<g>
|
||||
<path d="m11.64 12.36c-3.6-3.6-4.14-8.89-2.8-10.66-2.39 1.75-1.88 7.86 1.86 11.6s9.86 4.28 11.6 1.86c-1.77 1.34-7.06.8-10.66-2.8" />
|
||||
<path d="m5.22 4.01a10 10 0 0 1 3.54-2.28c-2.02.47-3.24 1.19-4.54 2.49-4.3 4.3-4.3 11.26 0 15.55 4.29 4.29 11.26 4.3 15.55 0 1.3-1.3 2.27-2.68 2.51-4.6a9.8 9.8 0 0 1 -2.3 3.6c-3.96 3.96-10.48 3.86-14.56-.21-4.08-4.08-4.18-10.6-.21-14.56z" />
|
||||
</g>
|
||||
</svg>
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="sun-icon" fill="currentColor">
|
||||
<path d="m4.22 4.22c-4.3 4.3-4.3 11.26 0 15.56s11.26 4.3 15.56 0 4.3-11.26 0-15.56-11.26-4.3-15.56 0m15.17 15.17c-3.63 3.63-9.88 3.26-13.96-.82s-4.45-10.33-.82-13.96 9.88-3.26 13.96.82 4.45 10.33.82 13.96" />
|
||||
</svg>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -4,10 +4,15 @@
|
|||
--uno-colors-background: theme('colors.background');
|
||||
}
|
||||
html {
|
||||
--at-apply: 'antialiased scroll-smooth text-62.5%';
|
||||
--at-apply: 'min-h-screen min-h-dvh scroll-smooth antialiased text-62.5%';
|
||||
}
|
||||
body {
|
||||
--at-apply: 'bg-background min-h-dvh c-primary text-1.6rem';
|
||||
--at-apply: 'min-h-screen min-h-dvh bg-background text-primary text-1.6rem';
|
||||
}
|
||||
@supports not (view-transition-name: none) {
|
||||
body {
|
||||
--at-apply: 'transition-all duration-500 ease-in-out';
|
||||
}
|
||||
}
|
||||
h1, h2, h3 {
|
||||
text-rendering: optimizeLegibility;
|
||||
|
|
@ -43,11 +48,13 @@ html:not(.dark) {
|
|||
--from: 100% 0 0 0;
|
||||
}
|
||||
::view-transition-new(root) {
|
||||
transition: none;
|
||||
animation: reveal 1s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
clip-path: inset(0 0 0 0);
|
||||
z-index: 2;
|
||||
}
|
||||
::view-transition-old(root) {
|
||||
z-index: -1;
|
||||
transition: none;
|
||||
animation: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue