Theme switching, cinematic

15 种形状揭开新主题，React / Vue / Next.js / Nuxt 通用。

在下方试玩 15 种动画GitHub
theme-switch-animation 产品宣传片封面
Features

小而完整的动画层

约 95% 代码与框架无关，两个薄适配层覆盖 React 与 Vue 生态。

跨框架

一套核心，四种用法：React / Vue composable、Next.js 受控示例、Nuxt 模块自动导入。

React 18+Vue 3+Next.jsNuxt 3+

15 种动画

圆形 / 形状 / 百叶窗 / 扫描 / 格子 / 涟漪 / 扇形 / 双开门，方向与参数可调；9 个类型支持 reverse 反向揭开。

CIRCLERIPPLECLOCK_SWEEPBLINDS…

受控模式

不独占主题状态：next-themes 与 @nuxtjs/color-mode 用户直接接入，300ms 未同步自动直切。

next-themes@nuxtjs/color-mode

多实例同步

同页多个实例的 isDark 以 html class 为事实源镜像，其它标签页经 storage 事件同步。

observeThemeClassfinished

优雅降级

不支持 View Transitions、SSR、prefers-reduced-motion：跳过动画，状态永远正确。

SSR 安全reduced-motion
Quick Start

三行代码接入

四个入口，同一套 API。

npm install theme-switch-animation
'use client'
import { ThemeAnimationType, useThemeAnimation } from 'theme-switch-animation/react'


export function ThemeToggle() {
  // 非受控：库管理 localStorage + <html> class
  // 多实例 / 跨标签页的 isDark 自动同步（以 html class 为事实源）
  const { ref, toggleTheme, isDark, finished } = useThemeAnimation({
    animationType: ThemeAnimationType.CIRCLE,
    duration: 750,
  })


  return (
    <button ref={ref} onClick={toggleTheme}>
      {isDark ? '🌙' : '☀️'}
      {/* finished：本次动画结束 Promise，可 await 做动画期间禁用 */}
    </button>
  )
}

FAQ