d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-06-09 15:10:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

主题切换丝滑处理

Browse Source
This commit is contained in:
tangly1024.com
2024-02-01 11:57:31 +08:00
parent d5a53867e7
commit 66fc70e4f9
2 changed files with 6 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/ThemeSwitch.js
View File

@@ -25,7 +25,9 @@ const ThemeSwitch = () => {
const query = router.query const query = router.query
query.theme = newTheme query.theme = newTheme
router.push({ pathname: router.pathname, query }).then(() => { router.push({ pathname: router.pathname, query }).then(() => {
setIsLoading(false) setTimeout(() => {
setIsLoading(false)
}, 500);
}) })
} }
@@ -72,8 +74,8 @@ const ThemeSwitch = () => {
</Draggable> </Draggable>
{/* 切换主题加载时的全屏遮罩 */} {/* 切换主题加载时的全屏遮罩 */}
<div className={`${isLoading ? 'opacity-50 ' : 'opacity-0'} <div className={`${isLoading ? 'opacity-90 ' : 'opacity-0'}
w-screen h-screen bg-black text-white shadow-text flex justify-center items-center w-screen h-screen glassmorphism bg-black text-white shadow-text flex justify-center items-center
transition-all fixed top-0 left-0 pointer-events-none duration-1000 z-50 shadow-inner`}> transition-all fixed top-0 left-0 pointer-events-none duration-1000 z-50 shadow-inner`}>
<i className='text-3xl mr-5 fas fa-spinner animate-spin' /> <i className='text-3xl mr-5 fas fa-spinner animate-spin' />
</div> </div>

2
pages/_document.js
View File

@@ -28,7 +28,7 @@ class MyDocument extends Document {
})} })}
</Head> </Head>
<body className={`${BLOG.FONT_STYLE} font-light scroll-smooth`}> <body className={`${BLOG.FONT_STYLE} dark:bg-black font-light scroll-smooth`}>
<Main /> <Main />
<NextScript /> <NextScript />
</body> </body>