Sunlit Theme 日/夜主题切换组件

一个基于 Vue 3 的日/夜主题切换组件，灵感来自 Sunlit Place 和 Daylight Computer。

特性

• 优雅的日/夜间主题切换效果
• 支持 v-model 双向绑定
• 提供 useSunlitTheme Hook，方便在整个应用中使用
• 支持作为 Vue 插件使用
• 完全可定制的 UI (通过插槽)
• 支持本地存储主题偏好
• 通过空格键切换主题

安装

npm install sunlit-theme

# 或者使用 yarn
yarn add sunlit-theme

# 或者使用 pnpm
pnpm add sunlit-theme

使用方法

基本用法

<template>
  <SunlitToggle v-model="isDark" />
</template>

<script setup>
import { ref } from "vue";
import { SunlitToggle } from "sunlit-theme";
import "sunlit-theme/style.css";

const isDark = ref(false);
</script>

使用 Hook

<template>
  <SunlitToggle v-model="isDark" />
  <button @click="toggle">程序化切换</button>
</template>

<script setup>
import { SunlitToggle, useSunlitTheme } from "sunlit-theme";
import "sunlit-theme/style.css";

const { isDark, toggle } = useSunlitTheme({
  initialDark: false,
  onChange: (value) => {
    console.log(`主题已切换为: ${value ? "夜间" : "日间"}模式`);
  },
});
</script>

自定义内容

<template>
  <SunlitToggle v-model="isDark">
    <!-- 自定义按钮内容 -->
    <template #button>
      <span> {{ isDark ? "变亮" : "变暗" }} </span>
    </template>

    <!-- 自定义状态显示 -->
    <template #status>
      <div class="custom-status">
        <div class="icon">{{ isDark ? "" : "" }}</div>
        <div class="text">当前: {{ isDark ? "夜间模式" : "日间模式" }}</div>
      </div>
    </template>
  </SunlitToggle>
</template>

<script setup>
import { ref } from "vue";
import { SunlitToggle } from "sunlit-theme";
import "sunlit-theme/style.css";

const isDark = ref(false);
</script>

作为 Vue 插件使用

import { createApp } from "vue";
import App from "./App.vue";
import SunlitTheme from "sunlit-theme";
import "sunlit-theme/style.css";

const app = createApp(App);
app.use(SunlitTheme);
app.mount("#app");

API

SunlitToggle 组件

Props

| 属性名 | 类型 | 默认值 | 说明 | | ---------------- | --------- | ------------ | ----------------- | | modelValue | boolean | false | 用于 v-model 绑定 | | label | string | '切换模式' | 按钮显示文本 | | animationEnabled | boolean | true | 是否启用动画 |

事件

| 事件名 | 参数 | 说明 | | ----------------- | ------------------ | ---------------- | | update:modelValue | (value: boolean) | v-model 更新事件 | | change | (value: boolean) | 主题切换事件 |

插槽

| 插槽名 | 说明 | | ------ | ------------------ | | button | 自定义按钮内容 | | status | 自定义状态显示内容 |

useSunlitTheme Hook

参数

| 参数名 | 类型 | 默认值 | 说明 | | --------------- | --------------------------- | --------------------- | ------------------ | | initialDark | boolean | false | 初始主题状态 | | storageKey | string | 'sunlit-theme-mode' | 本地存储的键名 | | onChange | (isDark: boolean) => void | undefined | 主题变化时的回调 | | enableStorage | boolean | true | 是否启用本地存储 | | updateHtmlClass | boolean | true | 是否更新 HTML 类名 | | darkClassName | string | 'dark-mode' | 暗色模式对应的类名 |

返回值

| 属性名 | 类型 | 说明 | | ------- | -------------------------- | ------------------------ | | isDark | Ref<boolean> | 当前主题状态的响应式引用 | | toggle | () => void | 切换主题的函数 | | setDark | (value: boolean) => void | 设置主题状态的函数 |

打包与开发

安装依赖

pnpm install

开发

pnpm dev

打包组件库

pnpm build:lib

许可证

MIT