npm - @zeldafox/vue-tailwind-theme-kit - Versions diffs - 1.0.0 - Mend

@zeldafox/vue-tailwind-theme-kit 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/README.md +237 -0
package/dist/composables/useTheme.d.ts +12 -0
package/dist/index.d.ts +8 -0
package/dist/index.es.js +421 -0
package/dist/index.umd.js +1 -0
package/dist/themes/index.d.ts +3 -0
package/dist/types/index.d.ts +11 -0
package/package.json +35 -0
package/preset.cjs +70 -0

package/README.md ADDED Viewed

@@ -0,0 +1,237 @@
+# @zeldafox/vue-tailwind-theme-kit
+一个为 Vue 3 和 TailwindCSS 量身定制的**动态主题库**。支持动态切换主题色、暗色模式、系统偏好感应、SSR (服务端渲染) 安全隔离，并支持用户自定义扩展主题。
+## 特性
+* 🎨 **动态全套主题切换**：内置包含 `theme`（默认样式）、`claude`、`twitter` 和 `vercel` 四套精美预设。
+* 🌓 **全属性映射**：通过 Tailwind CSS 预设自动扩展 `colors`（如 `background`、`foreground`、`primary`、`secondary`、`card`、`sidebar`、`muted` 等）、`borderRadius`、`fontFamily` 变量。
+* 🌓 **暗色模式切换**：支持手动切换、显式设置以及自动跟随系统偏好（`prefers-color-scheme`）。
+* ⚡ **SSR 安全设计**：使用 Vue `provide` / `inject` 进行应用级状态隔离，完全规避多请求下的跨请求状态污染，对 Nuxt 3 友好。
+* 📦 **现代打包格式**：支持导出 ESM 与 UMD 两种模块格式，附带完整的 TypeScript 类型声明支持。
+* ✨ **防闪烁支持**：提供客户端/服务端首屏加载时防颜色闪烁 (Anti-FOUC) 最佳实践。
+---
+## 安装
+```bash
+npm install @zeldafox/vue-tailwind-theme-kit
+```
+---
+## 快速上手
+### 1. 引入 Tailwind CSS 预设
+在项目的 `tailwind.config.js`（或 `tailwind.config.mjs`）中引入库预设：
+```javascript
+import themePreset from "@zeldafox/vue-tailwind-theme-kit/preset";
+export default {
+  presets: [themePreset],
+  content: [
+    "./index.html",
+    "./src/**/*.{vue,js,ts,jsx,tsx}",
+  ],
+};
+```
+### 2. 注册 Vue 插件
+在项目入口文件（例如 `main.ts` 或 `main.js`）中注册：
+```typescript
+import { createApp } from 'vue';
+import App from './App.vue';
+import { themePlugin } from '@zeldafox/vue-tailwind-theme-kit';
+// 引入基础 Tailwind 样式
+import './assets/main.css';
+const app = createApp(App);
+app.use(themePlugin, {
+  defaultTheme: 'theme', // 默认内置主题，可选 'theme' | 'claude' | 'twitter' | 'vercel'
+  // defaultDark: false, // 是否默认启用暗色模式。若不填则自动感应系统深浅色偏好
+});
+app.mount('#app');
+```
+### 3. 在业务组件中使用
+在 Vue 组件中通过 `useTheme()` 轻松控制和感应主题状态：
+```html
+<template>
+  <div class="min-h-screen bg-background text-foreground transition-colors duration-200 font-sans">
+    <div class="max-w-2xl mx-auto p-8 space-y-6">
+      <div class="p-6 bg-card text-card-foreground rounded-lg border border-border shadow-md">
+        <h2 class="text-2xl font-bold text-primary mb-2">动态主题展示</h2>
+        <p class="text-muted-foreground">当前主题名称: <strong class="text-foreground">{{ theme }}</strong></p>
+        <p class="text-muted-foreground">当前模式: <strong class="text-foreground">{{ isDark ? '深色 🌙' : '浅色 ☀️' }}</strong></p>
+      </div>
+      <div class="flex flex-wrap gap-4">
+        <button
+          @click="setTheme('theme')"
+          class="px-4 py-2 bg-primary text-primary-foreground hover:opacity-90 rounded-md shadow transition"
+        >
+          默认主题 (theme)
+        </button>
+        <button
+          @click="setTheme('claude')"
+          class="px-4 py-2 bg-primary text-primary-foreground hover:opacity-90 rounded-md shadow transition"
+        >
+          Claude 主题
+        </button>
+        <button
+          @click="setTheme('twitter')"
+          class="px-4 py-2 bg-primary text-primary-foreground hover:opacity-90 rounded-md shadow transition"
+        >
+          Twitter 主题
+        </button>
+        <button
+          @click="setTheme('vercel')"
+          class="px-4 py-2 bg-primary text-primary-foreground hover:opacity-90 rounded-md shadow transition"
+        >
+          Vercel 主题
+        </button>
+        <button
+          @click="toggleDarkMode"
+          class="px-4 py-2 border border-border text-foreground rounded-md hover:bg-muted transition"
+        >
+          切换暗色模式
+        </button>
+        <button
+          @click="setDarkMode(true)"
+          class="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:opacity-90 transition"
+        >
+          强行启用暗色
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { useTheme } from '@zeldafox/vue-tailwind-theme-kit';
+const { theme, isDark, setTheme, setDarkMode, toggleDarkMode } = useTheme();
+</script>
+```
+---
+## 进阶配置与自定义主题
+你可以在插件初始化时，通过 `extraThemes` 选项传入自定义的主题配置（颜色格式推荐与 CSS 规范相符，例如 `oklch(...)`、`hsl(...)` 或 `rgb(...)`，它们可直接适配预设配置下的透明度感知）：
+```typescript
+import { themePlugin } from '@zeldafox/vue-tailwind-theme-kit';
+app.use(themePlugin, {
+  defaultTheme: 'sunset',
+  extraThemes: {
+    sunset: {
+      name: 'sunset',
+      light: {
+        background: 'oklch(0.98 0.02 80)',
+        foreground: 'oklch(0.15 0.05 40)',
+        card: 'oklch(1 0 0)',
+        'card-foreground': 'oklch(0.15 0.05 40)',
+        popover: 'oklch(1 0 0)',
+        'popover-foreground': 'oklch(0.15 0.05 40)',
+        primary: 'oklch(0.65 0.22 45)', // 亮橘色
+        'primary-foreground': 'oklch(0.99 0.01 90)',
+        secondary: 'oklch(0.95 0.02 80)',
+        'secondary-foreground': 'oklch(0.15 0.05 40)',
+        muted: 'oklch(0.95 0.02 80)',
+        'muted-foreground': 'oklch(0.45 0.05 40)',
+        accent: 'oklch(0.95 0.02 80)',
+        'accent-foreground': 'oklch(0.15 0.05 40)',
+        destructive: 'oklch(0.57 0.23 27)',
+        'destructive-foreground': 'oklch(1 0 0)',
+        border: 'oklch(0.92 0.02 80)',
+        input: 'oklch(0.92 0.02 80)',
+        ring: 'oklch(0.65 0.22 45)',
+        radius: '0.5rem',
+        'font-sans': 'sans-serif'
+      },
+      dark: {
+        background: 'oklch(0.15 0.05 40)',
+        foreground: 'oklch(0.98 0.02 80)',
+        card: 'oklch(0.18 0.04 40)',
+        'card-foreground': 'oklch(0.98 0.02 80)',
+        popover: 'oklch(0.18 0.04 40)',
+        'popover-foreground': 'oklch(0.98 0.02 80)',
+        primary: 'oklch(0.70 0.20 45)',
+        'primary-foreground': 'oklch(0.15 0.05 40)',
+        secondary: 'oklch(0.22 0.04 40)',
+        'secondary-foreground': 'oklch(0.98 0.02 80)',
+        muted: 'oklch(0.22 0.04 40)',
+        'muted-foreground': 'oklch(0.75 0.02 80)',
+        accent: 'oklch(0.22 0.04 40)',
+        'accent-foreground': 'oklch(0.98 0.02 80)',
+        destructive: 'oklch(0.57 0.23 27)',
+        'destructive-foreground': 'oklch(1 0 0)',
+        border: 'oklch(0.25 0.04 40)',
+        input: 'oklch(0.25 0.04 40)',
+        ring: 'oklch(0.70 0.20 45)',
+        radius: '0.5rem',
+        'font-sans': 'sans-serif'
+      }
+    }
+  }
+});
+```
+---
+## 最佳实践：防止首屏闪烁 (Anti-FOUC)
+由于 CSS 变量的挂载和暗色类名触发依赖于 JavaScript 执行，在首屏加载时，页面可能会短暂地显露浅色背景。
+为了保证极致的视觉体验，建议在项目的 `index.html` 模板 `<head>` 中植入以下极简内联脚本。这段脚本优先执行且不依赖任何框架包，可以实现无缝的暗色模式首屏加载：
+```html
+<script>
+  (function() {
+    try {
+      const savedTheme = localStorage.getItem('ui-theme') || 'theme';
+      const savedDark = localStorage.getItem('ui-dark-mode');
+      const isDark = savedDark !== null ? savedDark === 'true' : window.matchMedia('(prefers-color-scheme: dark)').matches;
+      // 提前注入 dark 类名防闪烁
+      if (isDark) {
+        document.documentElement.classList.add('dark');
+      } else {
+        document.documentElement.classList.remove('dark');
+      }
+    } catch (e) {}
+  })();
+</script>
+```
+---
+## 开发与构建
+1. 安装依赖：
+   ```bash
+   npm install
+   ```
+2. 执行编译：
+   ```bash
+   npm run build
+   ```
+   该指令将使用 Vite 打包并将包编译生成到 `dist/` 文件夹下，包含 `index.es.js`, `index.umd.js` 以及 TypeScript 定义文件 `index.d.ts`。
+---
+## 授权许可
+[MIT License](LICENSE)

