buyfakett/kazoottt-blog
1
0
Fork 0
mirror of https://github.com/KazooTTT/kazoottt-blog.git synced 2025-06-23 10:41:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add theme change in mobile mode

Browse Source
This commit is contained in:
KazooTTT
2024-11-29 18:44:39 +08:00
parent 1b53269657
commit 3881cd6173
2 changed files with 40 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/layout/Header.astro
View File

@ -158,7 +158,7 @@ import { Image } from 'astro:assets'
href='/categories'
class={`block py-2 text-[1.05rem] font-medium ${Astro.url.pathname.startsWith('/categories') ? 'text-green-400' : ''}`}
>
Cats.
Categories
</a>
<a
href='/tags'
@ -184,6 +184,32 @@ import { Image } from 'astro:assets'
>
Friends
</a>
<button
id='mobileToggleDarkMode'
class='mt-2 flex w-full items-center py-2 text-[1.05rem] font-medium'
>
<span>Theme</span>
<svg
xmlns='http://www.w3.org/2000/svg'
width='32'
height='32'
viewBox='0 0 24 24'
class='ml-2 h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:hidden dark:-rotate-90 dark:scale-0'
><path
fill='currentColor'
d='M12 15q1.25 0 2.125-.875T15 12q0-1.25-.875-2.125T12 9q-1.25 0-2.125.875T9 12q0 1.25.875 2.125T12 15m0 1q-1.671 0-2.836-1.164T8 12q0-1.671 1.164-2.836T12 8q1.671 0 2.836 1.164T16 12q0 1.671-1.164 2.836T12 16m-7-3.5H1.5v-1H5zm17.5 0H19v-1h3.5zM11.5 5V1.5h1V5zm0 17.5V19h1v3.5zM6.746 7.404l-2.16-2.098l.695-.744l2.111 2.134zM18.72 19.438l-2.117-2.14l.652-.702l2.16 2.098zM16.596 6.746l2.098-2.16l.744.695l-2.134 2.111zM4.562 18.72l2.14-2.117l.663.652l-2.078 2.179zM12 12'
></path></svg>
<svg
xmlns='http://www.w3.org/2000/svg'
width='32'
height='32'
viewBox='0 0 24 24'
class='ml-2 hidden h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:block dark:rotate-0 dark:scale-100'
><path
fill='currentColor'
d='M12.058 20q-3.334 0-5.667-2.333Q4.058 15.333 4.058 12q0-3.038 1.98-5.27Q8.02 4.5 10.942 4.097q.081 0 .159.006t.153.017q-.506.706-.801 1.57q-.295.865-.295 1.811q0 2.667 1.866 4.533q1.867 1.867 4.534 1.867q.952 0 1.813-.295q.862-.295 1.548-.801q.012.075.018.153q.005.078.005.158q-.384 2.923-2.615 4.904T12.057 20'
></path></svg>
</button>
</div>
</div>
</nav>
@ -196,9 +222,9 @@ import { Image } from 'astro:assets'
function setupDarkModeToggle() {
const toggleDarkModeButton = document.getElementById('toggleDarkMode')
if (!toggleDarkModeButton) return
const mobileToggleDarkMode = document.getElementById('mobileToggleDarkMode')
toggleDarkModeButton.addEventListener('click', () => {
function toggleTheme() {
const currentTheme = getCurrentTheme()
const newTheme = currentTheme === 'dark' ? 'light' : 'dark'
localStorage.setItem('theme', newTheme)
@ -206,7 +232,15 @@ import { Image } from 'astro:assets'
// Dispatch theme change event
window.dispatchEvent(new CustomEvent('theme-change', { detail: { theme: newTheme } }))
})
}
if (toggleDarkModeButton) {
toggleDarkModeButton.addEventListener('click', toggleTheme)
}
if (mobileToggleDarkMode) {
mobileToggleDarkMode.addEventListener('click', toggleTheme)
}
}
function setupMobileMenu() {

2
src/layouts/BlogPost.astro
View File

@ -48,7 +48,7 @@ const { headings } = await post.render()
</div>
<div
id='blog-gallery'
class='prose prose-base prose-zinc mt-12 text-muted-foreground dark:prose-invert prose-headings:font-medium prose-headings:text-foreground prose-headings:before:absolute prose-headings:before:-ms-4 prose-code:bg-green-200 prose-th:before:content-none prose-img:shadow dark:prose-code:bg-gray-800'
class='prose prose-base prose-zinc mt-12 text-muted-foreground dark:prose-invert prose-headings:font-medium prose-headings:text-foreground prose-headings:before:absolute prose-headings:before:-ms-4 prose-th:before:content-none prose-img:shadow'
>
<slot />
</div>