FormKit 主题创建者

使用此软件包来构建自己的FormKit主题并(可选)与世界共享.

来做

• 为变量添加分/ 最大值以锁定一个范围内的值.
• 在变量中添加自定义缩放 .

使用量

主题使用 createTheme 与 尾风 分类,并输出一个可以导入到窗体Kit配置中的主题文件——或者自动生成语义样式表 从 您定义的尾风类 .

创建主题

import { createTheme } from '@formkit/theme-creator';

export default createTheme({
  // Define your theme details here:
  meta: {
    name: 'Midnight blizzard',
    description: 'A cold and blustery theme for FormKit',
    formkitVersion: '^1.2.0',
    darkMode: true,
    supportedInputs: ['text', 'textarea', 'select']
    author: 'Justin Schroeder',
    authorLink: 'https://x.com/jpschroeder'
  },
  variables: {
    borderColor: {
      // Allow the theme editor to modify this variable with the "color" widget.
      editor: 'color', 
      // Only use tailwind base colors for editable variables.
      value: 'slate'
    },
    darkModeBorderColor: {
      // Allow the theme editor to modify this variable with the "color" widget.
      editor: 'color', 
      // Only use tailwind base colors for editable variables.
      value: 'white'
    },
    spacing: {
      editor: 'spacing',
      // Use tailwind spacing scale for editable variables.
      value: '2'
    },
    // This variable is not editable by GUI theme editor, but can be changed
    // by a user who wants to manually configure the theme.
    errorColor: 'red-500',
  },
  // Define your theme styles here for each input type.
  inputs: {
    text: {
      // Use the variables defined above in your styles by prepending a `$`.
      // These will be directly replaced in your class list.
      inner: 'p-$spacing bg-white/10 rounded-md border-$borderColor-100 dark:border-$darkModeBorderColor-50',
    }
  }
})

使用主题

一旦创建了您的主题, 用户可以导入并使用它生成自己的主题 类列表,也可以使用自动生成的语义样式表. 它们也可以在生成前配置主题.

// formkit-theme.config.ts
import midnightBlizzard from 'formkit-theme-midnight-blizzard'

export default midnightBlizzard({
  errorColor: 'red-300'
}, {
  // Users can change some of your classes here, they can even use the variable
  // names. These classes will be merged with the theme’s classes using
  // tailwind-merge.
  inputs: {
    text: {
      // Here they want the darkmode border color to be a bit stronger:
      inner: 'dark:border-$darkModeBorderColor-100'
    }
  }
})

发布主题

在向 npm 发布主题时, 您应该使用 formkit-theme- 前缀。 这将允许用户通过搜索轻松找到您的主题 formkit-theme- 时间npm.