主题切换丝滑处理

2026-05-14 07:26:52 +00:00 · 2024-02-01 11:57:31 +08:00
parent d5a53867e7
commit 66fc70e4f9
2 changed files with 6 additions and 4 deletions
--- a/components/ThemeSwitch.js
+++ b/components/ThemeSwitch.js
@@ -25,7 +25,9 @@ const ThemeSwitch = () => {
    const query = router.query
    query.theme = newTheme
    router.push({ pathname: router.pathname, query }).then(() => {
-      setIsLoading(false)
+      setTimeout(() => {
+        setIsLoading(false)
+      }, 500);
    })
  }

@@ -72,8 +74,8 @@ const ThemeSwitch = () => {
        </Draggable>

        {/* 切换主题加载时的全屏遮罩 */}
-        <div className={`${isLoading ? 'opacity-50 ' : 'opacity-0'} 
-            w-screen h-screen bg-black text-white shadow-text flex justify-center items-center
+        <div className={`${isLoading ? 'opacity-90 ' : 'opacity-0'} 
+            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`}>
            <i className='text-3xl mr-5 fas fa-spinner animate-spin' />
        </div>
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -28,7 +28,7 @@ class MyDocument extends Document {
                  })}
                </Head>

-                <body className={`${BLOG.FONT_STYLE} font-light scroll-smooth`}>
+                <body className={`${BLOG.FONT_STYLE} dark:bg-black font-light scroll-smooth`}>
                    <Main />
                    <NextScript />
                </body>