package/dist/composables/useTheme.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { InjectionKey, Ref } from 'vue';
+export interface ThemeState {
+    theme: Ref<string>;
+    isDark: Ref<boolean>;
+    setTheme: (themeName: string) => void;
+    setDarkMode: (value: boolean) => void;
+    toggleDarkMode: () => void;
+}
+export declare const ThemeSymbol: InjectionKey<ThemeState>;
+export declare function createThemeState(defaultThemeName?: string, defaultDark?: boolean): ThemeState;
+export declare function useTheme(): ThemeState;

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import { App } from 'vue';
+import { PluginOptions } from './types';
+export declare const themePlugin: {
+    install(app: App, options?: PluginOptions): void;
+};
+export { useTheme } from './composables/useTheme';
+export type { ThemeConfig, ThemeColors, PluginOptions } from './types';

package/dist/index.es.js ADDED Viewed

@@ -0,0 +1,421 @@
+import { inject as b, ref as n } from "vue";
+const s = {
+  theme: {
+    name: "theme",
+    light: {
+      background: "oklch(1 0 0)",
+      foreground: "oklch(0.145 0 0)",
+      card: "oklch(1 0 0)",
+      "card-foreground": "oklch(0.145 0 0)",
+      popover: "oklch(1 0 0)",
+      "popover-foreground": "oklch(0.145 0 0)",
+      primary: "oklch(0.205 0 0)",
+      "primary-foreground": "oklch(0.985 0 0)",
+      secondary: "oklch(0.97 0 0)",
+      "secondary-foreground": "oklch(0.205 0 0)",
+      muted: "oklch(0.97 0 0)",
+      "muted-foreground": "oklch(0.556 0 0)",
+      accent: "oklch(0.97 0 0)",
+      "accent-foreground": "oklch(0.205 0 0)",
+      destructive: "oklch(0.577 0.245 27.325)",
+      "destructive-foreground": "oklch(1 0 0)",
+      border: "oklch(0.922 0 0)",
+      input: "oklch(0.922 0 0)",
+      ring: "oklch(0.708 0 0)",
+      "chart-1": "oklch(0.81 0.10 252)",
+      "chart-2": "oklch(0.62 0.19 260)",
+      "chart-3": "oklch(0.55 0.22 263)",
+      "chart-4": "oklch(0.49 0.22 264)",
+      "chart-5": "oklch(0.42 0.18 266)",
+      radius: "0.625rem",
+      spacing: "0.25rem",
+      "letter-spacing": "0em",
+      "shadow-color": "oklch(0 0 0)",
+      "shadow-opacity": "0.1",
+      "shadow-blur": "3px",
+      "shadow-spread": "0px",
+      "shadow-offset-x": "0",
+      "shadow-offset-y": "1px",
+      "font-sans": "ui-sans-serif, system-ui, sans-serif",
+      "font-serif": "ui-serif, Georgia, serif",
+      "font-mono": "ui-monospace, SFMono-Regular, monospace"
+    },
+    dark: {
+      background: "oklch(0.145 0 0)",
+      foreground: "oklch(0.985 0 0)",
+      card: "oklch(0.205 0 0)",
+      "card-foreground": "oklch(0.985 0 0)",
+      popover: "oklch(0.205 0 0)",
+      "popover-foreground": "oklch(0.985 0 0)",
+      primary: "oklch(0.922 0 0)",
+      "primary-foreground": "oklch(0.205 0 0)",
+      secondary: "oklch(0.269 0 0)",
+      "secondary-foreground": "oklch(0.985 0 0)",
+      muted: "oklch(0.269 0 0)",
+      "muted-foreground": "oklch(0.708 0 0)",
+      accent: "oklch(0.269 0 0)",
+      "accent-foreground": "oklch(0.985 0 0)",
+      destructive: "oklch(0.577 0.245 27.325)",
+      "destructive-foreground": "oklch(1 0 0)",
+      border: "oklch(0.269 0 0)",
+      input: "oklch(0.269 0 0)",
+      ring: "oklch(0.556 0 0)",
+      "chart-1": "oklch(0.81 0.10 252)",
+      "chart-2": "oklch(0.62 0.19 260)",
+      "chart-3": "oklch(0.55 0.22 263)",
+      "chart-4": "oklch(0.49 0.22 264)",
+      "chart-5": "oklch(0.42 0.18 266)",
+      radius: "0.625rem",
+      spacing: "0.25rem",
+      "letter-spacing": "0em",
+      "shadow-color": "oklch(0 0 0)",
+      "shadow-opacity": "0.2",
+      "shadow-blur": "4px",
+      "shadow-spread": "0px",
+      "shadow-offset-x": "0",
+      "shadow-offset-y": "2px",
+      "font-sans": "ui-sans-serif, system-ui, sans-serif",
+      "font-serif": "ui-serif, Georgia, serif",
+      "font-mono": "ui-monospace, SFMono-Regular, monospace"
+    }
+  },
+  claude: {
+    name: "claude",
+    light: {
+      ring: "oklch(0.6171 0.1375 39.0427)",
+      "chart-4": "oklch(0.8822 0.0403 298.1792)",
+      "chart-3": "oklch(0.8816 0.0276 93.1280)",
+      "secondary-foreground": "oklch(0.4334 0.0177 98.6048)",
+      "chart-5": "oklch(0.5608 0.1348 42.0584)",
+      foreground: "oklch(0.3438 0.0269 95.7226)",
+      "shadow-spread": "0px",
+      "chart-2": "oklch(0.6898 0.1581 290.4107)",
+      "accent-foreground": "oklch(0.2671 0.0196 98.9390)",
+      "chart-1": "oklch(0.5583 0.1276 42.9956)",
+      "muted-foreground": "oklch(0.6059 0.0075 97.4233)",
+      "font-mono": 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+      spacing: "0.25rem",
+      sidebar: "oklch(0.9663 0.0080 98.8792)",
+      "popover-foreground": "oklch(0.2671 0.0196 98.9390)",
+      radius: "0.5rem",
+      muted: "oklch(0.9341 0.0153 90.2390)",
+      border: "oklch(0.8847 0.0069 97.3627)",
+      "primary-foreground": "oklch(1.0000 0 0)",
+      popover: "oklch(1.0000 0 0)",
+      "font-sans": "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
+      "letter-spacing": "0em",
+      "shadow-color": "oklch(0 0 0)",
+      "shadow-opacity": "0.1",
+      "sidebar-border": "oklch(0.9401 0 0)",
+      "sidebar-primary": "oklch(0.6171 0.1375 39.0427)",
+      "sidebar-primary-foreground": "oklch(0.9881 0 0)",
+      accent: "oklch(0.9245 0.0138 92.9892)",
+      "font-serif": 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
+      destructive: "oklch(0.1908 0.0020 106.5859)",
+      secondary: "oklch(0.9245 0.0138 92.9892)",
+      "sidebar-foreground": "oklch(0.3590 0.0051 106.6524)",
+      "sidebar-accent-foreground": "oklch(0.3250 0 0)",
+      input: "oklch(0.7621 0.0156 98.3528)",
+      "shadow-offset-x": "0",
+      "sidebar-ring": "oklch(0.7731 0 0)",
+      "sidebar-accent": "oklch(0.9245 0.0138 92.9892)",
+      "destructive-foreground": "oklch(1.0000 0 0)",
+      "shadow-offset-y": "1px",
+      background: "oklch(0.9818 0.0054 95.0986)",
+      "shadow-blur": "3px",
+      "card-foreground": "oklch(0.1908 0.0020 106.5859)",
+      card: "oklch(0.9818 0.0054 95.0986)",
+      primary: "oklch(0.6171 0.1375 39.0427)"
+    },
+    dark: {
+      ring: "oklch(0.6724 0.1308 38.7559)",
+      "chart-4": "oklch(0.3074 0.0516 289.3230)",
+      "chart-3": "oklch(0.2130 0.0078 95.4245)",
+      "secondary-foreground": "oklch(0.3085 0.0035 106.6039)",
+      "chart-5": "oklch(0.5608 0.1348 42.0584)",
+      foreground: "oklch(0.8074 0.0142 93.0137)",
+      "shadow-spread": "0px",
+      "chart-2": "oklch(0.6898 0.1581 290.4107)",
+      "accent-foreground": "oklch(0.9663 0.0080 98.8792)",
+      "chart-1": "oklch(0.5583 0.1276 42.9956)",
+      "muted-foreground": "oklch(0.7713 0.0169 99.0657)",
+      "font-mono": 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+      sidebar: "oklch(0.2357 0.0024 67.7077)",
+      "popover-foreground": "oklch(0.9211 0.0040 106.4781)",
+      radius: "0.625rem",
+      muted: "oklch(0.2213 0.0038 106.7070)",
+      border: "oklch(0.3618 0.0101 106.8928)",
+      "primary-foreground": "oklch(1.0000 0 0)",
+      popover: "oklch(0.3085 0.0035 106.6039)",
+      "font-sans": "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
+      "shadow-color": "oklch(0 0 0)",
+      "shadow-opacity": "0.1",
+      "sidebar-border": "oklch(0.9401 0 0)",
+      "sidebar-primary": "oklch(0.3250 0 0)",
+      "sidebar-primary-foreground": "oklch(0.9881 0 0)",
+      accent: "oklch(0.2130 0.0078 95.4245)",
+      "font-serif": 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
+      destructive: "oklch(0.6368 0.2078 25.3313)",
+      secondary: "oklch(0.9818 0.0054 95.0986)",
+      "sidebar-foreground": "oklch(0.8074 0.0142 93.0137)",
+      "sidebar-accent-foreground": "oklch(0.8074 0.0142 93.0137)",
+      input: "oklch(0.4336 0.0113 100.2195)",
+      "shadow-offset-x": "0",
+      "sidebar-ring": "oklch(0.7731 0 0)",
+      "sidebar-accent": "oklch(0.1680 0.0020 106.6177)",
+      "destructive-foreground": "oklch(1.0000 0 0)",
+      "shadow-offset-y": "1px",
+      background: "oklch(0.2679 0.0036 106.6427)",
+      "shadow-blur": "3px",
+      "card-foreground": "oklch(0.9818 0.0054 95.0986)",
+      card: "oklch(0.2679 0.0036 106.6427)",
+      primary: "oklch(0.6724 0.1308 38.7559)"
+    }
+  },
+  twitter: {
+    name: "twitter",
+    light: {
+      ring: "oklch(0.6818 0.1584 243.3540)",
+      "chart-4": "oklch(0.7064 0.1822 151.7125)",
+      "chart-3": "oklch(0.8214 0.1600 82.5337)",
+      "secondary-foreground": "oklch(1.0000 0 0)",
+      "chart-5": "oklch(0.5919 0.2186 10.5826)",
+      foreground: "oklch(0.1884 0.0128 248.5103)",
+      "shadow-spread": "0px",
+      "chart-2": "oklch(0.6907 0.1554 160.3454)",
+      "accent-foreground": "oklch(0.6723 0.1606 244.9955)",
+      "chart-1": "oklch(0.6723 0.1606 244.9955)",
+      "muted-foreground": "oklch(0.1884 0.0128 248.5103)",
+      "font-mono": "Menlo, monospace",
+      spacing: "0.25rem",
+      sidebar: "oklch(0.9784 0.0011 197.1387)",
+      "popover-foreground": "oklch(0.1884 0.0128 248.5103)",
+      radius: "1.3rem",
+      muted: "oklch(0.9222 0.0013 286.3737)",
+      border: "oklch(0.9317 0.0118 231.6594)",
+      "primary-foreground": "oklch(1.0000 0 0)",
+      popover: "oklch(1.0000 0 0)",
+      "font-sans": "Open Sans, sans-serif",
+      "letter-spacing": "0em",
+      "shadow-color": "rgba(29,161,242,0.15)",
+      "shadow-opacity": "0",
+      "sidebar-border": "oklch(0.9271 0.0101 238.5177)",
+      "sidebar-primary": "oklch(0.6723 0.1606 244.9955)",
+      "sidebar-primary-foreground": "oklch(1.0000 0 0)",
+      accent: "oklch(0.9392 0.0166 250.8453)",
+      "font-serif": "Georgia, serif",
+      destructive: "oklch(0.6188 0.2376 25.7658)",
+      secondary: "oklch(0.1884 0.0128 248.5103)",
+      "sidebar-foreground": "oklch(0.1884 0.0128 248.5103)",
+      "sidebar-accent-foreground": "oklch(0.6723 0.1606 244.9955)",
+      input: "oklch(0.9809 0.0025 228.7836)",
+      "shadow-offset-x": "0px",
+      "sidebar-ring": "oklch(0.6818 0.1584 243.3540)",
+      "sidebar-accent": "oklch(0.9392 0.0166 250.8453)",
+      "destructive-foreground": "oklch(1.0000 0 0)",
+      "shadow-offset-y": "2px",
+      background: "oklch(1.0000 0 0)",
+      "shadow-blur": "0px",
+      "card-foreground": "oklch(0.1884 0.0128 248.5103)",
+      card: "oklch(0.9784 0.0011 197.1387)",
+      primary: "oklch(0.6723 0.1606 244.9955)"
+    },
+    dark: {
+      ring: "oklch(0.6818 0.1584 243.3540)",
+      "chart-4": "oklch(0.7064 0.1822 151.7125)",
+      "chart-3": "oklch(0.8214 0.1600 82.5337)",
+      "secondary-foreground": "oklch(0.1884 0.0128 248.5103)",
+      "chart-5": "oklch(0.5919 0.2186 10.5826)",
+      foreground: "oklch(0.9328 0.0025 228.7857)",
+      "shadow-spread": "0px",
+      "chart-2": "oklch(0.6907 0.1554 160.3454)",
+      "accent-foreground": "oklch(0.6692 0.1607 245.0110)",
+      "chart-1": "oklch(0.6723 0.1606 244.9955)",
+      "muted-foreground": "oklch(0.5637 0.0078 247.9662)",
+      "font-mono": 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+      sidebar: "oklch(0.2097 0.0080 274.5332)",
+      "popover-foreground": "oklch(0.9328 0.0025 228.7857)",
+      radius: "0.625rem",
+      muted: "oklch(0.2090 0 0)",
+      border: "oklch(0.2674 0.0047 248.0045)",
+      "primary-foreground": "oklch(1.0000 0 0)",
+      popover: "oklch(0 0 0)",
+      "font-sans": "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
+      "shadow-color": "rgba(29,161,242,0.25)",
+      "shadow-opacity": "0.1",
+      "sidebar-border": "oklch(0.3795 0.0220 240.5943)",
+      "sidebar-primary": "oklch(0.6818 0.1584 243.3540)",
+      "sidebar-primary-foreground": "oklch(1.0000 0 0)",
+      accent: "oklch(0.1928 0.0331 242.5459)",
+      "font-serif": 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
+      destructive: "oklch(0.6188 0.2376 25.7658)",
+      secondary: "oklch(0.9622 0.0035 219.5331)",
+      "sidebar-foreground": "oklch(0.8853 0 0)",
+      "sidebar-accent-foreground": "oklch(0.6692 0.1607 245.0110)",
+      input: "oklch(0.3020 0.0288 244.8244)",
+      "shadow-offset-x": "0",
+      "sidebar-ring": "oklch(0.6818 0.1584 243.3540)",
+      "sidebar-accent": "oklch(0.1928 0.0331 242.5459)",
+      "destructive-foreground": "oklch(1.0000 0 0)",
+      "shadow-offset-y": "1px",
+      background: "oklch(0 0 0)",
+      "shadow-blur": "3px",
+      "card-foreground": "oklch(0.8853 0 0)",
+      card: "oklch(0.2097 0.0080 274.5332)",
+      primary: "oklch(0.6692 0.1607 245.0110)"
+    }
+  },
+  vercel: {
+    name: "vercel",
+    light: {
+      ring: "oklch(0 0 0)",
+      "chart-4": "oklch(0.9200 0 0)",
+      "chart-3": "oklch(0.7200 0 0)",
+      "secondary-foreground": "oklch(0 0 0)",
+      "chart-5": "oklch(0.5600 0 0)",
+      foreground: "oklch(0 0 0)",
+      "shadow-spread": "0px",
+      "chart-2": "oklch(0.5500 0.2200 264.5300)",
+      "accent-foreground": "oklch(0 0 0)",
+      "chart-1": "oklch(0.8100 0.1700 75.3500)",
+      "muted-foreground": "oklch(0.4400 0 0)",
+      "font-mono": "Geist Mono, monospace",
+      spacing: "0.25rem",
+      sidebar: "oklch(0.9900 0 0)",
+      "popover-foreground": "oklch(0 0 0)",
+      radius: "0.5rem",
+      muted: "oklch(0.9700 0 0)",
+      border: "oklch(0.9200 0 0)",
+      "primary-foreground": "oklch(1 0 0)",
+      popover: "oklch(0.9900 0 0)",
+      "font-sans": "Geist, sans-serif",
+      "letter-spacing": "0em",
+      "shadow-color": "hsl(0 0% 0%)",
+      "shadow-opacity": "0.18",
+      "sidebar-border": "oklch(0.9400 0 0)",
+      "sidebar-primary": "oklch(0 0 0)",
+      "sidebar-primary-foreground": "oklch(1 0 0)",
+      accent: "oklch(0.9400 0 0)",
+      "font-serif": "Georgia, serif",
+      destructive: "oklch(0.6300 0.1900 23.0300)",
+      secondary: "oklch(0.9400 0 0)",
+      "sidebar-foreground": "oklch(0 0 0)",
+      "sidebar-accent-foreground": "oklch(0 0 0)",
+      input: "oklch(0.9400 0 0)",
+      "shadow-offset-x": "0px",
+      "sidebar-ring": "oklch(0 0 0)",
+      "sidebar-accent": "oklch(0.9400 0 0)",
+      "destructive-foreground": "oklch(1 0 0)",
+      "shadow-offset-y": "1px",
+      background: "oklch(0.9900 0 0)",
+      "shadow-blur": "2px",
+      "card-foreground": "oklch(0 0 0)",
+      card: "oklch(1 0 0)",
+      primary: "oklch(0 0 0)"
+    },
+    dark: {
+      ring: "oklch(0.7200 0 0)",
+      "chart-4": "oklch(0.4400 0 0)",
+      "chart-3": "oklch(0.5600 0 0)",
+      "secondary-foreground": "oklch(1 0 0)",
+      "chart-5": "oklch(0.9200 0 0)",
+      foreground: "oklch(1 0 0)",
+      "shadow-spread": "0px",
+      "chart-2": "oklch(0.5800 0.2100 260.8400)",
+      "accent-foreground": "oklch(1 0 0)",
+      "chart-1": "oklch(0.8100 0.1700 75.3500)",
+      "muted-foreground": "oklch(0.7200 0 0)",
+      "font-mono": "Geist Mono, monospace",
+      sidebar: "oklch(0.1800 0 0)",
+      "popover-foreground": "oklch(1 0 0)",
+      radius: "0.625rem",
+      muted: "oklch(0.2300 0 0)",
+      border: "oklch(0.2600 0 0)",
+      "primary-foreground": "oklch(0 0 0)",
+      popover: "oklch(0.1800 0 0)",
+      "font-sans": "Geist, sans-serif",
+      "shadow-color": "oklch(0 0 0)",
+      "shadow-opacity": "0.1",
+      "sidebar-border": "oklch(0.3200 0 0)",
+      "sidebar-primary": "oklch(1 0 0)",
+      "sidebar-primary-foreground": "oklch(0 0 0)",
+      accent: "oklch(0.3200 0 0)",
+      "font-serif": "Georgia, serif",
+      destructive: "oklch(0.6900 0.2000 23.9100)",
+      secondary: "oklch(0.2500 0 0)",
+      "sidebar-foreground": "oklch(1 0 0)",
+      "sidebar-accent-foreground": "oklch(1 0 0)",
+      input: "oklch(0.3200 0 0)",
+      "shadow-offset-x": "0",
+      "sidebar-ring": "oklch(0.7200 0 0)",
+      "sidebar-accent": "oklch(0.3200 0 0)",
+      "destructive-foreground": "oklch(0 0 0)",
+      "shadow-offset-y": "1px",
+      background: "oklch(0 0 0)",
+      "shadow-blur": "3px",
+      "card-foreground": "oklch(1 0 0)",
+      card: "oklch(0.1400 0 0)",
+      primary: "oklch(1 0 0)"
+    }
+  }
+}, i = Symbol("ThemeState");
+let d = null;
+function k(a = "theme", e) {
+  const c = n(a), r = n(e ?? !1), h = () => {
+    if (typeof window > "u") return;
+    const o = s[c.value];
+    if (!o) return;
+    const l = r.value ? o.dark : o.light, t = document.documentElement;
+    Object.entries(l).forEach(([g, p]) => {
+      t.style.setProperty(`--theme-${g}`, p);
+    }), r.value ? t.classList.add("dark") : t.classList.remove("dark"), localStorage.setItem("ui-theme", c.value), localStorage.setItem("ui-dark-mode", String(r.value));
+  }, u = (o) => {
+    if (!s[o]) {
+      console.warn(`[theme-kit] Theme "${o}" does not exist.`);
+      return;
+    }
+    c.value = o, h();
+  }, f = (o) => {
+    r.value = o, h();
+  }, m = () => {
+    r.value = !r.value, h();
+  };
+  if (typeof window < "u") {
+    const o = localStorage.getItem("ui-theme"), l = localStorage.getItem("ui-dark-mode");
+    o && s[o] && (c.value = o), l !== null ? r.value = l === "true" : e === void 0 && (r.value = window.matchMedia("(prefers-color-scheme: dark)").matches), h();
+  }
+  return {
+    theme: c,
+    isDark: r,
+    setTheme: u,
+    setDarkMode: f,
+    toggleDarkMode: m
+  };
+}
+function w() {
+  const a = b(i, null);
+  return a || (typeof window < "u" ? (d || (d = k()), d) : {
+    theme: n("theme"),
+    isDark: n(!1),
+    setTheme: () => {
+    },
+    setDarkMode: () => {
+    },
+    toggleDarkMode: () => {
+    }
+  });
+}
+const v = {
+  install(a, e = {}) {
+    e.extraThemes && Object.assign(s, e.extraThemes);
+    const c = k(
+      e.defaultTheme || "theme",
+      e.defaultDark
+    );
+    a.provide(i, c);
+  }
+};
+export {
+  v as themePlugin,
+  w as useTheme
+};

