ad-sun-moon-switch

基于 Vue 3 的优雅主题切换组件：iOS 风格开关 + 点击时全屏播放太阳/月亮交替过渡层（天空渐变、日月沿抛物线滑落/升起、夜晚浮现星星），效果参考 liuyuyang.net。

特性

• ☀️ 点击开关 → 全屏过渡层：太阳滑落、月亮升起（反之亦然），天空在白天/夜晚色间渐变
• 🌙 支持 prefers-reduced-motion：用户偏好减少动效时直接切换
• 🧊 主题通过 html.dark 类 + CSS 变量驱动，颜色 0.3s 平滑过渡
• 💾 主题选择持久化到 localStorage
• 🧩 零依赖（仅 peer 依赖 vue）

安装

npm install ad-sun-moon-switch

使用

全局注册（推荐）

// main.js
import { createApp } from 'vue'
import VueSunMoonSwitch from 'ad-sun-moon-switch'
import 'ad-sun-moon-switch/style.css' // 主题变量样式（必引）

createApp(App).use(VueSunMoonSwitch).mount('#app')

<template>
  <VueSunMoonSwitch position="top-right" />
</template>

按需引入

<script setup>
import VueSunMoonSwitch from 'ad-sun-moon-switch'
import 'ad-sun-moon-switch/style.css'
</script>

<template>
  <VueSunMoonSwitch position="top-left" />
</template>

Props

| 名称 | 类型 | 默认值 | 说明 | |---|---|---|---| | position | string \| object | 'top-right' | 开关位置：top-right / top-left / bottom-right / bottom-left，或传入 CSS 定位对象如 { top: '20px', left: '20px' } |

自定义主题色

页面主题色由 CSS 变量控制，可在自己的样式中覆盖：

:root {
  --vsm-bg: #f5f7fb;            /* 白天背景 */
  --vsm-text: #1f2937;          /* 白天文字 */
  --vsm-text-secondary: #6b7280;
}

html.dark {
  --vsm-bg: #0b1120;            /* 夜晚背景 */
  --vsm-text: #f1f5f9;
  --vsm-text-secondary: #94a3b8;
}

发布到 npm（作者自用）

npm run build          # 构建库产物（dist/）与 demo
npm login              # 登录 npm 账号（仅首次）
npm publish            # 发布

发布后即可在其他项目安装使用：

npm install ad-sun-moon-switch

License

MIT