feat: implement theme transition animations and dark mode improvements

- Add view transition API for theme switching

- Update cycleTheme to handle animation circle

- Refactor CSS with consistent quoting and indentation

- Improve theme variable handling and no-op optimizations

- Pass event to cycleTheme in MenuComponent

frontend_nuxt/assets/global.css

@@ -30,7 +30,7 @@
 	--activity-card-background-color: #fafafa;
 }
 
-[data-theme='dark'] {
+[data-theme="dark"] {
 	--header-background-color: #2b2b2b;
 	--header-border-color: #555;
 	--primary-color: rgb(17, 182, 197);
@@ -59,7 +59,7 @@
 body {
 	margin: 0;
 	padding: 0;
-  font-family: 'Roboto', sans-serif;
+	font-family: "Roboto", sans-serif;
 	background-color: var(--normal-background-color);
 	color: var(--text-color);
 	/* 禁止滚动 */
@@ -149,7 +149,7 @@ body {
 	font-size: 13px;
 	position: sticky;
 	flex-shrink: 0;
-  font-family: 'Maple Mono', monospace;
+	font-family: "Maple Mono", monospace;
 	margin: 1em 0;
 	color: #888;
 	border-right: 1px solid #888;
@@ -164,7 +164,7 @@ body {
 }
 
 .info-content-text code {
-  font-family: 'Maple Mono', monospace;
+	font-family: "Maple Mono", monospace;
 	font-size: 13px;
 	border-radius: 4px;
 	white-space: no-wrap;
@@ -224,7 +224,7 @@ body {
 	font-weight: 600;
 }
 
-[data-theme='dark'] .info-content-text thead th {
+[data-theme="dark"] .info-content-text thead th {
 	background-color: var(--primary-color-hover); /* 暗色稍暗一点 */
 }
 
@@ -232,7 +232,7 @@ body {
 	background-color: rgba(208, 250, 255, 0.25); /* 斑马纹 */
 }
 
-[data-theme='dark'] .info-content-text tbody tr:nth-child(even) {
+[data-theme="dark"] .info-content-text tbody tr:nth-child(even) {
 	background-color: rgba(255, 255, 255, 0.05);
 }
 
@@ -303,6 +303,29 @@ body {
 	}
 }
 
+/* Transition API */
+::view-transition-old(root),
+::view-transition-new(root) {
+	animation: none;
+	mix-blend-mode: normal;
+}
+
+::view-transition-old(root) {
+	z-index: 1;
+}
+
+::view-transition-new(root) {
+	z-index: 2147483646;
+}
+
+[data-theme="dark"]::view-transition-old(root) {
+	z-index: 2147483646;
+}
+
+[data-theme="dark"]::view-transition-new(root) {
+	z-index: 1;
+}
+
 /* NProgress styles */
 #nprogress {
 	pointer-events: none;

frontend_nuxt/components/MenuComponent.vue

@@ -116,7 +116,7 @@
         </div>
       </div>
       <div class="menu-footer">
-        <div class="menu-footer-btn" @click="cycleTheme">
+        <div class="menu-footer-btn" @click="(e) => cycleTheme(e)">
           <i :class="iconClass"></i>
         </div>
       </div>

frontend_nuxt/utils/theme.js

@@ -14,19 +14,20 @@ export const themeState = reactive({
 })
 
 function apply(mode) {
-  if (!process.client) return
+  if (!import.meta.client) return
   const root = document.documentElement
-  if (mode === ThemeMode.SYSTEM) {
+  let newMode =
-    root.dataset.theme = window.matchMedia('(prefers-color-scheme: dark)').matches
+    mode === ThemeMode.SYSTEM
+      ? window.matchMedia('(prefers-color-scheme: dark)').matches
         ? 'dark'
         : 'light'
-  } else {
+      : mode
-    root.dataset.theme = mode
+  if (root.dataset.theme === newMode) return
-  }
+  root.dataset.theme = newMode
 }
 
 export function initTheme() {
-  if (!process.client) return
+  if (!import.meta.client) return
   const saved = localStorage.getItem(THEME_KEY)
   if (saved && Object.values(ThemeMode).includes(saved)) {
     themeState.mode = saved
@@ -35,15 +36,62 @@ export function initTheme() {
 }
 
 export function setTheme(mode) {
-  if (!process.client) return
+  if (!import.meta.client) return
   if (!Object.values(ThemeMode).includes(mode)) return
   themeState.mode = mode
   localStorage.setItem(THEME_KEY, mode)
   apply(mode)
 }
 
-export function cycleTheme() {
+function getCircle(event) {
-  if (!process.client) return
+  if (!import.meta.client) return undefined
+  const x = event.clientX
+  const y = event.clientY
+  return {
+    x,
+    y,
+    radius: Math.hypot(Math.max(x, window.innerWidth - x), Math.max(y, window.innerHeight - y)),
+  }
+}
+
+function withViewTransition(event, applyFn, direction = true) {
+  if (typeof document !== 'undefined' && document.startViewTransition) {
+    const transition = document.startViewTransition(async () => {
+      applyFn()
+      await nextTick()
+    })
+
+    transition.ready
+      .then(() => {
+        const { x, y, radius } = getCircle(event)
+
+        const clipPath = [`circle(0 at ${x}px ${y}px)`, `circle(${radius}px at ${x}px ${y}px)`]
+
+        document.documentElement.animate(
+          {
+            clipPath: direction ? clipPath : [...clipPath].reverse(),
+          },
+          {
+            duration: 400,
+            easing: 'ease-in-out',
+            pseudoElement: direction
+              ? '::view-transition-new(root)'
+              : '::view-transition-old(root)',
+          },
+        )
+      })
+      .catch(console.warn)
+  } else {
+    applyFn()
+  }
+}
+
+function getSystemTheme() {
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+}
+
+export function cycleTheme(event) {
+  if (!import.meta.client) return
   const modes = [ThemeMode.SYSTEM, ThemeMode.LIGHT, ThemeMode.DARK]
   const index = modes.indexOf(themeState.mode)
   const next = modes[(index + 1) % modes.length]
@@ -54,10 +102,31 @@ export function cycleTheme() {
   } else {
     toast.success('🌙 已经切换到暗色主题')
   }
+  // 获取当前真实主题
+  const currentTheme = themeState.mode === ThemeMode.SYSTEM ? getSystemTheme() : themeState.mode
+
+  // 获取新主题的真实表现
+  const nextTheme = next === ThemeMode.SYSTEM ? getSystemTheme() : next
+
+  // 如果新旧主题相同，不用过渡动画
+  if (currentTheme === nextTheme) {
     setTheme(next)
+    return
+  }
+
+  // 计算新主题是否是暗色
+  const newThemeIsDark = nextTheme === 'dark'
+
+  withViewTransition(
+    event,
+    () => {
+      setTheme(next)
+    },
+    !newThemeIsDark,
+  )
 }
 
-if (process.client && window.matchMedia) {
+if (import.meta.client && window.matchMedia) {
   window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
     if (themeState.mode === ThemeMode.SYSTEM) {
       apply(ThemeMode.SYSTEM)