package/dist/index.umd.js ADDED Viewed

@@ -0,0 +1 @@

package/dist/themes/index.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import { ThemeConfig } from '../types';
+export declare const defaultThemes: Record<string, ThemeConfig>;

package/dist/types/index.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+export type ThemeColors = Record<string, string>;
+export interface ThemeConfig {
+    name: string;
+    light: ThemeColors;
+    dark: ThemeColors;
+}
+export interface PluginOptions {
+    defaultTheme?: string;
+    defaultDark?: boolean;
+    extraThemes?: Record<string, ThemeConfig>;
+}

package/package.json ADDED Viewed

@@ -0,0 +1,35 @@
+{
+  "name": "@zeldafox/vue-tailwind-theme-kit",
+  "version": "1.0.0",
+  "description": "A dynamic theme library for Vue 3 and TailwindCSS",
+  "type": "module",
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js"
+    },
+    "./preset": "./preset.cjs"
+  },
+  "files": [
+    "dist",
+    "preset.cjs"
+  ],
+  "scripts": {
+    "build": "vite build"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^3.0.0",
+    "vue": "^3.0.0"
+  }
+}

package/preset.cjs ADDED Viewed

@@ -0,0 +1,70 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: "class",
+  theme: {
+    extend: {
+      colors: {
+        background: "var(--theme-background)",
+        foreground: "var(--theme-foreground)",
+        card: {
+          DEFAULT: "var(--theme-card)",
+          foreground: "var(--theme-card-foreground)",
+        },
+        popover: {
+          DEFAULT: "var(--theme-popover)",
+          foreground: "var(--theme-popover-foreground)",
+        },
+        primary: {
+          DEFAULT: "var(--theme-primary)",
+          foreground: "var(--theme-primary-foreground)",
+        },
+        secondary: {
+          DEFAULT: "var(--theme-secondary)",
+          foreground: "var(--theme-secondary-foreground)",
+        },
+        muted: {
+          DEFAULT: "var(--theme-muted)",
+          foreground: "var(--theme-muted-foreground)",
+        },
+        accent: {
+          DEFAULT: "var(--theme-accent)",
+          foreground: "var(--theme-accent-foreground)",
+        },
+        destructive: {
+          DEFAULT: "var(--theme-destructive)",
+          foreground: "var(--theme-destructive-foreground)",
+        },
+        border: "var(--theme-border)",
+        input: "var(--theme-input)",
+        ring: "var(--theme-ring)",
+        chart: {
+          1: "var(--theme-chart-1)",
+          2: "var(--theme-chart-2)",
+          3: "var(--theme-chart-3)",
+          4: "var(--theme-chart-4)",
+          5: "var(--theme-chart-5)",
+        },
+        sidebar: {
+          DEFAULT: "var(--theme-sidebar)",
+          foreground: "var(--theme-sidebar-foreground)",
+          primary: "var(--theme-sidebar-primary)",
+          "primary-foreground": "var(--theme-sidebar-primary-foreground)",
+          accent: "var(--theme-sidebar-accent)",
+          "accent-foreground": "var(--theme-sidebar-accent-foreground)",
+          border: "var(--theme-sidebar-border)",
+          ring: "var(--theme-sidebar-ring)",
+        },
+      },
+      borderRadius: {
+        lg: "var(--theme-radius)",
+        md: "calc(var(--theme-radius) - 2px)",
+        sm: "calc(var(--theme-radius) - 4px)",
+      },
+      fontFamily: {
+        sans: "var(--theme-font-sans)",
+        serif: "var(--theme-font-serif)",
+        mono: "var(--theme-font-mono)",
+      },
+    },
+  },
+};